mirror of https://github.com/xtone/ai_development_tools.git synced 2026-09-14 20:07:12 +08:00

Files

T

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

4.8 KiB

Raw Permalink Blame History

AI Development Tools

Claude Code用の開発支援ツールとプラグインのコレクションです。

Claude Code Plugin Marketplace対応

このリポジトリはClaude Code Plugin Marketplaceに対応しており、公開しているプラグインを簡単にインストールして利用できます。

公開中のプラグイン

biome-format - JavaScript/TypeScriptファイルの編集時に自動的にBiomeフォーマッターを実行
frontend-nextjs-development - Next.js開発向けのツール群（Figmaデザイン抽出、コンポーネント生成など）

プラグインのインストール方法

Method 1: Claude Code Marketplaceから直接インストール（推奨）

Claude Codeのマーケットプレイス機能を使用して、プラグインを簡単にインストールできます。

Claude Code上でマーケットプレイスにこのリポジトリを追加:

/plugin marketplace add git@github.com:xtone/ai_development_tools.git

または、HTTPSを使用する場合:

/plugin marketplace add xtone/ai_development_tools

プラグインをインストール:

インタラクティブにプラグインを選択してインストール:

/plugin

または、直接プラグイン名を指定してインストール:

/plugin install biome-format@xtone-ai-development-tools
/plugin install frontend-nextjs-development@xtone-ai-development-tools

プラグインをインストールすると、以下が自動的に行われます:

必要なスクリプトがインストールディレクトリにコピーされる
Hooksの設定が自動的に読み込まれる
手動でのhooks設定が不要になる

Method 2: 手動インストール

個別のプラグインを手動でセットアップする場合は、各プラグインのREADMEを参照してください。

参考文献:

Claude Code Plugins - 公式ドキュメント

このリポジトリをマーケットプレイスに追加する方法

自分のプラグインをClaude Code Marketplaceで公開したい場合は、以下の手順に従ってください。

1. リポジトリ構造の準備

your-repo/
├── .claude-plugin/
│   └── marketplace.json          # マーケットプレイスのメタデータ
└── your_plugin/
    ├── .claude-plugin/
    │   └── plugin.json            # プラグインの基本情報
    ├── hooks/
    │   ├── hooks.json             # Hooksの設定
    │   └── your_script.sh         # 実行スクリプト
    └── README.md                  # プラグインのドキュメント

2. marketplace.jsonの作成

リポジトリのルートに .claude-plugin/marketplace.json を作成します:

{
  "name": "your-marketplace-name",
  "owner": {
    "name": "Your Name",
    "email": "your.email@example.com"
  },
  "plugins": [
    {
      "name": "plugin-name",
      "source": "./path/to/plugin",
      "description": "プラグインの説明",
      "version": "0.1.0",
      "author": {
        "name": "Plugin Author"
      }
    }
  ]
}

3. plugin.jsonの作成

各プラグインのディレクトリ内に .claude-plugin/plugin.json を作成します:

{
  "name": "plugin-name"
}

4. hooks.jsonの作成

プラグインのhooksディレクトリ内に hooks/hooks.json を作成します:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "${CLAUDE_PLUGIN_ROOT}/hooks/your_script.sh"
          }
        ]
      }
    ]
  }
}

重要: スクリプトパスには ${CLAUDE_PLUGIN_ROOT} 変数を使用してください。この変数はプラグインのインストール時に自動的にインストールディレクトリのパスに展開されます。

5. スクリプトファイルの準備

実行スクリプトには実行権限を付与し、gitリポジトリにその権限を記録します:

chmod +x your_plugin/hooks/your_script.sh
git add your_plugin/hooks/your_script.sh
git update-index --chmod=+x your_plugin/hooks/your_script.sh

6. リポジトリの公開

リポジトリをGitHubにプッシュすることで、他のユーザーがマーケットプレイスを追加できるようになります。