@skilly-hand/skilly-hand 0.26.2 → 0.26.4

package/CHANGELOG.md

@@ -16,6 +16,36 @@ All notable changes to this project are documented in this file.
 ### Removed
 - _None._
 
+## [0.26.4] - 2026-05-09
+[View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.26.4)
+
+### Added
+- Added taste-reference extraction guidance to `frontend-design`, with Refero Styles and Impeccable-inspired workflows for turning references into register, visual ingredients, anti-references, and DESIGN.md-ready taste contracts.
+
+### Changed
+- Updated `frontend-design` setup, component design, critique, and refinement routing to apply reference-derived taste rules instead of treating visual direction as vague mood language.
+
+### Fixed
+- _None._
+
+### Removed
+- _None._
+
+## [0.26.3] - 2026-05-09
+[View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.26.3)
+
+### Added
+- _None._
+
+### Changed
+- Updated the `figma-mcp-0to1` skill for current Figma MCP remote-first setup, supported-client coverage, Figma-provided skills, FigJam write workflows, code-to-canvas support, and access/rate-limit guidance.
+
+### Fixed
+- _None._
+
+### Removed
+- _None._
+
 ## [0.26.2] - 2026-05-03
 [View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.26.2)
 

package/catalog/README.md

@@ -8,7 +8,7 @@ Published portable skills consumed by the `skilly-hand` CLI.
 | `agents-root-orchestrator` | Author root AGENTS.md as a Where/What/When orchestrator that routes tasks and skill invocation clearly. | core, workflow, orchestration | all |
 | `angular-guidelines` | Guide Angular code generation, review, and performance tuning using latest stable Angular verification, official Angular skill guidance, and modern framework best practices. Trigger: generating, reviewing, refactoring, or optimizing Angular code artifacts in Angular projects. | angular, frontend, workflow, best-practices | all |
 | `figma-mcp-0to1` | Guide users from Figma MCP installation and authentication through first canvas creation, with function-level tool coverage and operational recovery patterns. | figma, mcp, workflow, design | all |
-| `frontend-design` | Project-aware frontend design skill that detects the existing tech stack, UI libraries, CSS variables, and design tokens before proposing any UI work. Supports greenfield projects via DESIGN.md context setup, post-generation critique, visual refinement, and Motion/GSAP-aware motion polish. | frontend, design, workflow, ui, motion, greenfield | all |
+| `frontend-design` | Project-aware frontend design skill that detects the existing tech stack, UI libraries, CSS variables, and design tokens before proposing any UI work. Supports greenfield projects via DESIGN.md context setup, taste-reference extraction, post-generation critique, visual refinement, and Motion/GSAP-aware motion polish. | frontend, design, workflow, ui, motion, greenfield | all |
 | `gsap-animation` | Guide GSAP animation implementation using only official GSAP documentation and the official greensock/gsap-skills source material. Trigger: implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, JavaScript animation libraries, or advanced UI animation. | frontend, animation, motion, gsap, workflow | all |
 | `motion-animation` | Guide Motion, formerly Framer Motion, animation implementation using only official Motion documentation. Trigger: implementing, reviewing, or choosing Motion for JavaScript animation, React motion components, gestures, scroll animation, layout animation, exit animation, or framework-agnostic UI motion. | frontend, animation, motion, framer-motion, workflow | all |
 | `output-optimizer` | Optimize output token consumption through compact interpreter modes with controlled expansion when complexity, ambiguity, or risk requires more detail. Trigger: minimizing response verbosity while preserving clarity and correctness. | core, workflow, efficiency, communication | all |

package/catalog/skills/figma-mcp-0to1/SKILL.md

@@ -3,10 +3,10 @@ name: "figma-mcp-0to1"
 description: "Guide users from Figma MCP installation and authentication through first canvas creation, with function-level tool coverage and operational recovery patterns."
 skillMetadata:
   author: "skilly-hand"
-  last-edit: "2026-05-01"
+  last-edit: "2026-05-09"
   license: "Apache-2.0"
-  version: "1.0.2"
-  changelog: "Refreshed Figma MCP tools, commands, permissions, Make resources, and agent-support notes against current Figma coverage; improves setup accuracy and 0-to-1 workflow reliability; affects figma-mcp-0to1 docs, references, assets, and metadata"
+  version: "1.0.3"
+  changelog: "Updated Figma MCP guidance for current remote-first docs, supported-client coverage, Figma-provided skills, FigJam write workflows, code-to-canvas support, and access/rate-limit language; affects setup routing, tool selection, prompt assets, and official matrix"
   auto-invoke: "Installing, configuring, or using Figma MCP from setup through first canvas creation"
   allowed-tools:
     - "Read"
@@ -66,13 +66,14 @@ Choose subskills by intent:
 
 ## Core Rules
 
-- Prefer remote server for broadest feature coverage and write workflows.
+- Prefer remote server for broadest feature coverage, write workflows, code-to-canvas, and FigJam agent workflows.
 - Treat official Figma MCP docs as the source of truth for official tools, supported clients, permissions, and limits.
 - Keep client-specific helpers separate from official Figma MCP tools.
 - Treat write actions as staged operations, not a single large operation.
 - Use link-based node targeting for reliable design-context extraction.
 - Keep a clear distinction between read context tools and write/canvas tools.
-- For repeated team workflows, reuse prompts and config snippets from `assets/`.
+- For repeated team workflows, reuse prompts and config snippets from `assets/`, and prefer Figma-provided skills when they exist.
+- Use `figma-use` with `use_figma` for Figma Design writes and `figma-use-figjam` for FigJam writes when those skills are available.
 
 ---
 
@@ -82,9 +83,24 @@ Figma MCP support and skilly-hand installation support are related but not ident
 
 | Coverage | Agents or Clients | Guidance |
 | --- | --- | --- |
