Source profileQuality 74/100

affaan-m/ECC/skills/design-system/SKILL.md

design-system

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

Source repository stars
234,327
Declared platforms
0
Static risk flags
1
Last source update
2026-07-27
Source checked
2026-07-28
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSource

Decision brief

What it does—and where it fits

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

Best for

  • Starting a new project that needs a design system
  • Auditing an existing codebase for visual consistency
  • Before a redesign — understand what you have

Not for

  • Tasks that require unconfirmed production actions or broad system permissions.
  • Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

PlatformStatusEvidenceWhat to check
CodexNot declaredNo explicit evidencePortability before use
Claude CodeNot declaredNo explicit evidencePortability before use
CursorNot declaredNo explicit evidencePortability before use
Gemini CLINot declaredNo explicit evidencePortability before use
Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource
npx skills add https://github.com/affaan-m/ECC --skill "skills/design-system"
Safe inspection promptEditorial

Inspect the Agent Skill "design-system" from https://github.com/affaan-m/ECC/blob/4e973d3eaf92d97f8d2e2d8abb39d8bdc8711b38/skills/design-system/SKILL.md at commit 4e973d3eaf92d97f8d2e2d8abb39d8bdc8711b38. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

  1. 01

    When to Use

    Starting a new project that needs a design system

    Starting a new project that needs a design systemAuditing an existing codebase for visual consistencyBefore a redesign — understand what you have
  2. 02

    How It Works

    Analyzes your codebase and generates a cohesive design system:

    Analyzes your codebase and generates a cohesive design system:Output: DESIGN.md + design-tokens.json + design-preview.htmlScores your UI across 10 dimensions (0-10 each):
  3. 03

    Mode 1: Generate Design System

    Analyzes your codebase and generates a cohesive design system:

    Analyzes your codebase and generates a cohesive design system:Output: DESIGN.md + design-tokens.json + design-preview.html
  4. 04

    Mode 2: Visual Audit

    Scores your UI across 10 dimensions (0-10 each):

    Scores your UI across 10 dimensions (0-10 each):Each dimension gets a score, specific examples, and a fix with exact file:line.

Permission review

Static risk signals and limitations

Network access

medium · line 70

The documentation includes network, browsing, or remote request actions.

/design-system audit --url http://localhost:3000 --pages / /pricing /docs

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial
SignalValueEvidence typeMeaning
Quality score74/100ComputedDocumentation, specificity, maintenance, and trust rules
Repository stars234,327SourceRepository attention, not individual Skill quality
Compatibility0 platformsSourceDeclared in the catalog source record
Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository
affaan-m/ECC
Skill path
skills/design-system/SKILL.md
Commit
4e973d3eaf92d97f8d2e2d8abb39d8bdc8711b38
License
MIT
Collected
2026-07-28
Default branch
main
View the original SKILL.md

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

Alternatives

Compare before choosing

Computed 54234,327

affaan-m/ECC

design-system

Use it for design tasks; the detail page covers purpose, installation, and practical steps.

2026-07-270 platforms
Computed 53234,327

affaan-m/ECC

design-system

Use it for design tasks; the detail page covers purpose, installation, and practical steps.

2026-07-270 platforms
Computed 10042,015

coreyhaines31/marketingskills

ab-testing

When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program

2026-07-270 platforms
Computed 10042,015

coreyhaines31/marketingskills

churn-prevention

When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers o

2026-07-270 platforms