Generate prototype React components + Storybook stories from Figma URLs. 6-phase pipeline: figma_to_react → UntitledUI matching → prototype synthesis → verify → storybook…
Build interactive React prototypes from selected UI concepts using the web-artifacts-builder skill. Each prototype is a React + TypeScript + Tailwind + shadcn/ui app bundled to a…
Use WHEN starting a new product, rebrand, or major design-system reset BEFORE prototype work to materialize an approved, machine-readable design system at…
Create and manage design systems with design tokens, theming (light/dark mode), standardized spacing, colors, typography, and component registry
Design token management with W3C Design Token Community Group specification, three-tier token hierarchy (global/alias/component), OKLCH color spaces, Style Dictionary…
Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction, Dev Mode inspection, Auto Layout to CSS Flexbox/Grid mapping,…
Unity-based mini colony-sim-style game prototype, built using game-dev-agent. Portfolio piece demonstrating AI agent + game dev T-shape skill.
Use WHEN a prototype, frontend handoff, or backend integration needs realistic mock data TO create schema-tied mock contracts and scenario fixtures before frontend implementation.
Helpt bij het bouwen van overheidswebsites en -applicaties met het NL Design System, inclusief design tokens, community componenten, Storybook en Rijkshuisstijl.
Track-aware wrapper around gstack's /office-hours skill. Runs the upstream office-hours session (six forcing questions / builder mode), detects native vs web intent from the…
Create UI/UX mockups and HTML/CSS/JS prototypes without a designer. Triggers: mockup, prototype, wireframe, UI design, 목업, 프로토타입.
Build platform-independent design systems and consistent component libraries. Triggers: design system, component library, design tokens, 디자인 시스템, 컴포넌트.
High-fidelity prototype workflow. Monorepo: lands in apps/lab//. Output: working prototype + DESIGN.md + preview deploy.
Apple-canon design system consultation for SwiftUI projects. Produces DESIGN.md (human source of truth) + a Swift Package starter (DesignSystem.swift + Package.swift + Tests)…
Generate design graph nodes (UserJourney, Flow, Page, Component) from any input: Jira ticket, plain-text description, scenario references, or Figma wireframes.
Zero-dependency live-preview server providing an agent↔browser bidirectional companion. Watches a content directory, wraps HTML fragments in a frame template, broadcasts…
Hands-on implementation partner for creating tools, scripts, dashboards, and prototypes. Use when the user wants to build something tangible — apps, scripts, automations, or…
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component — from…
Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", o — from…
Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", o — from…
Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interac — from…
Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's — from…
Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interac — from…
Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's — from…
[METHODOLOGY] Token architecture (primitive→semantic→component), CSS variables, spacing/typography scales, component specifications. Preloaded by design-ui-designer agent.
Builds throwaway UI variations — several radically different visual layouts on one route, switchable from a floating control bar — to answer 'what should this look like' before…
Guide a human-centered design session through the five-phase Stanford d.school pipeline — Empathize, Define, Ideate, Prototype, Test.
Use for UI ideation, Google Stitch prompt packs, Stitch MCP design retrieval, DESIGN.md design-system creation, and implementing Stitch designs in a VS Code project.
Fast-lane prototype skill for the hybrid workflow. Builds a playable prototype in 2-3 days with minimal process overhead. Designed for discovery phase.
Orchestreert een 5-sporen pipeline (probleem → markt → MVP-spec → prototype → GTM) die één opportunity uit /ontdek-kansen omvormt tot een launch-klare solution-map.
Scaffoldt of her-aligneert een VitePress sub-site voor een solution binnen de kans-uitwerken-hub. Mode met wireframe-embed of zonder.
Web data extractor for the Karvey method. Pulls data from a web page; first call prototypes the extraction, then codifies it into a reusable, tested script/skill for fast re-runs.
Turn complex or visual agent responses into rich, reviewable HTML artifacts the user can annotate and send feedback on, using lavish-axi and optional React/Tailwind/shadcn builder…
Identify PatternFly icons in Figma mockups and provide the correct React import statements. Use when implementing a design from Figma, verifying icon usage in a prototype, or…
Pixel — UI/UX designer. Produces wireframes, mock specs, convention audits, and microcopy direction grounded in cognitive science (Nielsen, Gestalt, Hick's Law) and named design…
Map user flows, define screens and states, plan prototype scope, design test questions, and synthesize test results. Covers Phases 04-06 of the UX research workflow.
Extract misplaced code from any folder (backend or frontend) and move it to a properly-named folder that fits this project's existing conventions.
Implement exactly ONE vertical slice of the active feature, then stop with evidence — TDD, doubt loop, frontend craft, Spec Drift Guard.
Throwaway prototype answering ONE design question — either a runnable Logic harness or 2–4 radically different UI variations on one route — then delete or absorb.
Scaffold a tiered design system — principles, tokens, aesthetic direction from project context. Triggers: 'design system', 'design tokens', 'brand guidelines', 'visual direction',…
**DEFAULT for terminal-UI design work — dispatches reviewer/architect with TUI design focus (information density, keyboard nav, color, layout, state).**
Use when starting an epic's wireframe designs, scanning a frontend for UI components, cataloguing existing routes, or inventorying frontend state.
[METHODOLOGY] Accessible UI implementation with shadcn/ui (Radix UI + Tailwind), Tailwind CSS utility-first styling, canvas-based visual designs, responsive layouts, dark mode,…
Explicitly load a design system from the org-level registry at ~/.claude/design-systems// for the current project.
Validate design system compliance in code and detect token usage violations
Define and document prototype interactions, transitions, and hotspots
Single entry point for ALL frontend building and restyling — any page, component, dashboard, landing page, app shell, modal, settings panel, onboarding flow, hero, pricing…
Self-contained app generator — invoke this skill directly, do not decompose into sub-steps. Generates React web apps with TinyBase reactive data store.
Design system completo para webs 3D inmersivas con tema oscuro premium. Usar cuando se necesite: paleta de colores cyberpunk/dark, tipografía para webs premium, utilidades CSS…
Anti-AI-slop design system for distinctive, premium interfaces. Bold typography, dark-first #060610, fluid clamp() type, cascade layers + native nesting + container queri — from…
Create and manage project-specific design systems for SaaS applications. Use when starting a new app (CREATE mode), updating an existing design system (MODIFY mode), or building…
Phase 3: Map design-system.md to 7 Gemini XML blocks (aesthetics, style_reference, typography, color_system, spacing, states, forbidden), call create_frontend, add component…
Phase 5: Verify contrast >= 4.5:1 text / 3:1 UI in both light+dark, check no Inter/Roboto/Arial/Open Sans, confirm all colors are OKLCH from design-system.md, validate…
Use when building or reviewing Micronaut applications — Micronaut.run bootstrap, @Singleton/@Prototype, @Factory beans, @ConfigurationProperties, environments, @Requires — from…
Establish docs/design/ (brand, design-system, messaging) and generate real design — web, logo, deck, ads — from the product docs.
Use when a designer or stakeholder has a felt "vibe" but no named direction — turning a vague mood into ranked emotional/brand goals and an aesthetic-direction doc the rest of the…
Adaptive quality gates based on project type. Configures which validation steps the ticket-implementation workflow enforces depending on whether the project is a prototype,…
Visual design system patterns for AI Agency projects covering color palettes, typography, spacing, layout, and component design tokens.
Expert UI designer specializing in visual design systems, component libraries, and pixel-perfect interface creation.
agent-decompose の後に呼び出すスキル。design.md を読み、reference/ の雛形コード（workflow_skeleton.py / react_skeleton.py / multi_agent_skeleton.py）を起点にエージェントの最小実装を作る。LangGraph の StateGraph、ReAct…