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-cloudhabil-agi-server

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