🎯

design-system

🎯Skill

from affaan-m/everything-claude-code

What it does

Three-mode design system tool for Claude Code: **Generate** (scan CSS/Tailwind/styled-components, propose design tokens, emit `DESIGN.md` + `design-tokens.json` + interactive HTML preview), **Audit** (score UI 0-10 across colour, typography, spacing, components, dark mode, a11y, etc. with file:line fixes), and **AI Slop Detection** (catch generic gradients, glass morphism, purple-blue defaults, gratuitous animation). Use to start a new design system, audit existing styling, or review styling-touching PRs.

📦

Same repository

affaan-m/everything-claude-code(188 items)

design-system

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add affaan-m/everything-claude-code --skill design-system

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add affaan-m/everything-claude-code --skill design-system

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/design-system/SKILL.md

SKILL.md

1,749Installs

AddedMar 29, 2026

View on GitHub Back to Skills

More from this repository10

🏪

affaan-m-everything-claude-code🏪Marketplace

Battle-tested Claude Code configurations from an Anthropic hackathon winner

🎯

security-review🎯Skill

Validates and secures code by providing comprehensive security checks for authentication, input handling, secrets management, and sensitive feature implementation.

🎯

golang-patterns🎯Skill

Provides reusable design patterns and idiomatic Go solutions for efficient, scalable, and maintainable software architecture.

🎯

coding-standards🎯Skill

Validates and enforces consistent code quality, style guidelines, and best practices across programming languages and project structures.

🎯

frontend-patterns🎯Skill

Provides reusable React component patterns like composition, compound components, and render props to enhance code modularity and flexibility.

🎯

backend-patterns🎯Skill

Implements robust backend design patterns like repository, factory, singleton, and dependency injection for scalable and maintainable server-side architectures.

🎯

golang-testing🎯Skill

Streamlines Go testing with comprehensive unit, integration, and benchmark strategies, mocking frameworks, and test coverage analysis.

🎯

springboot-patterns🎯Skill

Spring Boot development patterns skill covering REST API design, layered service architecture, data access, caching, async processing, and logging for production-grade Java services

🎯

continuous-learning-v2🎯Skill

Dynamically updates and refines AI model knowledge through iterative feedback, adaptive learning techniques, and intelligent knowledge integration.

🎯

postgres-patterns🎯Skill

Provides reusable SQL query patterns, database design strategies, and performance optimization techniques for PostgreSQL development