mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-04-06 09:13:31 +08:00
23d743b92c
Codex CLI requires YAML frontmatter (---) in SKILL.md files. 6 skills were missing frontmatter entirely; laravel-verification had a bare colon in its description causing an invalid YAML parse error.
83 lines
2.4 KiB
Markdown
83 lines
2.4 KiB
Markdown
---
|
|
name: design-system
|
|
description: Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
|
|
origin: ECC
|
|
---
|
|
|
|
# Design System — Generate & Audit Visual Systems
|
|
|
|
## When to Use
|
|
|
|
- Starting a new project that needs a design system
|
|
- Auditing an existing codebase for visual consistency
|
|
- Before a redesign — understand what you have
|
|
- When the UI looks "off" but you can't pinpoint why
|
|
- Reviewing PRs that touch styling
|
|
|
|
## How It Works
|
|
|
|
### Mode 1: Generate Design System
|
|
|
|
Analyzes your codebase and generates a cohesive design system:
|
|
|
|
```
|
|
1. Scan CSS/Tailwind/styled-components for existing patterns
|
|
2. Extract: colors, typography, spacing, border-radius, shadows, breakpoints
|
|
3. Research 3 competitor sites for inspiration (via browser MCP)
|
|
4. Propose a design token set (JSON + CSS custom properties)
|
|
5. Generate DESIGN.md with rationale for each decision
|
|
6. Create an interactive HTML preview page (self-contained, no deps)
|
|
```
|
|
|
|
Output: `DESIGN.md` + `design-tokens.json` + `design-preview.html`
|
|
|
|
### Mode 2: Visual Audit
|
|
|
|
Scores your UI across 10 dimensions (0-10 each):
|
|
|
|
```
|
|
1. Color consistency — are you using your palette or random hex values?
|
|
2. Typography hierarchy — clear h1 > h2 > h3 > body > caption?
|
|
3. Spacing rhythm — consistent scale (4px/8px/16px) or arbitrary?
|
|
4. Component consistency — do similar elements look similar?
|
|
5. Responsive behavior — fluid or broken at breakpoints?
|
|
6. Dark mode — complete or half-done?
|
|
7. Animation — purposeful or gratuitous?
|
|
8. Accessibility — contrast ratios, focus states, touch targets
|
|
9. Information density — cluttered or clean?
|
|
10. Polish — hover states, transitions, loading states, empty states
|
|
```
|
|
|
|
Each dimension gets a score, specific examples, and a fix with exact file:line.
|
|
|
|
### Mode 3: AI Slop Detection
|
|
|
|
Identifies generic AI-generated design patterns:
|
|
|
|
```
|
|
- Gratuitous gradients on everything
|
|
- Purple-to-blue defaults
|
|
- "Glass morphism" cards with no purpose
|
|
- Rounded corners on things that shouldn't be rounded
|
|
- Excessive animations on scroll
|
|
- Generic hero with centered text over stock gradient
|
|
- Sans-serif font stack with no personality
|
|
```
|
|
|
|
## Examples
|
|
|
|
**Generate for a SaaS app:**
|
|
```
|
|
/design-system generate --style minimal --palette earth-tones
|
|
```
|
|
|
|
**Audit existing UI:**
|
|
```
|
|
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
|
|
```
|
|
|
|
**Check for AI slop:**
|
|
```
|
|
/design-system slop-check
|
|
```
|