commit ef9fcbb24dc95ce85ca769350b7adb62977804fa Author: Zhongwei Li Date: Sun Nov 30 09:07:15 2025 +0800 Initial commit diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..f59aad9 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,21 @@ +{ + "name": "frontend-nextjs-development", + "description": "Next.js開発向けのツール群（Figmaデザイン抽出、コンポーネント生成など）", + "version": "0.0.0-2025.11.28", + "author": { + "name": "TOYOTA, Yoichi", + "email": "y.toyota@xtone.co.jp" + }, + "skills": [ + "./skills" + ], + "agents": [ + "./agents" + ], + "commands": [ + "./commands" + ], + "hooks": [ + "./hooks" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..0280155 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# frontend-nextjs-development + +Next.js開発向けのツール群（Figmaデザイン抽出、コンポーネント生成など） diff --git a/agents/.gitkeep b/agents/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/commands/.gitkeep b/commands/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/hooks/.gitkeep b/hooks/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/hooks/biome-format/biome_format.sh b/hooks/biome-format/biome_format.sh new file mode 100755 index 0000000..f154914 --- /dev/null +++ b/hooks/biome-format/biome_format.sh @@ -0,0 +1,78 @@ +#!/bin/bash + +# 対象ファイル拡張子のリスト +TARGET_EXTENSIONS=("ts" "tsx" "js" "jsx") + +# 標準入力からJSONデータを読み取り +input_data=$(cat) + +# ファイルパスを取得 +file_path=$(echo "$input_data" | jq -r '.tool_input.file_path') + +# 対象ファイル拡張子かチェック +is_target_file=false +for ext in "${TARGET_EXTENSIONS[@]}"; do + if [[ "$file_path" == *".$ext" ]]; then + is_target_file=true + break + fi +done + +if [ "$is_target_file" = false ]; then + echo "Not a target file extension: $file_path" + exit 0 +fi + +# ファイルパスを絶対パスに変換 +if [[ "$file_path" != /* ]]; then + file_path="$(pwd)/$file_path" +fi + +# ファイルが存在するかチェック +if [ ! -f "$file_path" ]; then + echo "File not found: $file_path" + exit 1 +fi + +# ファイルのディレクトリから上位ディレクトリへ遡ってbiome.jsonを探す +find_biome_config() { + local current_dir="$1" + + while [ "$current_dir" != "/" ]; do + if [ -f "$current_dir/biome.json" ]; then + echo "$current_dir" + return 0 + fi + current_dir=$(dirname "$current_dir") + done + + return 1 +} + +# ファイルのディレクトリを取得 +file_dir=$(dirname "$file_path") + +# biome.jsonを探す +config_dir=$(find_biome_config "$file_dir") + +if [ -z "$config_dir" ]; then + echo "biome.json not found, using default configuration" + echo "Formatting $file_path with Biome (default config)" + # デフォルト設定でbiome formatを実行 + if npx @biomejs/biome format --write "$file_path"; then + echo "Successfully formatted: $file_path" + else + echo "Error: Failed to format $file_path" >&2 + exit 1 + fi +else + echo "Found biome.json in: $config_dir" + echo "Formatting $file_path with Biome" + # biome.jsonがあるディレクトリに移動してから実行 + if (cd "$config_dir" && npx @biomejs/biome format --write "$file_path"); then + echo "Successfully formatted: $file_path" + else + echo "Error: Failed to format $file_path" >&2 + exit 1 + fi +fi \ No newline at end of file diff --git a/hooks/biome-format/hooks.json b/hooks/biome-format/hooks.json new file mode 100644 index 0000000..14985c0 --- /dev/null +++ b/hooks/biome-format/hooks.json @@ -0,0 +1,15 @@ +{ + "hooks": { + "PostToolUse": [ + { + "matcher": "Write|Edit|MultiEdit", + "hooks": [ + { + "type": "command", + "command": "${CLAUDE_PLUGIN_ROOT}/hooks/biome-format/biome_format.sh" + } + ] + } + ] + } +} diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..8e14fbf --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,101 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:xtone/ai_development_tools:frontend_nextjs_development", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "a313d080117093ed3f0915c5436e3d49e8421a4d", + "treeHash": "6da52c159f168a91d79211e089a6cea35fe15ba123afd5880d5605174c3fdcc7", + "generatedAt": "2025-11-28T10:29:07.551763Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "frontend-nextjs-development", + "description": "Next.js開発向けのツール群（Figmaデザイン抽出、コンポーネント生成など）", + "version": null + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "37139ec3e65ca7200660a2ec71937053399bd471037991f0f0b55ce36fe01cbe" + }, + { + "path": "agents/.gitkeep", + "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855" + }, + { + "path": "hooks/.gitkeep", + "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855" + }, + { + "path": "hooks/biome-format/biome_format.sh", + "sha256": "064108157ecb568b4df53d5f56cffea602ec6c5907fe54b21686faf40fecddb7" + }, + { + "path": "hooks/biome-format/hooks.json", + "sha256": "0390affba95e1fe7b91ce819d916de8d94735483bdd33eee39b9d9a33fbe4ece" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "b82642e648ee77b5a7eeaf171401510729b5b774da1ace78fcf1c982dd2126d9" + }, + { + "path": "commands/.gitkeep", + "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855" + }, + { + "path": "skills/nextjs-react-implementation/SKILL.md", + "sha256": "08efc9ad2f1273c94e82c86cdfc7990fec404877e4f8b505777208f740d62ec1" + }, + { + "path": "skills/nextjs-react-implementation/assets/templates/test.tsx.template", + "sha256": "47638d23b1eb08923a4bd11c7422314e30b22ccc9854e8c3d18a5e0253594bb7" + }, + { + "path": "skills/nextjs-react-implementation/assets/templates/storybook.tsx.template", + "sha256": "3193dc582cf21b9f0c8ae6be68daab1fe8a747f4dd12789309caef744cc2e643" + }, + { + "path": "skills/nextjs-react-implementation/assets/templates/component.tsx.template", + "sha256": "21f27ad6efff3c604408a5e948f90fb819b1ad700d88b7ac4cc6523b76f47f38" + }, + { + "path": "skills/figma-design-analyzer/SKILL.md", + "sha256": "7ef7f3778b1bee298696c206fbaf37fcb11417a3f3498f44f5c747f7cf58d328" + }, + { + "path": "skills/figma-design-analyzer/references/typography-extraction-guide.md", + "sha256": "b28d040a192271344889e623b7abaa0d92aea015582096b1497f072e0fbde21a" + }, + { + "path": "skills/figma-design-analyzer/references/spacing-extraction-guide.md", + "sha256": "1735da6037d870a75d7a5cc995e34f0a161b2828ba71b562002d26bbc63b0e4b" + }, + { + "path": "skills/figma-design-analyzer/references/atomic-design-classification.md", + "sha256": "b1a9e205f6881d2e9e7fdf332ea42c926141cd17416febdcbf2404c4295a9330" + }, + { + "path": "skills/figma-design-analyzer/references/semantic-html-guide.md", + "sha256": "fa49fe94cd118722a1467775f7bbe1258a9c46fa042a1ecd28fa74d8e0a63625" + }, + { + "path": "skills/figma-design-analyzer/references/layout-analysis-guide.md", + "sha256": "a0911aef52cb0b26c462ae9238c16d7b9eae0295bbe8272141d35f76cadd453b" + } + ], + "dirSha256": "6da52c159f168a91d79211e089a6cea35fe15ba123afd5880d5605174c3fdcc7" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/figma-design-analyzer/SKILL.md b/skills/figma-design-analyzer/SKILL.md new file mode 100644 index 0000000..2b3c1f4 --- /dev/null +++ b/skills/figma-design-analyzer/SKILL.md @@ -0,0 +1,543 @@ +--- +name: figma-design-analyzer +description: Extract and analyze Figma designs to create structured design specifications. Use this skill when you need to analyze Figma nodes, extract design properties (layout, spacing, typography), classify components using Atomic Design principles, and generate design specification documents that can be used for implementation. +--- + +# Figma Design Analyzer + +## Overview + +Systematically analyze Figma designs and extract structured design specifications. This skill focuses on understanding design intent, extracting accurate properties, and creating comprehensive design specification documents that serve as blueprints for implementation. + +**Use this skill when:** +- Analyzing Figma designs to understand structure and properties +- Extracting design tokens and component specifications +- Classifying components according to Atomic Design principles +- Creating design specification documents for developers +- Comparing existing implementations with Figma designs + +## Core Workflow + +### Step 1: Extract Figma Design Information + +When given a Figma URL or node ID, use Figma MCP tools to extract design data: + +1. **Parse the Figma URL to extract node ID:** + ``` + URL: https://figma.com/design/fileKey/fileName?node-id=1-2 + Node ID: 1:2 (replace - with :) + ``` + +2. **Extract node design context:** + ``` + mcp__figma-dev__get_design_context( + nodeId: "1:2", + dirForAssetWrites: "/absolute/path/to/project/public/assets", + clientLanguages: "typescript", + clientFrameworks: "react,nextjs" + ) + ``` + This returns the design code, including HTML structure and CSS properties. + +3. **Get component metadata for structure overview:** + ``` + mcp__figma-dev__get_metadata( + nodeId: "1:2", + clientLanguages: "typescript", + clientFrameworks: "react,nextjs" + ) + ``` + Use this to understand the component hierarchy before detailed analysis. + +4. **Check for Figma variables (design tokens):** + ``` + mcp__figma-dev__get_variable_defs( + nodeId: "1:2", + clientLanguages: "typescript", + clientFrameworks: "react,nextjs" + ) + ``` + Extract design system tokens for colors, typography, spacing, etc. + +5. **Verify Code Connect mappings:** + ``` + mcp__figma-dev__get_code_connect_map( + nodeId: "1:2", + clientLanguages: "typescript", + clientFrameworks: "react,nextjs" + ) + ``` + Check if the component is already mapped to existing code. + +### Step 2: Handle Component Instances and Variants + +**Important:** When the node is a component instance: + +1. **Identify if it's an instance:** + - Check metadata for "component instance" type + - Note the main component ID + +2. **Get the main component:** + - Use `get_design_context` on the main component node + - Extract the base structure and properties + +3. **Extract instance-specific properties:** + - Get the instance's specific size, device, and variant settings + - Note any overrides (text, images, colors, etc.) + +4. **Handle variants:** + - If the main component uses variants, identify the variant mode + - Extract the correct variant values for the instance + - Document variant properties for props mapping + +### Step 3: Classify the Component + +Use Atomic Design principles to classify the component: + +1. **Read the classification guide:** + ``` + Read references/atomic-design-classification.md + ``` + +2. **Apply the decision tree:** + - **Atom**: Indivisible, single purpose (button, input, icon, text label) + - **Molecule**: 2-5 atoms, simple combination (search bar, form field) + - **Organism**: Complex, multiple molecules/atoms (header, card, form) + +3. **Determine the component category:** + - Document: `atomicCategory: Atom | Molecule | Organism` + +### Step 4: Analyze Layout and Spacing + +Extract accurate layout information: + +1. **Read layout analysis guide:** + ``` + Read references/layout-analysis-guide.md + ``` + +2. **Determine layout method:** + - **Auto Layout** → Flexbox + - Check: direction (row/column), justify-content, align-items + - **Grid structure** → CSS Grid + - Check: grid-template-columns, grid-template-rows, gap + - **Overlapping elements** → Absolute positioning + - Check: position, top, left, z-index + +3. **Extract spacing values:** + ``` + Read references/spacing-extraction-guide.md + ``` + - **Padding**: Internal spacing (px, py, pt, pr, pb, pl) + - **Gap**: Spacing between flex/grid items + - **Margin**: External spacing (rarely used, prefer gap) + +4. **Map to Tailwind classes:** + - Use standard Tailwind scale when possible (p-4, gap-6, etc.) + - Use arbitrary values `[value]` for custom sizes (p-[18px]) + +5. **Document in specification:** + ```markdown + ## Layout + - Method: Flexbox + - Direction: row + - Justify: center + - Align: center + + ## Spacing + - Padding: px-6 py-3 + - Gap: gap-2 + - Border Radius: rounded-lg + ``` + +### Step 5: Extract Typography + +Extract accurate text styling: + +1. **Read typography guide:** + ``` + Read references/typography-extraction-guide.md + ``` + +2. **Extract font properties:** + - Font family (font-sans, font-serif, custom) + - Font size (text-sm, text-base, text-lg, etc.) + - Font weight (font-normal, font-semibold, font-bold) + - Line height (leading-tight, leading-normal, etc.) + - Letter spacing (tracking-tight, tracking-wide, etc.) + - Text color (text-gray-900, text-white, etc.) + - Text alignment (text-left, text-center, text-right) + - Text decoration (underline, line-through) + - Text transform (uppercase, lowercase, capitalize) + +3. **Map to Tailwind classes:** + - Use standard Tailwind typography classes + - Check for design tokens in Figma variables + - Use arbitrary values for custom sizes + +4. **Document in specification:** + ```markdown + ## Typography + - Font: text-base font-semibold + - Color: text-white + - Line Height: leading-normal + - Alignment: text-center + ``` + +### Step 6: Choose Semantic HTML + +Select appropriate HTML elements: + +1. **Read semantic HTML guide:** + ``` + Read references/semantic-html-guide.md + ``` + +2. **Apply semantic rules:** + - **Sections**: `
`, `