Design Systems

This is your checklist for building or auditing a design system from the ground up. It walks through foundation elements like color systems with WCAG compliance, typography scales, and spacing conventions, then moves into component architecture with all the states you need to handle (hover, focus, disabled, loading, error). The accessibility requirements are baked in rather than bolted on, which is the right approach. It covers everything from design tokens in CSS custom properties to governance and contribution guidelines. Use this when you're establishing design system standards for a team or need a comprehensive reference for what a mature system should include. The code examples are minimal but the conceptual coverage is thorough.

skills.sh installs: 932
GitHub stars: 302
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mindrally/skills --skill design-systems --agent claude-code

Installs into .claude/skills of the current project.

Files

Design Systems Best Practices

Guidelines for creating and maintaining design systems that ensure visual consistency, accessibility compliance, and scalable component architecture across digital products.