Best fit
- Starting a new project that needs a design system
- Auditing an existing codebase for visual consistency
- Before a redesign — understand what you have
affaan-m/ECC
design-system
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
74CollectingNetwork access
See how to use itView GitHub source
npx skills add https://github.com/affaan-m/ECC --skill "skills/design-system"Automated source guide
Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Reorganized from the pinned upstream SKILL.md
Turn design-system's source instructions into a guide you can follow
According to the pinned SKILL.md from affaan-m/ECC: Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
npx skills add https://github.com/affaan-m/ECC --skill "skills/design-system"Bring this context
- A concrete task that matches the documented purpose of design-system.
- The files, examples, or context the task depends on.
- Your constraints, target environment, and definition of done.
Expected outputs
- Generate for a SaaS app:
Key source sections
Read design-system through these 5 source sections
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
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
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):
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
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.
Mode 3: AI Slop Detection
Identifies generic AI-generated design patterns:
Identifies generic AI-generated design patterns:
SkillSignal prompt templates
Provide the task, context, and acceptance criteria
These prompts were written by SkillSignal from the source structure; they are not upstream text.
Task-start prompt
Confirm source fit, inputs, and outputs before acting.
Use design-system to help me with: [specific task]. Context: [files, data, or background]. Constraints: [environment, scope, and prohibited actions]. Before acting, check the pinned SKILL.md and explain which sections apply, what inputs are still missing, and what you will deliver.
Source-guided execution
Make the Agent explicitly follow the key extracted sections.
Apply the pinned design-system source to [task]. Pay particular attention to these source sections: “When to Use”, “How It Works”, “Mode 1: Generate Design System”, “Mode 2: Visual Audit”, “Mode 3: AI Slop Detection”. Preserve the important decision at each step. Mark facts not covered by the source as “needs confirmation” instead of inventing them. Then verify the result against my acceptance criteria: [criteria].
Result-review prompt
Check omissions, permissions, and source drift before delivery.
Review the current design-system result: (1) does it satisfy the original task; (2) were any applicable steps or limits in the pinned SKILL.md missed; (3) did it perform any unauthorized file, command, network, or data action; and (4) which conclusions remain unverified? List issues first, then fix only what the source or user authorization supports.
Output checklist
Verify each item before delivery
The task matches the purpose documented in the SKILL.md.
The source section “When to Use” has been checked.
The source section “How It Works” has been checked.
The source section “Mode 1: Generate Design System” has been checked.
The source section “Mode 2: Visual Audit” has been checked.
Inputs, constraints, and acceptance criteria are explicit.
Unverified facts, compatibility, and outcome claims are clearly marked.
Any file, command, network, or data action has been reviewed.
Choose a different workflow
When another Skill is the better fit
design-system
Use it for design tasks; the detail page covers purpose, installation, and practical steps.
A separate implementation from affaan-m/ECC; compare its source, maintenance signals, and permission requirements.
Open source detaildesign-system
Use it for design tasks; the detail page covers purpose, installation, and practical steps.
A separate implementation from affaan-m/ECC; compare its source, maintenance signals, and permission requirements.
Open source detailab-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
A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
What does design-system do?
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
How do I start using design-system?
The catalog detected this source-specific install command: npx skills add https://github.com/affaan-m/ECC --skill "skills/design-system". Inspect the command and pinned source before running it.
Which Agent platforms does it declare?
No dedicated Agent platform is declared in the pinned source record.
Repository stars
234,327
Repository forks
35,711
Quality
74/100
Source repository last pushed
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Documentation25/30
Specificity18/25
Maintenance20/20
Trust signals11/25
Compare before choosing
Related Agent Skills and source variants
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
design-system by affaan-m
Use it for design tasks; the detail page covers purpose, installation, and practical steps.
design-system by affaan-m
Use it for design tasks; the detail page covers purpose, installation, and practical steps.
ab-testing by coreyhaines31
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
churn-prevention by coreyhaines31
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
design-intelligence by event4u-app
Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 1 min
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
- Source repo
- affaan-m/ECC
- Skill path
- skills/design-system/SKILL.md
- Commit SHA
- 4e973d3eaf92
- Repository license
- MIT
- Data collected