メニュー
高品質で記憶に残るフロントエンドUIを設計・実装するスキル。HTML/CSS/JSやReact/Vueのコンポーネント・ページ・アプリの作成/改修、レイアウト/タイポグラフィ/配色/モーション/美的方向性が重要な依頼で使用する。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
DDDアーキテクチャでHonoのバックエンドを新規実装または既存コードベースをリファクタリングする際のガイド。レイヤー構成（domain/application/infrastructure/controller）、依存方向、責務境界、Hono公式ミドルウェア/プラグインの活用、Hono OpenAPIプラグイン（hono-openapi）とzod-openapiの必須採用、Drizzle ORMの利用、トランザクション境界、エラーハンドリング、テスト指針、ESLint/Prettierの必須導入を含む。
DDDアーキテクチャでFastAPIのバックエンドを新規実装または既存コードベースをリファクタリングする際のガイド。レイヤー構成（domain/application/infrastructure/controller）、依存方向、責務境界、pydantic/sqlalchemy(sqlmodel)/alembic/pytestの前提、セッション管理（Dependsで1リクエスト1セッション、必要時UoW）を含む。
ReactでSPAフロントエンドを実装・改修するためのガイド。バックエンド分離前提でNext.jsやサーバーサイド機能に依存せず、React Router中心のクライアント実装を行う時に使う。認証はAuthProviderとuseAuthカスタムフックで統一し、OpenAPIからorvalまたはopenapi-typescriptで型/クライアントを生成して利用する。ESLint+Prettier、zod、shadcn/ui、デザイントークン（CSS変数/Tailwindテーマ）を前提にする場合に適用する。ディレクトリ構成はmodules/components/hooks/providers/servicesなどの直感的な命名で複雑化に耐える構成にする。
| name | frontend-design |
| description | 高品質で記憶に残るフロントエンドUIを設計・実装するスキル。HTML/CSS/JSやReact/Vueのコンポーネント・ページ・アプリの作成/改修、レイアウト/タイポグラフィ/配色/モーション/美的方向性が重要な依頼で使用する。 |
一般的なAIっぽい見た目を避け、意図的で洗練されたUIを実装する。
references/frontend-design-guidelines.md を読む。assets/ を追加し、ここから参照する。