design-standards

Validate UI tokens, contrast, spacing, typography, and responsive rules against design standards.

523|69|Updated Apr 28, 2026
One-click install
npx skills add https://github.com/rampstackco/claude-skills --skill design-standards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-standards
Source: https://github.com/rampstackco/claude-skills/tree/main/skills/design-standards
Command: npx skills add https://github.com/rampstackco/claude-skills --skill design-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Inconsistent design across teams leads to fractured UI, accessibility gaps, and slower product velocity. This skill provides a standardized framework to apply tokens, spacing, typography, and contrast consistently across pages and components, speeding up design reviews and ensuring accessibility.

Core Features & Use Cases

  • Token-driven design: ensures tokens are defined and reused across components.
  • Accessibility and contrast checks: enforces WCAG AA standards on text, borders, and UI elements.
  • Design system alignment: documents tokens, radii, shadows, and breakpoints; supports pre-ship checks.

Quick Start

Review the current UI against tokens, spacing, and WCAG contrast and output a remediation plan.

Frequently Asked Questions about design-standards

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce design standards and WCAG contrast across UI components?▼

To enforce design standards, validate token definitions, spacing, typography, and WCAG AA contrast across UI components. This generates a remediation plan to fix accessibility gaps and align interfaces with production-grade rules before shipping.

What is the best way to run a pre-ship design review for a design system?▼

The best way to run a pre-ship design review is to verify tokens, radii, shadows, and breakpoints against a standardized checklist. This documents design system alignment and outputs a clear remediation plan for unresolved UI inconsistencies.

How do I validate design tokens for typography and spacing across a project?▼

Validating design tokens requires checking that typography, spacing, radii, and shadows are defined and consistently reused across pages and components. This ensures token-driven design alignment and eliminates fractured UI inconsistencies across teams.

Do I need predefined breakpoints and tokens before applying design standards?▼

Yes, applying design standards requires tokens, radii, shadows, and breakpoints to be defined beforehand. Verifying these predefined elements against a pre-ship checklist ensures successful design system alignment and accessibility validation.

Why does my UI fail accessibility contrast checks during design reviews?▼

UI fails accessibility contrast checks when text, borders, and UI elements do not meet WCAG AA standards. Enforcing design standards validates contrast ratios against defined tokens and outputs a remediation plan to resolve violations.

Can I use design standards validation for responsive layout rules and breakpoints?▼

Yes, design standards validation applies to responsive layout rules by verifying defined breakpoints. This checks responsive behavior across pages and components, ensuring layouts meet production-grade design standards before shipping.