Claude/frontend design skills zyad5

.claude/skills/frontend-design/README.md

@@ -0,0 +1,123 @@
+# frontend-design Skill
+
+A [Claude Code](https://docs.anthropic.com/en/docs/claude-code) skill that guides creation of distinctive, production-grade frontend interfaces with high design quality. Avoids generic "AI slop" aesthetics and produces visually striking, memorable code.
+
+## Dependencies
+
+| Dependency | Version | Required |
+|---|---|---|
+| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | Latest | Yes |
+| Node.js | >= 18.0.0 | Recommended |
+| npm | >= 9.0.0 | Recommended |
+
+### Supported Frameworks
+
+This skill generates code for any frontend framework. No specific framework is required, but output quality is optimized for:
+
+- **HTML / CSS / JavaScript** (vanilla)
+- **React** (with Next.js, Vite, etc.)
+- **Vue**
+
+### Optional Dependencies for Enhanced Output
+
+| Package | Purpose |
+|---|---|
+| [motion](https://www.npmjs.com/package/motion) | Advanced animations in React projects |
+| [Google Fonts](https://fonts.google.com/) | Distinctive typography choices |
+| [LiftKit](https://github.com/chainlift/liftkit) | Design system with golden ratio scaling and optical symmetry |
+
+## Installation
+
+### 1. Install Claude Code
+
+If you haven't installed Claude Code yet:
+
+```bash
+npm install -g @anthropic-ai/claude-code
+```
+
+### 2. Add the Skill to Your Project
+
+#### Option A: Clone This Repository
+
+If you're already using LiftKit:
+
+```bash
+git clone https://github.com/chainlift/liftkit.git
+cd liftkit
+```
+
+The skill is located at `.claude/skills/frontend-design/SKILL.md` and will be automatically discovered by Claude Code when you start a session in the project directory.
+
+#### Option B: Copy the Skill into Your Own Project
+
+1. Create the skill directory in your project:
+
+   ```bash
+   mkdir -p .claude/skills/frontend-design
+   ```
+
+2. Copy the `SKILL.md` file:
+
+   ```bash
+   cp path/to/liftkit/.claude/skills/frontend-design/SKILL.md \
+      .claude/skills/frontend-design/SKILL.md
+   ```
+
+3. Start Claude Code in your project:
+
+   ```bash
+   claude
+   ```
+
+The skill will be auto-discovered — no additional configuration is needed.
+
+### 3. Verify Installation
+
+Start Claude Code and type:
+
+```
+/frontend-design
+```
+
+If the skill appears in the slash command list, installation is complete.
+
+## Usage
+
+### Invoke via Slash Command
+
+```
+/frontend-design Build a pricing page for a SaaS analytics platform
+```
+
+### Invoke Naturally
+
+Simply ask Claude Code to build a frontend component, page, or application. The skill is automatically triggered when the request matches its description.
+
+```
+Build a landing page for a coffee roastery with a dark, editorial aesthetic
+```
+
+### Example Prompts
+
+| Prompt | Expected Aesthetic |
+|---|---|
+| `Build a dashboard for a music streaming app` | Bold, immersive, dark theme with vibrant accents |
+| `Create a portfolio site for an architect` | Minimal, grid-heavy, monochrome with precise spacing |
+| `Design a checkout flow for a luxury watch brand` | Refined, serif typography, muted gold accents |
+| `Make a 404 page for a retro gaming site` | Pixel art, CRT effects, neon color palette |
+
+## What the Skill Does
+
+1. **Design Thinking** — Analyzes purpose, audience, and constraints before writing code
+2. **Aesthetic Direction** — Commits to a bold, intentional design direction (brutalist, editorial, retro-futuristic, etc.)
+3. **Code Generation** — Produces production-grade, functional code with:
+   - Distinctive typography (no generic fonts)
+   - Cohesive color palettes with CSS variables
+   - Meaningful motion and micro-interactions
+   - Unexpected spatial composition
+   - Rich visual details (textures, gradients, shadows)
+
+## License
+
+Apache License 2.0 — see [LICENSE](../../../LICENSE) for complete terms.

.claude/skills/frontend-design/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
+license: Complete terms in LICENSE.txt
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

README.ja.md

@@ -0,0 +1,218 @@
+<!-- markdownlint-disable -->
+<br />
+<div align="center">
+  <a href="https://github.com/chainlift/liftkit">
+    <img src="https://cdn.prod.website-files.com/657f62adb6ceeafe578853be/68748d8bdb8b734290a3db92_h-lockup-transparent.svg" height="100em" alt="chainlift-liftkit">
+  </a>
+  <p>🎢</p>
+  <p>
+    <strong>
+      完璧主義者のためのUIフレームワーク
+    </strong>
+  </p>
+
+[![css][css-shield]][css-url]
+[![NextJS][nextjs-shield]][nextjs-url]
+
+[![GPL2 License][license-shield]][license-url]
+[![Issues][issues-shield]][issues-url]
+
+</div>
+<!-- markdownlint-restore -->
+
+[English](README.md) | **日本語**
+
+# :grey_question: LiftKit とは？
+
+LiftKit は、意識せずともより良いデザインを実現できる UI フレームワークです。その核心にあるのは、スケーリング、スペーシング、カラーに関する計算式からなるプラットフォームに依存しないシステムであり、高度なデザイン原則を自動的に適用します。ユーティリティクラスを使うだけで、LiftKit が裏側で黄金比スケーリング、光学的な対称性、コントラスト比チェックを適用してくれます。
+
+## 概要
+
+- 以下の説明は、当社のウェブサイトの方が読みやすくなっています: [ドキュメントを見る](https://www.chainlift.io/liftkit/get-started)
+
+### 公式リポジトリ
+
+これは公式リポジトリです。現在、Tailwind なしの Next.js のみをサポートしています。このプロジェクトは Chainlift によってメンテナンスされていますが、Chainlift 自体もパートタイムのコントリビューターのみで運営されています。そのため、あらゆるフレームワークへのサポート拡大を計画していますが、現在は時間とリソースの制約があります。
+
+コミュニティのコントリビューターは、各自のフォークに対して責任を持ちます。ただし、主要なコントリビューターを内部 Slack に招待し、他の開発者とコミュニケーションやコラボレーションができるようにするなど、可能な限りの支援を行っています。
+
+### コミュニティプロジェクト
+
+Chainlift による公式サポートはありませんが、オーナーとは連絡を取り合っています。サポートについては各プロジェクトのオーナーにお問い合わせください。
+
+- [liftkit-tailwind](https://github.com/jellydeck/liftkit-tailwind)
+
+### コントリビューターになるには
+
+システムの整合性を保つため、コントリビューターの方には私たちと直接連携して作業していただくことを強く推奨します。
+
+貢献に興味があり、当サイトおよびこの README に掲載されたい場合は、簡単な自己紹介とどのように貢献したいかを記載して info@chainlift.io までご連絡ください。
+
+# Next.js へのインストール
+
+このドキュメントは以下を前提としています:
+
+- ローカルマシンに **Node.js**、**npm**、**Git** がインストール済みであること
+- `cd` などの基本的なターミナルコマンドに慣れていること
+
+## 1. 設定ファイルの作成
+
+### オプション A: テンプレートプロジェクトをクローンする
+
+1. 以下のコマンドをターミナルに貼り付け、テンプレートをクローンします:
+
+   ```bash
+   git clone https://github.com/Chainlift/liftkit-template.git
+   ```
+
+2. 作成されたプロジェクトディレクトリに `cd` で移動します。
+
+   - もし `direnv: error` というエラーが出ても無視してください。これは近いうちに修正されるバグです。
+
+3. 以下を実行します:
+
+   ```bash
+   npm install
+   ```
+
+4. 必要なコンポーネントをインストールします（下記のセクション 2 を参照）。
+5. LiftKit の CSS をアプリの `globals.css` にインポートします:
+
+   ```css
+   @import url("@/lib/css/index.css");
+   ```
+
+#### テンプレートには何が含まれていますか？
+
+LiftKit Core の設定ファイルが事前にインストールされた空の Next.js プロジェクトです。これが最も早く使い始める方法です。
+
+---
+
+### オプション B: 既存の Next.js プロジェクトに追加する
+
+1. プロジェクトのルートディレクトリに `cd` で移動します。
+2. LiftKit CLI を開発依存関係としてインストールします:
+
+   ```bash
+   npm install @chainlift/liftkit --save-dev
+   ```
+
+3. LiftKit を初期化します:
+
+   ```bash
+   npx liftkit init
+   ```
+
+   - `package.json` に `add` スクリプトを追加するか聞かれたら、**yes** と答えてください。
+   - `devDependencies` に **shadcn** をインストールするか聞かれたら、**yes** と答えてください。
+
+4. 必要なコンポーネントをインストールします（下記のセクション 2 を参照）。
+5. LiftKit の CSS をアプリの `globals.css` にインポートします:
+
+   ```css
+   @import url("@/lib/css/index.css");
+   ```
+
+#### `npx liftkit init` は何をするのですか？
+
+プロジェクトのルートに以下の 2 つのファイルを追加します:
+
+- `components.json`
+- `tailwind.config.ts`
+
+> _LiftKit を使用するために Tailwind 自体は必要ありません。今のところ設定ファイルが必要なだけです。_
+
+---
+
+## 2. LiftKit コンポーネントとスタイルのインストール
+
+LiftKit Core はベースとなる設定にすぎません。LiftKit Components は実際の UI コンポーネント（CSS 含む）です。ビルド時に、未使用の CSS はツリーシェイク（削除）されます。
+
+| 方法 | 説明 | コマンド |
+| --- | --- | --- |
+| **すべて** | すべてのコンポーネント、CSS、型定義 | `npm run add all` |
+| **単一コンポーネント** | 指定したコンポーネントのみ（CSS と型定義含む） | `npm run add component-name-kebab-case` |
+| **ベースのみ** | CSS と型定義のみ | `npm run add base` |
+
+> React 19 の互換性に関する警告が出た場合は、`--force` を追加して続行してください。
+
+---
+
+## FAQ
+
+- **1つのコンポーネントしかインストールしていないのに、複数がインストールされました。なぜですか？**
+  一部のコンポーネントは他のコンポーネントをインポートしています。例えば、`Badge` をインストールすると `Icon` も一緒にインストールされます。
+- **使用していないコンポーネントの CSS までインストールされたのはなぜですか？**
+  自由に試していただくための仕様です。未使用のスタイルはビルド時に削除されます。
+- **未使用の CSS を削除するにはどうすればいいですか？**
+  ビルド時に自動的に削除されます。
+- **LiftKit は Tailwind を必要としますか？**
+  いいえ。必要なのは `tailwind.config.ts` ファイルだけです（現在のレジストリの要件のため）。Tailwind 自体は依存関係では**ありません**。
+
+---
+
+## Figma テンプレート
+
+> **警告:** 現在、非常に散らかった状態です。改善に取り組んでいますので、コントリビューションを歓迎します！
+
+### コミュニティファイルのクローン
+
+- [Figma でファイルを見る](https://www.figma.com/community/file/1404856652359938563) (新しいタブで開きます)
+
+---
+
+## 既知の問題
+
+### ボタンのバリアントが制御不能
+
+- 把握しています。近いうちに修正します。
+
+  - アイコンの有無によってボタンのパディングが調整されますが、パディングの値を props で制御できません。
+  - すべてを明示的にリストアップするしか選択肢がありませんでしたが、今振り返ると明らかに悪いアイデアでした。
+
+### ローカル変数のドキュメントが必要
+
+- Figma はマージンや `em` 単位をサポートしていないため、すべてピクセルに変換しました（`1rem = 16px` と仮定）。
+- 変数はコレクションに整理されています:
+
+  - **Global collection** = 基本的な `LkSizeUnit` 変数
+  - **Text Spacing Vals** = `LkFontClass` ごとのサブセット（`.m-bottom-xs` のようなスペーシング props をシミュレート）
+
+---
+
+## Claude Code スキル
+
+このリポジトリには、AI を活用したフロントエンド開発を強化する [Claude Code](https://docs.anthropic.com/en/docs/claude-code) スキルが含まれています。
+
+### frontend-design
+
+Claude Code が独創的でプロダクション品質のフロントエンドインターフェースを作成するためのスキルです。ありがちな「AI っぽい」デザインを避け、高品質で記憶に残るデザインを生成します。
+
+**クイックスタート:**
+
+1. Claude Code をインストール: `npm install -g @anthropic-ai/claude-code`
+2. このプロジェクトディレクトリで Claude Code を起動: `claude`
+3. スキルを使用: `/frontend-design コーヒーロースタリーのランディングページを作成して`
+
+スキルは `.claude/skills/frontend-design/SKILL.md` から自動検出されます。詳細なドキュメント、依存関係、インストール方法については [スキル README](.claude/skills/frontend-design/README.md) を参照してください。
+
+---
+
+## Webflow テンプレートのクローン
+
+- [Made in Webflow で見る](https://www.webflow.com) (新しいタブで開きます)
+
+<!-- MARKDOWN LINKS & IMAGES -->
+
+[nextjs-shield]: https://img.shields.io/badge/Next.js-000000.svg?style=for-the-badge&logo=next.js&logoColor=white
+[nextjs-url]: https://github.com/vercel/next.js
+[nix-shield]: https://img.shields.io/badge/nix-0175C2?style=for-the-badge&logo=NixOS&logoColor=white
+[nix-url]: https://nixos.org/
+[css-shield]: https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge&logo=css3&logoColor=white
+[css-url]: https://developer.mozilla.org/en-US/docs/Web/CSS
+[shadcn-shield]: https://img.shields.io/badge/shadcn-registry-%23EDE9FE.svg?style=for-the-badge&logo=vercel&logoColor=black
+[shadcn-url]: https://ui.shadcn.com/docs/registry
+[license-shield]: https://img.shields.io/github/license/chainlift/liftkit.svg?style=for-the-badge
+[license-url]: https://github.com/chainlift/liftkit/blob/master/LICENSE
+[issues-shield]: https://img.shields.io/github/issues/chainlift/liftkit.svg?style=for-the-badge
+[issues-url]: https://github.com/chainlift/liftkit/issues