Enforce design system rules for UI component generation.
npx skills add https://github.com/baasith6/cursor-skills --skill using-ui-stack-baasith6
Please help me install this Agent Skill. Skill: using-ui-stack Source: https://github.com/baasith6/cursor-skills/tree/main/resources/using-ui-stack Command: npx skills add https://github.com/baasith6/cursor-skills --skill using-ui-stack-baasith6
This Skill enforces a consistent design system when generating UI components, ensuring uniformity in spacing, colors, typography, dark mode support, interactions, and accessibility.
Generate a UI component using the 'using-ui-stack' skill and ensure it adheres to the design system rules.
High-intent search queries and answers about installing and using this skill.
To enforce a consistent UI design system, apply predefined rules for spacing, colors, and typography. This approach ensures uniformity across web application components by using an 8px grid, a 1.25 font ratio scale, and the 60-30-10 color rule.
Maintaining accessibility compliance during UI generation requires enforcing high contrast ratios and adequate touch target sizes. Integrating these standards directly into your design system ensures automated component creation meets accessibility requirements.
Dark mode support in a UI design system works by providing complete light and dark color mappings. This ensures that generated components automatically adapt to dark themes while maintaining proper contrast and visual hierarchy.
Yes, you can use an 8px grid system for spacing and a 1.25 ratio scale for typography in front-end development. These standards create visual harmony and predictable layouts across all generated UI components.
Automated UI generation for design system compliance is limited by the strictness of predefined rules. It requires precise input definitions for spacing, colors, and typography to avoid misaligned components or broken accessibility standards.
Your generated UI lacks consistent spacing and color hierarchy because it lacks a structured design system. Applying an 8px grid and the 60-30-10 color rule enforces visual balance and standardizes component generation.
junchenghuoGenerate UI design tokens for colors, spacing, typography, and border-radius.
aaltaayBuild accessible React UI components with shadcn/ui, Tailwind, and Radix primitives.
bdbchAudit web design compliance against contrast, spacing, typography, and hit target standards.
jpoutrinDetect hard-coded values and generate design system component structures.
