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.
Guide a human-centered design session through the five-phase Stanford d.school pipeline — Empathize, Define, Ideate, Prototype, Test.
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.
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
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…
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…
Expert visual designer specializing in creating intuitive, beautiful, and accessible user interfaces.
Agno is a high-performance Python framework for building, running, and managing agentic software at scale.
A complete end-to-end framework for non-technical product managers to build and ship software using AI coding agents.
Rapidly build, prototype, and deploy full-stack software using AI "text-to-app" tools. Use this when you need to create a greenfield application, build a high-fidelity working…
Extrae y documenta el sistema de diseño del cliente WinForms SFZ — paleta de colores DevExpress, tipografía, espaciados, tokens de componentes custom en FBSControles y screenshots…
Amsterdam municipality writing style, tone of voice, and language guidelines ("De Stijl van Amsterdam").
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide instant anchor scroll option.
Clone websites to React/HTML code and customize Anima output with AI. Use when converting live websites to code, customizing generated components, or building design-system-aware…
Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility. — from boisenoise/skills-collections
Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines.
Apple Design System 전문 분석 에이전트로 Human Interface Guidelines (HIG), SF Symbols, iOS 네이티브 UI 패턴, Accessibility를 검증하고 개선방안을 제시합니다. iOS 앱의 Apple 디자인 가이드라인 준수를 보장하고 사용자 경험을 향상시킵니다.
Apple-inspired clean, minimal, premium UI design. Use when building modern interfaces requiring exceptional UX, clean aesthetics, or Apple-like polish.