design-standards
Apply production-grade design standards when building or reviewing pages, components, or UI. Use this skill whenever the user asks to build a page, design a component, lay out a section, review the UI, fix the layout, or check design quality. Triggers on build a page, create a component, design a section, hero, card, CTA, layout, review the UI, fix the design, design system, design tokens, spacing, typography scale, button standards, mobile design. Also triggers for any production design decision where contrast, accessibility, spacing, or visual hierarchy matters.
Profile →npx skills add rampstackco/claude-skills --skill design-standards --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Design Standards Production design standards for any web project. Stack-agnostic. Tool-agnostic. Covers tokens, contrast, hierarchy, spacing, mobile rules, and the pre-ship checklist. This skill complements `brand-identity` (which defines the visual system) and `brand-style-guide` (which documents it). This skill is for the day-to-day work of applying those standards in real components and pages. --- ## When to use - Building a new page, section, or component - Reviewing UI for quality, accessibility, or consistency - Setting up design tokens for a new project - Fixing layout, contrast, or hierarchy issues - Establishing a button or form standard - Pre-ship design review ## When NOT to use - Defining a brand identity from scratch (use `brand-identity`) - Documenting a finished brand system (use `brand-style-guide`) - Building a formal component library (use `design-system`) - Frontend code architecture (use `frontend-component-build`) - Accessibility-only audits with WCAG remediation (use `accessibility-audit`) --- ## Required inputs - The page or component being built or reviewed - The brand's design tokens (colors, type, spacing) - or willingness to define them - The target dev
- When to use
- When NOT to use
- Required inputs
- The framework: 6 standards
- 1. Design tokens
- 2. WCAG AA contrast (non-negotiable)
- 3. Visual hierarchy
- 4. Spacing and rhythm
- 5. Mobile rules
- 6. Component consistency
- Workflow
- Failure patterns
- Output format
- Reference files
What does the design-standards skill do?
Apply production-grade design standards when building or reviewing pages, components, or UI. Use this skill whenever the user asks to build a page, design a component, lay out a section, review the UI, fix the layout, or check design quality. Triggers on build a page, create a component, design a section, hero, card, CTA, layout, review the UI, fix the design, design system, design tokens, spacing, typography scale, button standards, mobile design. Also triggers for any production design decision where contrast, accessibility, spacing, or visual hierarchy matters.
How do I install it?
Run `npx skills add rampstackco/claude-skills --skill design-standards --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rampstackco/claude-skills, a repository with 515 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.