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

..

.gitkeep

Separate figma-design-extractor skill into two specialized skills

2025-10-21 13:16:34 +09:00