frontend-design

フロントエンドデザイン

本番環境に適した、個性的なインターフェースを作成するためのオーケストレーターです。

スキルの振り分け

ニーズに応じて、専門スキルを呼び出します。

ニーズ	スキル	内容
デザイントークン	references/design-md-format.mdを参照	DESIGN.mdのトークン解析、エクスポート
デザインの方向性	frontend-design-philosophy	美的表現の極端な方向性、アンチパターン
CSSの実装	frontend-css-patterns	タイポグラフィ、色、モーション、空間
React/Vueのパターン	references/react-vue.mdを参照	Framer Motion、Vue Transitions
Rails/Hotwire	references/rails-hotwire.mdを参照	ViewComponent、Stimulus、Turbo

フレームワークリソース

React/Vue

以下についてはreferences/react-vue.mdを参照してください。

• Framer Motionによる段階的なアニメーション
• Vue Transition/TransitionGroupのパターン
• デザイントークンを使ったコンポーネントアーキテクチャ

Rails/Hotwire

以下についてはreferences/rails-hotwire.mdを参照してください。

• サイドカースタイルを使ったViewComponent
• Stimulusの表示／切り替えコントローラー
• アニメーション付きのTurbo FramesとStreams
• content_forを使ったERBレイアウトのパターン
• CSSデザイントークンとインポート順序

実装リソース

リソース	内容
ui-implementation-guide.md	タイポグラフィのルール、色、フォーム、ボタン、テーブル
motion-patterns.md	ページ読み込み、スクロール時のトリガー、ホバー、パフォーマンス
css-polish-tips.md	アクセシビリティ、スクロール、フォーカス、防御的CSS
landing-page-design.md	セクションのデザイン、カラーパレット、タイポグラフィの組み合わせ

ワークフロー

1. Check for design tokens
   - Look for DESIGN.md in project root
   - If found: parse tokens, use as source of truth for colors, typography, spacing
   - See references/design-md-format.md for format details

2. Clarify design direction
   - Invoke `frontend-design-philosophy` for aesthetic guidance
   - User picks: brutalist, minimalist, luxury, playful, etc.

3. Implement CSS foundation
   - Invoke `frontend-css-patterns` for typography, color, motion
   - If DESIGN.md tokens exist: map tokens to CSS variables or Tailwind theme
   - Otherwise: customize Tailwind or write CSS variables

4. Apply framework patterns
   - React/Vue: Use references/react-vue.md
   - Rails/Hotwire: Use references/rails-hotwire.md

5. Polish and validate
   - Use references/css-polish-tips.md for accessibility
   - Use references/motion-patterns.md for animation
   - Run validation checklist from philosophy skill

クイックリファレンス

Webインターフェースの基準

以下についてはreferences/web-interface-standards.mdを参照してください。

• キーボード操作の要件（WAI-ARIAウィジェットのパターン）
• タッチターゲットのサイズ（モバイルでは44px、デスクトップでは24px）
• フォームの動作（Enterキーによる送信、自動補完、モバイルキーボード）
• アニメーションのアクセシビリティ（prefers-reduced-motion）
• ネットワークパフォーマンスの予算（POSTは500ms未満、仮想化のしきい値）

検証チェックリスト：

• 個性的なタイポグラフィ（デフォルトのフォントではない）
• 意図的で、限定されたカラーパレット
• レイアウトが予測可能なパターンを崩している
• モーションに明確な目的がある
• デザインの方向性が明確
• レスポンシブ時の品質が維持されている
• アクセシビリティが保たれている