Loading...
Loading...
Found 12 Skills
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', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.
Use this skill when discussing UI components, design systems, frontend implementation, or component architecture. Guides thinking about Atomic Design methodology - atoms, molecules, organisms - and promotes component reuse over creation. Triggers on UI/frontend discussions, "what components do we need?", "should I create a new component?", or design system questions.
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a Figma design turned into code — e.g. 'code this design', 'implement this frame', 'build this screen/component', 'turn this Figma into React/Vue', 'convert this design to code' — or whenever a Figma URL or the current Figma selection appears alongside a coding request. Works for full screens, single sections, or one component.
Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.
Use when building, redesigning, beautifying, or refactoring SvelteKit pages and reusable components with shadcn-svelte, Bits UI, or the shadcn-svelte MCP. Trigger on landing pages, dashboards, marketing sites, app shells, forms, navbars, tables, dialogs, responsive layouts, theming, icon selection, and requests to turn an idea or rough mockup into polished Svelte UI without inventing component APIs.
Coordinate a high-fidelity Figma-to-code workflow for screens, layouts, drawers, dialogs, or component groups. Use when Codex receives one or more Figma URLs or node IDs and must decide how to extract exact design intent, split work into reusable components, route implementation safely, and keep conversion and apply work aligned with the local design system and verification constraints.
Use when the user wants to implement UI from IxLab artifacts and needs design-system-aware frontend execution rather than generic code generation.
Generates code from Sketch designs with 1:1 visual fidelity using Sketch MCP (`get_document_info`, `get_layer_tree_summary`, `get_screenshot`, `get_symbol_overrides`, `get_design_assets`, targeted `run_code`). Inspects existing project code and conventions first, maps symbols and overrides to reusable components, exports assets, and validates implementations against Sketch screenshots (web: running app vs `get_screenshot`). Use when implementing or updating UI in React, Tailwind, SwiftUI, Kotlin, or other technologies from an Sketch document, page, frame, or layer.
Decide whether a UX need should reuse, compose, extend, or create a design-system component or pattern. Use when a designer asks whether something needs a new component, how a design fits the current system, or what design-system contribution a feature should make.
Use when about to create or change any visible UI in a project, such as a 404 page, legal page, consent control, or footer link, to record the design tokens, components, layout patterns, and copy tone already in use so new pieces look native. Do not use it to design a new visual style, to redesign the site, or when no visible UI will be created or changed.
Keep React screens thin and reusable UI in its own package, separate from app screens. Triggers when authoring or restyling a page, route, screen, or component in an app that has a shared UI package — especially when a file is trending toward walls of plain <div className="..."> Tailwind markup. Bias toward reusing existing primitives in that package and graduating new reusable units into it, while avoiding premature over-extraction. Do NOT trigger for non-React code, for single-package apps with no shared UI package, or for editing the internals of one existing component. The package name is per-repo (see ADR-0013); do not require @repo/ui or @native/ui.
Bias UI work toward installing existing components from configured shadcn registries (the free @shadcn registry and the paid @shadcnblocks block registry) before hand-rolling them. Triggers when building or restyling React UI in a project that has a components.json with registries configured — heroes, navbars, footers, pricing tables, feature grids, dashboards, forms, auth screens, marketing sections, data tables, and other common blocks. Use the shadcn MCP tools to search, preview, and add, and always assemble at least three buildable variations with a side-by-side comparison surface before settling on one. Do NOT trigger for genuinely bespoke or domain-specific components that no registry would carry, for non-React stacks, or for projects with no registry configured.