Structures feature UI and domain code: thin app navigation, state-only ViewModels, Screen Context for busy screens, shallow UI trees, multi-state previews, validation in the data layer exposed via API, and user-safe errors. Use when adding or refactoring a…
Implement a piece of work from a spec or tickets. Use when the user asks to implement, build, code, or ship a feature/ticket — especially feature UI, navigation, or data layers. Mandates /structure-feature-code for screen shape.
Incremental PR delivery — one focused commit, push, then PR comment. Use when the user asks to commit/push/comment incrementally on an open PR (or to ship a review-fix slice that way).
Device-truth design review against the in-repo design system. Screenshot the running app, compare to :designsystem tokens/components and intended states, fix gaps, re-capture, post Before|After. Use when finishing UI work, before merge (Finish reviews), or…
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma',…
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark…
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write…