-| Figma-supported and skilly-hand-supported | `codex`, `claude`, `cursor`, `copilot` | Include concrete setup paths in this skill. |
-| Figma-supported but not skilly-hand-native | VS Code, Warp, Augment, Factory, Firebender | Mention as Figma-supported clients, but do not add skilly-hand install assumptions. |
-| skilly-hand-supported but not source-backed in current Figma docs | `gemini`, `antigravity`, `windsurf`, `trae` | Keep broad `agentSupport`; document that Figma-specific setup may require client documentation or manual MCP config. |
+| Figma-supported and skilly-hand-supported | `codex`, `claude`, `cursor`, `copilot`, `gemini` | Include concrete setup paths when Figma publishes them; otherwise point to client docs/catalog. |
+| Figma-supported but not skilly-hand-native | Amazon Q, Android Studio, VS Code, Warp, Augment, Factory, Firebender, Kiro, OpenHands, Replit | Mention as Figma-supported clients, but do not add skilly-hand install assumptions. |
+| skilly-hand-supported but not source-backed in current Figma docs | `antigravity`, `windsurf`, `trae` | Keep broad `agentSupport`; document that Figma-specific setup may require client documentation or manual MCP config. |
+
+## Figma-Provided Skills
+
+Prefer Figma-provided skills for workflows they cover:
+
+| Skill | Use |
+| --- | --- |
+| `figma-use` | Foundational Figma Design write-to-canvas workflow for frames, components, variables, styles, and auto layout. |
+| `figma-use-figjam` | Foundational FigJam write workflow for boards, stickies, sections, connectors, shapes, tables, and code blocks. |
+| `figma-create-new-file` | Create blank Figma Design or FigJam files before writing. |
+| `figma-implement-design` | Generate production code from a Figma design URL. |
+| `figma-code-connect-components` | Map published Figma components to code implementations. |
+| `figma-create-design-system-rules` | Generate reusable code-generation rules for a project. |
+| `figma-generate-library` | Example workflow for creating or syncing a Figma design-system library from code. |
+| `figma-generate-design` | Example workflow for building screens/views in Figma from code or a design-system-aware brief. |
 
 ---
 
@@ -117,6 +133,9 @@ claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
 # Cursor plugin setup
 /add-plugin figma
 
+# Gemini CLI
+# Follow the Figma MCP catalog/client instructions for the Gemini CLI extension.
+
 # Verify catalog integrity in this repository
 npm run catalog:check
 ```

package/catalog/skills/figma-mcp-0to1/agents/canvas-creation-playbook.md

@@ -26,7 +26,8 @@ Deliver a first successful Figma canvas result with low risk and clear verificat
 - Create one frame.
 - Add one text node.
 - Apply one style/token decision.
-- For FigJam, create or update one small board object such as a sticky, section, connector, or shape.
+- For Figma Design, load or invoke `figma-use` when available.
+- For FigJam, load or invoke `figma-use-figjam` when available, then create or update one small board object such as a sticky, section, connector, shape, table, or code block.
 
 5. **Validate state**
 - Inspect with `get_metadata` or `get_screenshot`.
@@ -44,6 +45,12 @@ Deliver a first successful Figma canvas result with low risk and clear verificat
 2. Let `generate_diagram` create a new FigJam file, or provide an existing FigJam file key.
 3. Validate diagram structure and labels.
 
+### FigJam board-first flow
+
+1. Create or choose a FigJam file, using `create_new_file figjam <name>` if a fresh board is needed.
+2. Use `figma-use-figjam` with `use_figma` for small write steps.
+3. Validate with `get_figjam` or `get_screenshot`.
+
 ### Code-to-canvas flow
 
 1. Ask client to start local app capture workflow.

package/catalog/skills/figma-mcp-0to1/agents/install-auth.md

@@ -8,8 +8,8 @@ Get Figma MCP connected and authenticated, with a verified first tool call.
 
 | Mode | Endpoint | Recommended | Notes |
 | --- | --- | --- | --- |
-| Remote | `https://mcp.figma.com/mcp` | Yes | Broadest feature coverage, including write-to-canvas, code-to-canvas, diagrams, and file creation. |
-| Desktop | `http://127.0.0.1:3845/mcp` | Only for local selection-based or special org needs | Requires Figma desktop app + Dev Mode desktop MCP toggle; narrower workflow coverage. |
+| Remote | `https://mcp.figma.com/mcp` | Yes | Broadest feature coverage, including write-to-canvas, code-to-canvas, FigJam workflows, diagrams, and file creation. Remote access is documented for all seats/plans, with plan/seat-based limits. |
+| Desktop | `http://127.0.0.1:3845/mcp` | Only for local selection-based or special org/enterprise needs | Requires Figma desktop app + Dev Mode desktop MCP toggle; narrower workflow coverage and paid Dev/Full seat access. |
 
 ## Codex Setup
 
@@ -37,6 +37,7 @@ Use concrete setup paths for agents that are both Figma-supported and skilly-han
 - Cursor plugin: `/add-plugin figma`
 - Cursor manual: add the remote or desktop endpoint in MCP settings.
 - Copilot: use the VS Code MCP route and enable GitHub Copilot in the client.
+- Gemini CLI: follow the Figma MCP catalog/client instructions for the Gemini CLI extension.
 - VS Code: add HTTP MCP server in `mcp.json` using the remote endpoint.
 
 See exact snippets in [../assets/client-config-snippets.md](../assets/client-config-snippets.md).
