Orchestrate end-to-end UI design for React/Next.js projects with Tailwind CSS.
npx skills add https://github.com/phrazzld/agent-skills --skill design-phrazzld
Please help me install this Agent Skill. Skill: design Source: https://github.com/phrazzld/agent-skills/tree/main/core/design Command: npx skills add https://github.com/phrazzld/agent-skills --skill design-phrazzld
This Skill streamlines the entire UI design process, from initial concept and exploration to detailed token implementation and visual QA, ensuring a cohesive and high-quality user interface.
Use the design skill to audit the current design system and explore three new visual directions.
High-intent search queries and answers about installing and using this skill.
You can build a design system for React or Next.js by auditing existing visual directions, exploring new aesthetics, and defining design tokens for color, typography, and spacing to ensure cohesive implementation.
Defining design tokens in Tailwind CSS involves translating visual aesthetics like typography and color palettes into reusable variables, ensuring UI consistency and adherence to taste constraints across the application.
Yes, you can audit an existing UI design system to evaluate current visual aesthetics, identify areas for refinement, and explore multiple new visual directions before defining updated design tokens.
Yes, this approach supports greenfield design system creation by allowing you to explore six distinct visual directions, select an aesthetic, and define its corresponding color, typography, and spacing tokens.
Ensure UI components adhere to visual design principles by applying defined design tokens for spacing and motion, enforcing taste constraints, and conducting visual QA during the token implementation process.
Mischio95Set up shadcn/ui components and forms with React Hook Form and Zod.
tomasbassoTranslates design briefs into production-grade frontend interfaces and components.
dthompsonflDefine and enforce a reusable UI design system for web interfaces.
Exia-thdGenerate WCAG AA-compliant wireframes, design tokens, and component inventories for digital products.
