select_components
Select and adapt animated UI components for your target framework and design system, returning production-ready code with design tokens and accessibility notes.
Instructions
Phase 3.5 — Select and adapt animated UI components for your framework and design system.
Returns: production-ready component code (HTML/CSS or React/Vue/Angular/Svelte), a locked Design Token Registry (ensuring every button looks the same across the page), and accessibility notes.
61 components across 13 categories × 5 styles (flat, neumorphic, glassmorphic, gradient, animated). Components have HIGH animation preference — every component has hover effects, entrance animations, focus rings, and micro-interactions.
IMPORTANT: Run design_theme first to generate your design tokens.
Presets: "all" (13 components), "landing" (button + card + nav + badge), "form" (input + checkbox + toggle + radio + buttons), "dashboard" (10 components), "minimal" (button + card + input + nav).
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| style | No | Component visual style. If omitted, auto-resolved from your industry + tone (corporate→flat, gaming→gradient, luxury→glassmorphic, tech→animated). | |
| framework | Yes | Target framework. Options: "html" (vanilla), "react", "nextjs", "vue", "nuxt", "angular", "svelte", "astro" | |
| componentTypes | Yes | Component categories to select. Use presets: "all", "landing", "form", "dashboard", "minimal". Or specific: "button", "card", "input", "checkbox", "toggle", "radio", "tooltip", "modal", "loader", "badge", "dropdown", "navigation" | |
| animationPreference | No | Animation richness level. Default: "high" (recommended). |