Agent skill

generative-ui

Generate high-end UI/UX and dashboard systems using design tokens, micro-interactions, and reactive state; use when asked to build adaptive interfaces, dashboards, or generative UI patterns.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/generative-ui

SKILL.md

Generative UI

Use this skill to create adaptive interfaces that respect the design system.

Workflow

  1. Collect intent, data types, and performance constraints.
  2. Select visualization patterns (DAG, time-series, tables) based on data.
  3. Apply design tokens for typography, spacing, color, and motion.
  4. Implement reactive state management and optimistic UI flows.
  5. Validate accessibility and interaction feedback.

Output expectations

  • Provide a component map and state model.
  • Include motion and interaction specs.

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results