Standardize spacing, typography, colors, and interactive states for accessible frontend UI.
npx skills add https://github.com/csandeep/skills --skill design-guide-csandeep
Please help me install this Agent Skill. Skill: design-guide Source: https://github.com/csandeep/skills/tree/main/design-guide Command: npx skills add https://github.com/csandeep/skills --skill design-guide-csandeep
design-guide helps you avoid inconsistent UI styling and design decisions by providing a clear, practical checklist for creating clean, minimal, accessible interfaces.
It standardizes spacing (8px grid), typography scale, color palettes (one accent + neutral grays), and subtle interaction states across common frontend technologies like HTML/CSS and React/Vue/Svelte components. Use it when designing buttons, forms, cards, navigation, and full page layouts to improve visual hierarchy and consistency across a product. It also includes do/don’t examples to prevent common visual and structural anti-patterns like rainbow gradients, heavy shadows, and missing hover/focus/disabled states.
Apply the guide to your UI by aligning your layout spacing, color choices, typography hierarchy, and interactive states to the rules in this document.
High-intent search queries and answers about installing and using this skill.
To create consistent UI styling, standardize your design system using an 8px spacing grid, a defined typography scale, and a color palette of neutral grays plus one accent. This prevents inconsistent visual hierarchy across buttons, forms, and cards.
Accessible web design requires defining subtle interaction states, including hover, focus, and disabled states for interactive components. Avoid anti-patterns like rainbow gradients and heavy shadows to maintain clarity and professionalism across HTML or framework components.
Set up your color palette using neutral grays for structure and a single accent color for emphasis. Pair this with a standardized typography scale to improve visual hierarchy, ensuring text remains legible and accessible across all UI components.
Yes, these UI design guidelines apply to Svelte, React, Vue, and plain HTML/CSS. The rules for spacing, typography, and interaction states are framework-agnostic, ensuring you can build clean and accessible components in any environment.
Inconsistent UI design often stems from misaligned spacing, undefined typography scales, and missing interaction states. Applying a standardized 8px grid and a strict color system of grays plus one accent prevents these visual and structural anti-patterns.
jwyniaAnalyze CSS/HTML foundations and generate design tokens, palettes, typography, and component templates.
AshesOfTheUndeadStandardize UI design with token-based whitespace, typography, and grid layouts.
jac007xAudit Walmart design-system compliance across tokens, components, and spacing.
CANTAGESTUDIOValidate UI component usage against design system specifications.
