 toyota
|
a73bb5b7ef
|
Separate figma-design-extractor skill into two specialized skills
## 概要
figma-design-extractorスキルを2つの専門特化したスキルに分離しました：
- figma-design-analyzer: Figmaデザインの分析・抽出
- nextjs-react-implementation: Next.js/React実装の生成
## 変更内容
### 1. 新規スキルの作成
**figma-design-analyzer** (`frontend_nextjs_development/skills/figma-design-analyzer/`)
- Figma MCP toolsを使った設計情報の抽出
- レイアウト、スペーシング、タイポグラフィの分析
- Atomic Design分類とセマンティックHTML選択
- 設計仕様書（Markdown形式）の生成
- 5つの分析ガイドを含む
**nextjs-react-implementation** (`frontend_nextjs_development/skills/nextjs-react-implementation/`)
- 設計仕様書からのReact/TypeScriptコンポーネント生成
- Tailwind CSSスタイリング
- Vitest browser modeテスト生成
- Storybookストーリー生成
- 3つの実装テンプレートを含む
### 2. 中間データフォーマットの定義
`frontend_nextjs_development/shared/`
- design-spec-format.md: 設計仕様書フォーマットの詳細定義
- Button.design.md.example: 具体的なサンプル仕様書
### 3. ディレクトリ構成の整理
スキルを `skills/` ディレクトリ配下に配置し、agents、hooks、commandsと並列に：
```
frontend_nextjs_development/
├── .claude-plugin/
├── agents/
├── commands/
├── hooks/
├── skills/
│ ├── figma-design-analyzer/
│ └── nextjs-react-implementation/
└── shared/
```
### 4. marketplace.json の更新
- 2つのスキルをpluginとして登録
- 適切なタグとメタデータを設定
- sourceパスを `./skills/*` に更新
### 5. README.md の刷新
- 2つのスキルの使い方を詳細に説明
- ワークフローの図解
- 使用例とサンプルコマンドを追加
- バージョン履歴の記録
## 利用フロー
1. **分析フェーズ**: figma-design-analyzerでFigmaデザインを分析し設計仕様書を生成
2. **実装フェーズ**: nextjs-react-implementationで設計仕様書から実装を生成
3. または、両スキルを連続実行して分析→実装をワンストップで完了
## メリット
- **責務の明確化**: デザイン分析と実装生成を分離
- **再利用性向上**: 各スキルを独立して使用可能
- **保守性向上**: 各スキルが独自のリソースを持ち、変更影響が限定的
- **拡張性向上**: 新しい実装ターゲット（Vue、Svelte等）を追加しやすい
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-21 13:16:34 +09:00 |
|