Agent skill · software engineering · aiskillstore
figma-pencil-fsd-tailwind4
Convert Figma or Pencil designs into production-ready frontend code using Feature-Sliced Design and Tailwind CSS v4. Use when translating designs into code, extracting tokens, mapping UI to FSD layers (shared / entities / features / widgets / pages / app-shell / app), enforcing Server vs Client boundaries when applicable, or validating design-to-code fidelity.
Why this skill is useful
Adds a comprehensive workflow for converting designs into production-ready code with specific guidelines for Tailwind CSS and Feature-Sliced Design, including validation scripts and accessibility checks.
What it needs
Requires tailwindcss installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Figma / Pencil to FSD + Tailwind 4 Turn design files into code without breaking the host repository's architecture, design system, or accessibility guarantees. This skill is framework-agnostic; the rules below apply equally to any modern React stack and degrade gracefully when optional pieces (RSC, primitive library, FSD linter) are missing. Assumptions This skill works in any frontend repository that satisfies: A modern component-based framework (React, or any framework with a comparable component model). Tailwind CSS. Token rules target v4 (CSS-first, @theme, OKLCH). For v3 projects, fall back to the project's existing config and skip v4-only sections. Feature-Sliced Design (or a comparable layered architecture). Layer names may vary by repository; the canonical names are app, pages, widgets, features, entities, shared. A primitive component library is optional. When one is present (shadcn/ui, Radix, Mantine, Headless UI, or any in-house design system), reuse it instead of re-implementing primitives. Server / Client component split is optional. The RSC guidance applies only when the project uses a framework with that distinction. If any assumption does not hold, defer to the host repository's contract first. Workflow 1. Check for a repository contract before generating code. See references/project-contracts.md. Local rules override every default in this skill. 2. Scope the work to one frame, screen, or component. Refuse "translate the whole file". 3. Analyze the design: tokens, components, layout intent, repeated patterns, states. 4. Decompose into FSD layers on paper before writing code. Decide Server vs Client boundaries only if the host framework uses them. See references/fsd-mapping.md and references/rsc-boundaries.md. 5. Reconcile design variables with project tokens. Do not silently add new tokens. See references/tailwind-tokens.md. 6. Reuse existing primitives from the project's component library before creating new ones in shared/ui. 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/figma-pencil-fsd-tailwind4