diff --git a/use-figma/README.md b/figma/README.md similarity index 95% rename from use-figma/README.md rename to figma/README.md index 0312d8f..89e928c 100644 --- a/use-figma/README.md +++ b/figma/README.md @@ -1,4 +1,4 @@ -# use-figma +# figma Figma design tools for extracting specs and implementing pixel-perfect designs. @@ -24,7 +24,7 @@ Make sure `.env.tools` is in your `.gitignore` — never commit tokens. ### 3. Verify it works ```bash -node use-figma/scripts/whoami.mjs --verbose +node figma/scripts/whoami.mjs --verbose ``` You should see your Figma user info if the token is valid. diff --git a/use-figma/SKILL.md b/figma/SKILL.md similarity index 89% rename from use-figma/SKILL.md rename to figma/SKILL.md index 8ba9f88..da46819 100644 --- a/use-figma/SKILL.md +++ b/figma/SKILL.md @@ -1,5 +1,5 @@ --- -name: use-figma +name: figma description: > Fetch Figma design specs for pixel-perfect implementation. Triggers - Figma URL provided, match the design, implement this Figma, from the mockup, design specs, pixel-perfect, @@ -8,11 +8,11 @@ description: > # Figma Design Tools -This skill ships with Figma helper scripts under `use-figma/scripts/`. +This skill ships with Figma helper scripts under `figma/scripts/`. ## Prerequisites -- Set `FIGMA_ACCESS_TOKEN` in a `.env.tools` file at the project root (see `use-figma/README.md`). +- Set `FIGMA_ACCESS_TOKEN` in a `.env.tools` file at the project root (see `figma/README.md`). - Use the scripts from this skill directory (do not assume a `js/bin` folder). ## When to use this skill @@ -33,21 +33,21 @@ Use when: ```bash # 1. Verify token works - node use-figma/scripts/whoami.mjs --verbose + node figma/scripts/whoami.mjs --verbose # 2. Get layout, spacing, colors, typography - node use-figma/scripts/get-design-context.mjs \ + node figma/scripts/get-design-context.mjs \ --url "https://www.figma.com/design/..." \ --include-images \ --verbose # 3. Get node hierarchy and constraints - node use-figma/scripts/get-metadata.mjs \ + node figma/scripts/get-metadata.mjs \ --url "https://www.figma.com/design/..." \ --verbose # 4. Get a visual screenshot for reference - node use-figma/scripts/get-screenshot.mjs \ + node figma/scripts/get-screenshot.mjs \ --url "https://www.figma.com/design/..." \ --format png \ --scale 2 \ @@ -80,7 +80,7 @@ Use when: ```bash # Check which Figma components are already linked to code - node use-figma/scripts/get-code-connect-map.mjs \ + node figma/scripts/get-code-connect-map.mjs \ --file-key \ --verbose ``` @@ -104,7 +104,7 @@ Use when: ```bash # Get design tokens (colors, spacing, typography variables) -node use-figma/scripts/get-variable-definitions.mjs \ +node figma/scripts/get-variable-definitions.mjs \ --file-key \ --include-styles true \ --verbose diff --git a/use-figma/scripts/get-code-connect-map.mjs b/figma/scripts/get-code-connect-map.mjs similarity index 100% rename from use-figma/scripts/get-code-connect-map.mjs rename to figma/scripts/get-code-connect-map.mjs diff --git a/use-figma/scripts/get-design-context.mjs b/figma/scripts/get-design-context.mjs similarity index 100% rename from use-figma/scripts/get-design-context.mjs rename to figma/scripts/get-design-context.mjs diff --git a/use-figma/scripts/get-metadata.mjs b/figma/scripts/get-metadata.mjs similarity index 100% rename from use-figma/scripts/get-metadata.mjs rename to figma/scripts/get-metadata.mjs diff --git a/use-figma/scripts/get-screenshot.mjs b/figma/scripts/get-screenshot.mjs similarity index 100% rename from use-figma/scripts/get-screenshot.mjs rename to figma/scripts/get-screenshot.mjs diff --git a/use-figma/scripts/get-variable-definitions.mjs b/figma/scripts/get-variable-definitions.mjs similarity index 100% rename from use-figma/scripts/get-variable-definitions.mjs rename to figma/scripts/get-variable-definitions.mjs diff --git a/use-figma/scripts/whoami.mjs b/figma/scripts/whoami.mjs similarity index 100% rename from use-figma/scripts/whoami.mjs rename to figma/scripts/whoami.mjs