AgentSkillsCN

dayopt-frontend-design

Dayopt 专属的前端设计技能。以“无装饰的极简体验”为理念，提供 UI 设计指南，旨在补充 Storybook，同时为字体、动画与设计决策提供明确的评判标准。

SKILL.md
--- frontmatter
name: dayopt-frontend-design
description: Dayopt専用のフロントエンドデザインスキル。「装飾のない基本体験」を実現するためのUI設計ガイドライン。Storybookを補完し、フォント・アニメーション・デザイン判断基準を提供。
license: MIT
metadata:
  author: dayopt
  version: '1.0.0'

Dayopt Frontend Design Skill

「GoogleカレンダーやTogglと同等の装飾のない基本体験」を実現するためのデザインスキル。

参照: 詳細なトークン定義は Storybook（npm run storybook → Tokens/*）を確認すること。

設計原則: 装飾のない基本体験

判断基準フローチャート

code
この要素は機能を伝えるために必要か？
├─ Yes → 実装する
│   └─ 最小限のスタイルで表現できるか？
│       ├─ Yes → そのまま実装
│       └─ No → 機能を分割して再検討
└─ No → 実装しない（装飾的要素は避ける）

良い例（採用）

パターン理由
控えめなホバー状態機能的フィードバック
セマンティックカラー意味を伝える色使い
一貫したスペーシング8pxグリッドで予測可能
シンプルなアイコン機能を瞬時に伝える

避けるべき例（不採用）

パターン理由
派手なグラデーション背景装飾的、集中を妨げる
過剰なアニメーション生産性ツールにはノイズ
影の多用フラットで十分
イラスト・装飾画像機能に寄与しない

Typography（タイポグラフィ）

フォント選定

現行: プロジェクトのシステムフォントを維持

css
/* 変更不要 - システムフォントスタック */
font-family:
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  sans-serif;

禁止: フォント変更の提案（Inter, Roboto, カスタムフォント追加など）

サイズ・ウェイト

Storybook Tokens/Spacingの8pxグリッドに従う:

用途サイズウェイトTailwind
本文16px400text-base font-normal
強調本文16px500text-base font-medium
小見出し24px600text-2xl font-semibold
ラベル14px400text-sm font-normal

Motion（アニメーション）

基本原則: 機能的アニメーションのみ

code
アニメーションを追加する前に確認:
1. ユーザーの操作に対するフィードバックか？ → OK
2. 状態変化を伝えるものか？ → OK
3. 視覚的な装飾か？ → NG

許可されるアニメーション

種類用途実装
Transitionホバー、フォーカスtransition-colors duration-150
Fade表示/非表示transition-opacity duration-200
Scale押下フィードバックactive:scale-95

禁止されるアニメーション

種類理由
ページ遷移アニメーション速度が優先
背景のパーティクル装飾的
ローディングの凝った演出シンプルなスピナーで十分
バウンス、弾性アニメーション生産性ツールには不適切

統一パターン

tsx
// ✅ 標準トランジション（150ms）
className = 'transition-colors duration-150';

// ✅ 表示切り替え（200ms）
className = 'transition-opacity duration-200';

// ✅ ホバー + 押下フィードバック
className = 'transition-colors hover:bg-state-hover active:scale-[0.98]';

// ❌ 過剰なアニメーション
className = 'animate-bounce animate-pulse';

Color（カラー）

セマンティックトークン厳守

Storybook Tokens/Colorsで定義されたトークンのみ使用。直接色指定禁止。

tsx
// ✅ セマンティックトークン
className = 'bg-card text-foreground border-border';

// ❌ 直接色指定
className = 'bg-white text-gray-900 border-gray-200';
className = 'bg-blue-500';

Primary色の制限

Primary = 「ユーザーアクションを促す要素」にのみ:

  • •✅ CTAボタン、リンク、フォーカスリング
  • •❌ 装飾、背景、待機状態

Layout（レイアウト）

情報密度

目標: Google Calendar / Toggl と同等の情報密度

コンポーネント密度
カレンダーセル高密度（多くのイベント表示可能）
リスト項目中密度（必要情報のみ）
フォーム低密度（操作性優先）

余白

8pxグリッド厳守（Storybook Tokens/Spacing参照）:

tsx
// ✅ 8の倍数
className = 'p-4 gap-4'; // 16px

// ❌ 8の倍数でない
className = 'p-3 gap-5'; // 12px, 20px

Components（コンポーネント設計）

shadcn/ui活用原則

  1. •そのまま使う: カスタマイズは最小限
  2. •薄いラッパー: スタイル統一のみ
  3. •オーバーライド禁止: 基本動作を変えない

新規コンポーネント判断

code
新しいコンポーネントが必要か？
├─ shadcn/uiにあるか？ → あれば使う
├─ 3箇所以上で使うか？ → Yes: components/common/に追加
└─ 1-2箇所のみか？ → インラインで実装

参照リンク

  • •Storybook（npm run storybook）- 詳細なトークン定義
  • •src/CLAUDE.md - コーディング規約
  • •globals.css - CSS変数定義

バージョン: 1.0.0 最終更新: 2026-01-19