@@ -45,9 +46,9 @@ See exact snippets in [../assets/client-config-snippets.md](../assets/client-con
 
 | Coverage | Agents or Clients | Guidance |
 | --- | --- | --- |
-| Figma-supported and skilly-hand-supported | `codex`, `claude`, `cursor`, `copilot` | Use the commands and setup paths above. |
-| Figma-supported but not skilly-hand-native | VS Code, Warp, Augment, Factory, Firebender | Follow Figma/client setup docs; do not assume skilly-hand skill install paths. |
-| skilly-hand-supported but not source-backed in current Figma docs | `gemini`, `antigravity`, `windsurf`, `trae` | Keep install support, but verify Figma MCP setup through that client's docs or manual MCP config. |
+| Figma-supported and skilly-hand-supported | `codex`, `claude`, `cursor`, `copilot`, `gemini` | Use the commands and setup paths above where documented; otherwise follow the Figma MCP catalog/client docs. |
+| Figma-supported but not skilly-hand-native | Amazon Q, Android Studio, VS Code, Warp, Augment, Factory, Firebender, Kiro, OpenHands, Replit | Follow Figma/client setup docs; do not assume skilly-hand skill install paths. |
+| skilly-hand-supported but not source-backed in current Figma docs | `antigravity`, `windsurf`, `trae` | Keep install support, but verify Figma MCP setup through that client's docs or manual MCP config. |
 
 ## Verification Checklist
 
@@ -57,6 +58,7 @@ See exact snippets in [../assets/client-config-snippets.md](../assets/client-con
 - Desktop-only contexts: `get_metadata` or `get_design_context` on a known node
 3. Confirm the authenticated user has access to the target Figma file.
 4. For write workflows, confirm the authenticated seat can edit the target file.
+5. For Dev seats, confirm the target is a draft or that the workflow does not require edit access outside drafts.
 
 ## First Prompt After Setup
 

package/catalog/skills/figma-mcp-0to1/agents/tool-function-catalog.md

@@ -7,7 +7,7 @@ Pick the smallest correct Figma MCP function for the task, with predictable inpu
 ## Start Here
 
 1. Read [../references/official-tools-matrix.md](../references/official-tools-matrix.md).
-2. Identify whether task is read, write, design-system search, code-connect, diagram, live UI capture, or Make resource context.
+2. Identify whether task is read, write, FigJam, design-system search, code-connect, diagram, live UI capture, or Make resource context.
 3. Prefer read-first calls before write calls on unknown files.
 
 ## Selection Rules
@@ -18,9 +18,11 @@ Pick the smallest correct Figma MCP function for the task, with predictable inpu
 - Need variables/tokens only: `get_variable_defs`.
 - Need visual reference: `get_screenshot`.
 - Need FigJam extraction: `get_figjam`.
+- Need FigJam creation/editing: `use_figma` with the `figma-use-figjam` skill when available.
 - Need library discovery in Codex before a scoped search: `get_libraries` if the Codex Figma plugin exposes it.
 - Need design-system discovery before creating: `search_design_system`.
-- Need to write/create/update Figma Design or FigJam content: `use_figma` (remote write workflow; use `figma-use` skill when available).
+- Need to write/create/update Figma Design content: `use_figma` (remote write workflow; use `figma-use` skill when available).
+- Need to write/create/update FigJam content: `use_figma` (remote write workflow; use `figma-use-figjam` skill when available).
 - Need first-time live web UI capture: `generate_figma_design`.
 - Need new blank file: `create_new_file` (requires plan/team context such as `planKey` in some clients).
 - Need Mermaid-to-FigJam: `generate_diagram` (creates its own FigJam file unless an existing FigJam file key is provided).
@@ -35,6 +37,7 @@ Use direct tool-trigger language when selection is ambiguous:
 - "Use Figma MCP `search_design_system` before creating any new component."
 - "Use Figma MCP `generate_figma_design` to capture this live web UI to a new Figma file."
 - "Use Figma MCP `create_new_file`, then `use_figma` to add a first frame and typography style."
+- "Use `figma-use-figjam` with `use_figma` to organize this FigJam board into sections and connectors."
 - "Use MCP resources from this Figma Make link and fetch only the files needed for implementation."
 
 ## Remote/Desktop Caveats

package/catalog/skills/figma-mcp-0to1/agents/troubleshooting-ops.md

@@ -33,6 +33,7 @@ Failure observed?
 1. Validate Figma URL format and node id.
 2. Run `whoami` to verify authenticated account.
 3. Confirm authenticated user belongs to correct plan and has file access.
+4. For write-to-canvas, confirm the user has edit access; Dev seats are read-only outside drafts.
 
 ### Rate limiting
 
@@ -41,6 +42,7 @@ Failure observed?
 - Dev/Full seats on Professional or Organization plans have higher daily usage.
 - Enterprise Dev/Full seats have the highest documented daily usage.
 - Officially documented exempt tools include `add_code_connect_map`, `generate_figma_design`, and `whoami`.
+- `use_figma` write tools may be documented outside standard read limits, but still require correct seat and edit permissions.
 - Use smaller selections and fewer repeated reads.
 - Prefer `get_metadata` preflight before broad `get_design_context`.
 - Batch intent into fewer, targeted calls.
@@ -58,6 +60,12 @@ Failure observed?
 - Verify partial outcomes using read tools before next step.
 - For `create_new_file`, ensure a plan/team context is available.
 - For `generate_diagram`, do not pre-create a blank FigJam file unless adding to an existing file is the explicit goal.
+- For FigJam writes, use `figma-use-figjam` guidance where available instead of generic Figma Design assumptions.
+
+### Expired image URLs
+
+- Figma-hosted image URLs returned by MCP can expire.
+- Refresh the design context to get new URLs, or download/save assets into the project and reference local files for durable implementation.
 
 ## Scoped Retry Pattern
 

package/catalog/skills/figma-mcp-0to1/assets/client-config-snippets.md

@@ -90,6 +90,10 @@ claude mcp list
 /add-plugin figma
 ```
 
+## Gemini CLI
+
+Use the Figma MCP catalog/client instructions for the Gemini CLI extension. Figma currently lists Gemini CLI as a supported client for remote and desktop setup.
+
 ## Cursor MCP config (desktop)
 
 ```json
@@ -117,5 +121,6 @@ claude mcp list
 ## Agent Coverage Notes
 
 - Figma-supported and skilly-hand-supported: `codex`, `claude`, `cursor`, `copilot`.
-- Figma-supported but not skilly-hand-native: VS Code, Warp, Augment, Factory, Firebender.
-- skilly-hand-supported but not source-backed in current Figma docs: `gemini`, `antigravity`, `windsurf`, `trae`.
+- Figma-supported and skilly-hand-supported via client docs/catalog: `gemini`.
+- Figma-supported but not skilly-hand-native: Amazon Q, Android Studio, VS Code, Warp, Augment, Factory, Firebender, Kiro, OpenHands, Replit.
+- skilly-hand-supported but not source-backed in current Figma docs: `antigravity`, `windsurf`, `trae`.

package/catalog/skills/figma-mcp-0to1/assets/prompt-recipes.md

@@ -5,6 +5,7 @@
 - "Set up Figma MCP remote server and verify with `whoami`."
 - "Use Figma MCP `whoami` and tell me which account and plans are active."
 - "Check whether this client exposes the Figma MCP tools I need before starting."
+- "Check whether my client has the Figma-provided skills installed before starting a write-to-canvas workflow."
 
 ## Read Context
 
@@ -22,12 +23,14 @@
 - "Use `get_code_connect_map` for this node and show mapped source locations."
 - "Use `add_code_connect_map` to map this Figma node to my component path."
 - "Use `get_code_connect_suggestions`, then confirm mappings with `send_code_connect_mappings` if the suggestions are correct."
+- "Use `figma-create-design-system-rules` to generate project rules before implementing designs from Figma."
 
 ## First Canvas Creation
 
 - "Use `whoami` to choose the right plan, then use `create_new_file` to create a new design file named 'MCP First Canvas'."
 - "Use `create_new_file` to create a new design file named 'MCP First Canvas'."
 - "Use `use_figma` to create one frame, add one title text layer, and apply auto layout spacing."
+- "Use `figma-use` with `use_figma` for a small Figma Design write, then validate with a screenshot."
 - "After the write, use `get_screenshot` to verify the result."
 - "Before writing, inspect the file and use `search_design_system` for existing components or variables."
 
@@ -40,11 +43,20 @@
 ## FigJam Flows
 
 - "Use `create_new_file` to create a new FigJam board for architecture planning."
+- "Use `figma-create-new-file figjam 'Architecture Planning'` to create a new FigJam board."
 - "Use `generate_diagram` to create a sequence diagram for login and checkout flow."
 - "Use `generate_diagram` to add an ERD to this existing FigJam file."
-- "Use `use_figma` to organize this FigJam board into sections with stickies and connectors."
+- "Use `figma-use-figjam` with `use_figma` to organize this FigJam board into sections with stickies and connectors."
 - "Use `use_figma` to update this architecture diagram with a new service."
 
+## Figma Skills
+
+- "Use `figma-use` for this Figma Design write-to-canvas task."
+- "Use `figma-use-figjam` for this FigJam board update."
+- "Use `figma-generate-design` to build this app screen in Figma using the connected design system."
+- "Use `figma-generate-library` to create or sync a Figma design-system library from this codebase."
+- "Use `figma-implement-design` to turn this Figma frame URL into production code."
+
 ## Agent Coverage
 
 - "For this agent, tell me whether Figma officially supports its MCP setup path and which command/config I should use."
@@ -56,3 +68,4 @@
 - "I am rate-limited. Switch to a staged workflow with fewer `get_design_context` calls."
 - "This client does not expose `get_screenshot`. Choose the closest supported verification path."
 - "My `create_new_file` call failed. Check whether a plan key or team context is missing."
+- "Images from the MCP response expired. Refresh the design context or save the assets locally."

package/catalog/skills/figma-mcp-0to1/manifest.json

@@ -10,10 +10,10 @@
   "agentSupport": ["codex", "claude", "cursor", "gemini", "copilot", "antigravity", "windsurf", "trae"],
   "skillMetadata": {
     "author": "skilly-hand",
-    "last-edit": "2026-05-01",
+    "last-edit": "2026-05-09",
     "license": "Apache-2.0",
-    "version": "1.0.2",
-    "changelog": "Refreshed Figma MCP tools, commands, permissions, Make resources, and agent-support notes against current Figma coverage; improves setup accuracy and 0-to-1 workflow reliability; affects figma-mcp-0to1 docs, references, assets, and metadata",
+    "version": "1.0.3",
+    "changelog": "Updated Figma MCP guidance for current remote-first docs, supported-client coverage, Figma-provided skills, FigJam write workflows, code-to-canvas support, and access/rate-limit language; affects setup routing, tool selection, prompt assets, and official matrix",
     "auto-invoke": "Installing, configuring, or using Figma MCP from setup through first canvas creation",
     "allowed-modes": [
       "install-auth",

package/catalog/skills/figma-mcp-0to1/references/official-tools-matrix.md

@@ -1,4 +1,4 @@
-# Official Figma MCP Tools Matrix (As of 2026-05-01)
+# Official Figma MCP Tools Matrix (As of 2026-05-09)
 
 This matrix tracks the official Figma MCP tool/function set in current Figma documentation. Treat it as the source of truth for official tool names, supported file types, and remote-only status. Client-specific helpers are listed separately.
 
@@ -19,7 +19,7 @@ This matrix tracks the official Figma MCP tool/function set in current Figma doc
 | `whoami` | Show authenticated Figma identity, plans, and seat types | None | No file context required | Remote-only in official docs; exempt from read rate limits. |
 | `get_code_connect_suggestions` | Suggest candidate node-to-code mappings | File context + repo context | Figma Design | Usually part of Code Connect workflows. |
 | `send_code_connect_mappings` | Confirm/persist mapping suggestions | Suggestions payload | Figma Design | Follow-up action after suggestion generation. |
-| `use_figma` | General-purpose write/edit/delete/inspect via Plugin API workflow | Task instructions and file context | Figma Design, FigJam | Remote-only; default direct write/update path; best used with the `figma-use` skill when available. |
+| `use_figma` | General-purpose write/edit/delete/inspect via Plugin API workflow | Task instructions and file context | Figma Design, FigJam | Remote-only; default direct write/update path; use `figma-use` for Figma Design and `figma-use-figjam` for FigJam when available. |
 | `search_design_system` | Search libraries for components, variables, styles | Query text and optional type narrowing | Figma Design | Remote-only; use before creating new artifacts when design-system reuse is relevant. |
 | `create_new_file` | Create new blank Design or FigJam file | File name, file type, plan context | No file context required | Remote-only; creates files in drafts or a project; requires plan/team context in some clients. |
 
@@ -27,6 +27,21 @@ This matrix tracks the official Figma MCP tool/function set in current Figma doc
 
 Figma Make project context is exposed through MCP resources on clients that support MCP resources. Use a valid Figma Make link, let the client list available project files, and fetch only the files needed for the implementation task.
 
+## Figma-Provided Skills
+
+Figma documents these skills as the preferred guidance layer for common MCP workflows:
+
+| Skill | Purpose |
+| --- | --- |
+| `figma-use` | Foundational Figma Design write-to-canvas workflow. |
+| `figma-use-figjam` | Foundational FigJam write workflow. |
+| `figma-code-connect-components` | Connect published Figma components to code implementations. |
+| `figma-create-design-system-rules` | Generate project rules for design-to-code workflows. |
+| `figma-create-new-file` | Create blank Design or FigJam files. |
+| `figma-implement-design` | Translate a Figma design URL into production code. |
+| `figma-generate-library` | Example workflow for generating or syncing a design-system library. |
+| `figma-generate-design` | Example workflow for building screens/views from a design system. |
+
 ## Codex Plugin Helpers
 
 The Codex Figma plugin may expose helper tools beyond the current official tools page. Keep these documented as client-specific helpers:
@@ -41,16 +56,19 @@ Some official Figma MCP tools may not be exposed by every client plugin surface.
 
 | Coverage | Agents or Clients | Guidance |
 | --- | --- | --- |
-| Figma-supported and skilly-hand-supported | `codex`, `claude`, `cursor`, `copilot` | Include concrete setup paths and prompts in this skill. |
-| Figma-supported but not skilly-hand-native | VS Code, Warp, Augment, Factory, Firebender | Mention as Figma-supported clients; do not add skilly-hand install assumptions. |
-| skilly-hand-supported but not source-backed in current Figma docs | `gemini`, `antigravity`, `windsurf`, `trae` | Keep broad install support; advise manual MCP/client docs for Figma-specific setup. |
+| Figma-supported and skilly-hand-supported | `codex`, `claude`, `cursor`, `copilot`, `gemini` | Include concrete setup paths where documented; otherwise point to the Figma MCP catalog/client docs. |
+| Figma-supported but not skilly-hand-native | Amazon Q, Android Studio, VS Code, Warp, Augment, Factory, Firebender, Kiro, OpenHands, Replit | Mention as Figma-supported clients; do not add skilly-hand install assumptions. |
+| skilly-hand-supported but not source-backed in current Figma docs | `antigravity`, `windsurf`, `trae` | Keep broad install support; advise manual MCP/client docs for Figma-specific setup. |
 
 ## Rate-Limit Notes (Official)
 
 - Read tools are subject to seat/plan limits and per-minute limits.
+- Remote server access is documented for all seats/plans, but practical usage is governed by seat/plan limits.
+- Desktop server access is documented for Dev or Full seats on paid plans.
 - Starter plan or View/Collab seats: up to 6 tool calls per month.
 - Professional or Organization with Dev/Full seat: up to 200 tool calls per day.
 - Enterprise with Dev/Full seat: up to 600 tool calls per day.
+- Dev seats only have read-only access outside drafts for write-to-canvas workflows.
 - Officially documented exempt tools include:
 - `add_code_connect_map`
 - `generate_figma_design`
@@ -65,6 +83,7 @@ Some official Figma MCP tools may not be exposed by every client plugin surface.
 5. Use `use_figma` for direct Figma Design or FigJam writes and updates.
 6. Keep `use_figma` calls small and validate after each step.
 7. Use `get_screenshot` as final visual verification after edits when available.
+8. Use `figma-use-figjam` rather than Figma Design assumptions for FigJam board edits.
 
 ## Sources
 
@@ -77,3 +96,4 @@ Some official Figma MCP tools may not be exposed by every client plugin surface.
 - https://developers.figma.com/docs/figma-mcp-server/bringing-make-context-to-your-agent/
 - https://developers.figma.com/docs/figma-mcp-server/plans-access-and-permissions/
 - https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server
+- https://help.figma.com/hc/en-us/articles/39166810751895-Figma-skills-for-MCP

package/catalog/skills/frontend-design/SKILL.md

@@ -1,12 +1,12 @@
 ---
 name: "frontend-design"
-description: "Project-aware frontend design skill that detects the existing tech stack, UI libraries, CSS variables, and design tokens before proposing any UI work. Supports greenfield projects via DESIGN.md context setup, post-generation critique, visual refinement, and Motion/GSAP-aware motion polish."
+description: "Project-aware frontend design skill that detects the existing tech stack, UI libraries, CSS variables, and design tokens before proposing any UI work. Supports greenfield projects via DESIGN.md context setup, taste-reference extraction, post-generation critique, visual refinement, and Motion/GSAP-aware motion polish."
 skillMetadata:
   author: "skilly-hand"
-  last-edit: "2026-05-03"
+  last-edit: "2026-05-09"
   license: "Apache-2.0"
-  version: "1.4.0"
-  changelog: "Added Motion-aware routing through motion-animation alongside gsap-animation; improves animation handoffs for Motion-native JavaScript and React projects; affects frontend-design motion sequencing, metadata, and catalog dependencies"
+  version: "1.5.0"
+  changelog: "Added taste-reference extraction guidance sourced from Refero Styles and Impeccable; improves how agents translate visual references, anti-references, and register into DESIGN.md-ready language; affects greenfield design setup, critique, refinement, and resource routing"
   auto-invoke: "Designing or generating UI components, pages, or layouts in a web or mobile project; setting up visual direction for a greenfield project; critiquing generated UI for AI slop; adding motion or micro-interactions to existing UI; refining or polishing generated UI output"
   allowed-tools:
     - "Read"
@@ -59,11 +59,12 @@ Always run stack detection first. Never skip to design.
 2. **Check for DESIGN.md** — if it exists, read it before any design work. If it does not exist and the project has no existing components to sample, run `design-context-setter` to create it.
 3. **Present findings to the user** — surface the detected stack and any DESIGN.md context clearly, then ask for explicit confirmation.
 4. **If anything is unclear or ambiguous, ask** — do not proceed with partial or uncertain information.
-5. **Scan existing tokens and components** — read what already exists before proposing anything.
-6. **Design with confirmed context only** — hand off to `component-designer` only after steps 2–4 are complete.
-7. **Critique after generation** — invoke `critique` for a frontend-only challenge pass before polish.
-8. **Refine from critique** — invoke `visual-refiner` for visual fixes routed by critique.
-9. **Optionally add motion** — invoke `motion-designer` if critique, refinement, or the user identifies a motion need. Route Motion-native JavaScript/React animation through `motion-animation`; route GSAP timelines, ScrollTrigger, and plugin decisions through `gsap-animation`.
+5. **Extract taste from references** — when the user provides visual references or asks for stronger taste, use [assets/taste-reference-extraction.md](assets/taste-reference-extraction.md) to translate examples into concrete design language, anti-references, and register.
+6. **Scan existing tokens and components** — read what already exists before proposing anything.
+7. **Design with confirmed context only** — hand off to `component-designer` only after steps 2–5 are complete.
+8. **Critique after generation** — invoke `critique` for a frontend-only challenge pass before polish.
+9. **Refine from critique** — invoke `visual-refiner` for visual fixes routed by critique.
+10. **Optionally add motion** — invoke `motion-designer` if critique, refinement, or the user identifies a motion need. Route Motion-native JavaScript/React animation through `motion-animation`; route GSAP timelines, ScrollTrigger, and plugin decisions through `gsap-animation`.
 
 ---
 
@@ -136,6 +137,17 @@ Every new component or style must feel like it was written by the same team that
 
 If no existing components are found, use `DESIGN.md` as the visual language reference. If neither exists, run `design-context-setter` before proceeding.
 
+### Pattern 5: Explain Taste as Observable Decisions
+
+When the user provides references, do not summarize them as vibes. Convert each reference into visible, buildable decisions:
+
+- **Register:** brand surface where design is the product, or product surface where design serves repeated use.
+- **Visual ingredients:** type contrast, color role, spacing rhythm, density, radius, elevation, imagery, component shape, and motion character.
+- **Taste rules:** what to repeat, what to avoid, and what would make the design feel off-brand.
+- **Anti-references:** common AI reflexes the project should reject.
+
+Use [assets/taste-reference-extraction.md](assets/taste-reference-extraction.md) for the extraction workflow. Its source model combines Refero Styles' reference-search framing with Impeccable's design vocabulary, register split, and anti-slop detection.
+
 ---
 
 ## What Not To Do
@@ -290,3 +302,4 @@ find src/components -maxdepth 2 -name "*.tsx" -o -name "*.vue" | head -10
 - Motion and micro-interactions: [agents/motion-designer.md](agents/motion-designer.md)
 - Full scan checklist: [assets/stack-scan-checklist.md](assets/stack-scan-checklist.md)
 - Aesthetic archetypes reference: [assets/aesthetic-archetypes.md](assets/aesthetic-archetypes.md)
+- Taste reference extraction: [assets/taste-reference-extraction.md](assets/taste-reference-extraction.md)

package/catalog/skills/frontend-design/agents/component-designer.md

@@ -53,6 +53,7 @@ These apply within the constraints of the confirmed stack — they guide choices
 - One clear visual focus per component — the most important element should be unmistakable.
 - Avoid equal-weight elements. If everything is emphasized, nothing is.
 - When `DESIGN.md` defines a motion character, let it inform transition presence even at this stage — flag it for `motion-designer` rather than omitting it entirely.
+- If `DESIGN.md` includes visual references or anti-references, translate them through [../assets/taste-reference-extraction.md](../assets/taste-reference-extraction.md): borrow observable decisions, not full layouts.
 
 ---
 

package/catalog/skills/frontend-design/agents/critique.md

@@ -12,6 +12,7 @@ Before critiquing:
 2. Read `DESIGN.md` if it exists.
 3. Inspect the generated/proposed UI source and, when available, the rendered page.
 4. Compare against sampled project components, tokens, and interaction patterns.
+5. If `DESIGN.md` includes references or anti-references, evaluate against the taste rules from [../assets/taste-reference-extraction.md](../assets/taste-reference-extraction.md), not just generic taste.
 
 Do not use this agent when:
 
@@ -65,6 +66,8 @@ Check whether the UI serves the actual product context.
 - Brand: Does it follow `DESIGN.md` personality and anti-references?
 - Mode: Is this a brand surface where design is the product, or a product surface where design serves repeated use?
 - Distinction: Would this still be recognizable if the logo and copy were removed?
+- Reference translation: Did the UI borrow concrete ingredients from the references, or did it imitate a superficial mood?
+- Anti-reference compliance: Did any explicitly rejected pattern slip back in?
 
 ### Pass 3 - Nielsen Heuristics
 

package/catalog/skills/frontend-design/agents/design-context-setter.md

@@ -6,6 +6,8 @@ Gather the project's design intent once, then write it to `DESIGN.md` at the pro
 
 This agent is modeled on how modern AI-first design platforms (Stitch, v0, Galileo) treat a persistent design brief — a short, always-available document that anchors every generation.
 
+When the user provides references, use the extraction workflow in [../assets/taste-reference-extraction.md](../assets/taste-reference-extraction.md) before drafting the aesthetic direction. It converts reference sites, brands, moods, and anti-references into concrete language the rest of the skill can apply.
+
 ---
 
 ## When to Use
@@ -59,10 +61,20 @@ Ask these questions one at a time. Do not front-load the full list.
 **4. Are there any visual references?**
 "Any products, sites, or brands whose aesthetic this should feel close to? (Optional — skip if none.)"
 
-**5. What's the accessibility baseline?**
+If the user provides references, extract them into:
+
+- what to borrow;
+- what to avoid;
+- whether the target is brand or product register;
+- the visible ingredients that define the taste.
+
+**5. Any anti-references?**
+"Are there products, sites, or AI-looking patterns this should explicitly avoid? Examples: purple gradients, glassmorphism, nested cards, generic centered hero layouts."
+
+**6. What's the accessibility baseline?**
 "Should we target WCAG 2.2 Level AA (standard), AAA (enhanced), or is there a specific requirement? Default is AA."
 
-**6. Any hard constraints?**
+**7. Any hard constraints?**
 "Are there colors, fonts, or patterns that must be used or must be avoided? (brand guidelines, corporate requirements, legal restrictions)"
 
 After collecting answers, propose a brief aesthetic direction and ask for confirmation before writing the file.
@@ -89,6 +101,7 @@ Write the following structure to `DESIGN.md` at the project root. Every field mu
 
 **Adjectives:** [3 adjectives from user]
 **Visual references:** [references, or "none specified"]
+**Anti-references:** [visual patterns or references to avoid, or "none specified"]
 
 ## Aesthetic Direction
 

package/catalog/skills/frontend-design/agents/visual-refiner.md

@@ -35,6 +35,8 @@ Run all four checks. Do not skip any. Report findings grouped by check — do no
 
 Look for generic patterns that signal uncontextualized AI output. Flag each one found.
 
+If `DESIGN.md` includes visual references or anti-references, run the reference taste check in [../assets/taste-reference-extraction.md](../assets/taste-reference-extraction.md) first. A design can be clean and still fail if it ignores the intended register, borrows the wrong ingredient from a reference, or drifts into an explicit anti-reference.
+
 **Visual tells to catch:**
 
 - Glassmorphism (backdrop-filter: blur + semi-transparent backgrounds with no established project precedent)
@@ -45,6 +47,8 @@ Look for generic patterns that signal uncontextualized AI output. Flag each one
 - Gradient text (`background-clip: text`) used decoratively without project precedent
 - Icon + title + description card grids as default empty-state filler
 - Identical padding and border-radius across every element (uniform blandness)
+- Product UI treated like a marketing page, or brand/landing work flattened into utilitarian dashboard language
+- Reference mimicry that copies a layout while missing its real taste ingredients
 
 For each flag: name the pattern, show the line, and suggest a project-derived alternative.
 

package/catalog/skills/frontend-design/assets/taste-reference-extraction.md

@@ -0,0 +1,161 @@
+# Taste Reference Extraction
+
+Use this when a user provides visual references, asks for better taste, or wants the agent to explain a design direction in language another AI can reliably apply.
+
+This workflow is informed by two public reference systems:
+
+- Refero Styles: https://styles.refero.design/
+- Impeccable: https://impeccable.style/
+
+Refero's useful pattern is searchable real-product reference extraction: brand, mood, color, typography, URL, spacing, components, and DESIGN.md-ready output. Impeccable's useful pattern is shared design vocabulary: product-vs-brand register, anti-references, command-like refinement dimensions, and deterministic anti-slop checks.
+
+Do not copy either source's site language into project briefs. Use them as a model for how to structure taste into observable decisions.
+
+---
+
+## When to Use
+
+Use this asset when:
+
+- The user names sites, products, brands, moods, or URLs as references.
+- `DESIGN.md` needs stronger language than vague adjectives.
+- A generated UI feels generic but the fix is not obvious from tokens alone.
+- The user asks to make something feel more premium, editorial, playful, precise, calm, technical, or distinctive.
+
+Do not use it to override existing project tokens, accessibility requirements, or explicit user constraints.
+
+---
+
+## Extraction Ladder
+
+Move from vague taste to buildable decisions in this order.
+
+### 1. Register
+
+Classify the surface before choosing visual moves.
+
+| Register | Design Role | Good Taste Looks Like |
+| --- | --- | --- |
+| Brand | Design is the product: landing pages, launches, portfolios, editorial, venues, campaigns | Distinctive imagery, stronger type voice, memorable composition, carefully chosen drama |
+| Product | Design serves repeated work: dashboards, tools, CRM, admin, commerce flows | Fast scanning, durable hierarchy, predictable controls, restrained styling, task-first density |
+| Hybrid | Brand expression wraps a functional flow: onboarding, pricing, checkout, product-led homepage | Brand moments at entry points; product clarity at decision and action points |
+
+Write the register into `DESIGN.md` when it is known.
+
+### 2. Reference Inventory
+
+For each reference, extract the visible ingredients:
+
+```text
+Reference:
+Role: close model / partial ingredient / anti-reference
+Register: brand / product / hybrid
+Borrow:
+- Typography:
+- Color:
+- Spacing and density:
+- Layout structure:
+- Component shape:
+- Imagery or texture:
+- Motion:
+Avoid:
+- Surface-level mimicry:
+- Patterns that would not fit this product:
+```
+
+If the user provides only a mood, ask for one concrete reference or translate the mood into likely ingredients and mark them as assumptions.
+
+### 3. Taste Rules
+
+Convert references into rules the implementation can check.
+
+Good taste rules are concrete:
+
+- "Use color as state and emphasis, not as section decoration."
+- "Favor one strong typographic contrast over multiple decorative containers."
+- "Keep dashboard panels dense and flat; reserve depth for dialogs and active overlays."
+- "Use asymmetry in hero composition, but keep form controls conventional."
+
+Weak taste rules are vague:
+
+- "Make it premium."
+- "Use modern design."
+- "Make it clean."
+- "Add personality."
+
+### 4. Anti-References
+
+Name what must not happen. Anti-references prevent the model from falling back to common AI reflexes.
+
+Capture:
+
+- explicit sites or products to avoid;
+- visual tropes to reject;
+- category cliches to resist;
+- font, palette, layout, or motion reflexes that would make the output generic.
+
+Common anti-reference language:
+
+- no purple-to-blue gradients unless already in the brand system;
+- no glass cards, glow borders, or blurred background blobs as decoration;
+- no nested card stacks for page sections;
+- no icon-tile feature grid as the default explanation pattern;
+- no centered hero plus metrics unless the product actually needs that story;
+- no monospace as shorthand for technical credibility;
+- no motion that does not communicate state, cause, or hierarchy.
+
+### 5. Taste Contract
+
+End with a short contract that can be pasted into `DESIGN.md` or a task prompt.
+
+```markdown
+## Taste Contract
+
+**Register:** [brand/product/hybrid]
+**Reference role:** [what each reference contributes]
+**Borrow:** [3-5 concrete ingredients]
+**Avoid:** [3-5 anti-references]
+**Hierarchy:** [how attention should move]
+**Density:** [sparse, balanced, dense, or context-specific]
+**Color role:** [brand, state, emphasis, data, or restraint]
+**Typography role:** [voice, clarity, editorial contrast, utility]
+**Motion role:** [none, state feedback, spatial continuity, delight]
+**Failure mode:** [what would make this feel generic or wrong]
+```
+
+---
+
+## Reference Use Rules
+
+- Borrow decisions, not whole layouts.
+- Prefer real product evidence over mood words.
+- Keep brand and product registers separate; do not critique one by the other.
+- When references conflict, decide which ingredient each one owns.
+- Let anti-references constrain reflexes before choosing new decoration.
+- Translate every aesthetic claim into at least one implementation lever: type, color, spacing, density, shape, imagery, motion, or copy voice.
+- Do not introduce new tokens without stack confirmation and user approval.
+
+---
+
+## Example
+
+```text
+User says: "Make it feel like Linear and Apple, but not another dark SaaS dashboard."
+
+Register: product
+Reference roles:
+- Linear: density, command-center clarity, restrained dark surfaces
+- Apple: precision, generous detail spacing, high trust, fewer competing borders
+Borrow:
+- crisp text hierarchy with clear primary action
+- muted surfaces with state-driven accent color
+- shallow depth and precise separators instead of card stacks
+- dense tables, but roomy detail panes
+Avoid:
+- neon-on-dark glow effects
+- purple gradients
+- giant centered hero metrics
+- generic rounded cards around every group
+Failure mode:
+- looking like a launch page instead of a work surface
+```

package/catalog/skills/frontend-design/manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "frontend-design",
   "title": "Frontend Design",
-  "description": "Project-aware frontend design skill that detects the existing tech stack, UI libraries, CSS variables, and design tokens before proposing any UI work. Supports greenfield projects via DESIGN.md context setup, post-generation critique, visual refinement, and Motion/GSAP-aware motion polish.",
+  "description": "Project-aware frontend design skill that detects the existing tech stack, UI libraries, CSS variables, and design tokens before proposing any UI work. Supports greenfield projects via DESIGN.md context setup, taste-reference extraction, post-generation critique, visual refinement, and Motion/GSAP-aware motion polish.",
   "portable": true,
   "tags": ["frontend", "design", "workflow", "ui", "motion", "greenfield"],
   "detectors": ["always"],
@@ -10,10 +10,10 @@
   "agentSupport": ["codex", "claude", "cursor", "gemini", "copilot", "antigravity", "windsurf", "trae"],
   "skillMetadata": {
     "author": "skilly-hand",
-    "last-edit": "2026-05-03",
+    "last-edit": "2026-05-09",
     "license": "Apache-2.0",
-    "version": "1.4.0",
-    "changelog": "Added Motion-aware routing through motion-animation alongside gsap-animation; improves animation handoffs for Motion-native JavaScript and React projects; affects frontend-design motion sequencing, metadata, and catalog dependencies",
+    "version": "1.5.0",
+    "changelog": "Added taste-reference extraction guidance sourced from Refero Styles and Impeccable; improves how agents translate visual references, anti-references, and register into DESIGN.md-ready language; affects greenfield design setup, critique, refinement, and resource routing",
     "auto-invoke": "Designing or generating UI components, pages, or layouts in a web or mobile project; setting up visual direction for a greenfield project; critiquing generated UI for AI slop; adding motion or micro-interactions to existing UI; refining or polishing generated UI output",
     "allowed-modes": [
       "stack-detector",
@@ -34,7 +34,8 @@
     { "path": "agents/visual-refiner.md", "kind": "asset" },
     { "path": "agents/motion-designer.md", "kind": "asset" },
     { "path": "assets/stack-scan-checklist.md", "kind": "asset" },
-    { "path": "assets/aesthetic-archetypes.md", "kind": "asset" }
+    { "path": "assets/aesthetic-archetypes.md", "kind": "asset" },
+    { "path": "assets/taste-reference-extraction.md", "kind": "asset" }
   ],
   "dependencies": ["motion-animation", "gsap-animation"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/skilly-hand",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "repository": {

package/packages/catalog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/catalog",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "private": true,
   "type": "module"
 }

package/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/cli",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "private": true,
   "type": "module",
   "bin": {

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/core",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "private": true,
   "type": "module"
 }

package/packages/detectors/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/detectors",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "private": true,
   "type": "module"
 }