Generate UI/UX designs with design tokens and WCAG-compliant accessibility.
npx skills add https://github.com/TonyQ-AI/agents-workflow --skill ui-design-tonyq-ai
Please help me install this Agent Skill. Skill: ui-design Source: https://github.com/TonyQ-AI/agents-workflow/tree/main/skills/ui-design Command: npx skills add https://github.com/TonyQ-AI/agents-workflow --skill ui-design-tonyq-ai
This skill solves the common issue of AI-generated interfaces looking like generic, uninspired templates while lacking proper engineering standards like design tokens and accessibility compliance.
Use the ui-design skill to create a design system and component structure for a new professional dashboard project.
High-intent search queries and answers about installing and using this skill.
To create a UI design system, you define CSS variables for colors, spacing, and typography to ensure consistency, then structure semantic HTML components. This approach enforces design token implementation and maintains strict visual identity across frontend projects.
The best way to avoid generic AI template designs is to apply anti-template guardrails that actively identify and reject common AI tropes like warm cream backgrounds or acid green terminal styles. This ensures custom interface creation with unique visual identity.
WCAG compliance checks work by integrating accessibility standards directly into the UI design workflow, verifying that color contrast ratios meet requirements. This ensures frontend interfaces are accessible while maintaining aesthetic design principles.
Yes, you can use this UI design approach for a professional dashboard project. It helps you define a unique visual identity and a robust design system with engineering rigor before writing component code.
Yes, you need design tokens to build accessible custom interfaces because they enforce CSS variables for colors, spacing, and typography. This ensures design consistency and supports WCAG-compliant color contrast implementation.
AreteDriverScaffold React, Next.js, or static HTML projects with TypeScript and Tailwind CSS.
h4vzzGenerate accessible React, Vue, Svelte, or HTML components with design tokens.
kennedym-dsEvaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.
aaronbassettProvide a structured library of Flutter UI widgets for consistent layouts.
