Generate or audit design systems and review styling consistency changes.
The material indicates a prompt-only design-system/visual-audit skill with no required secrets, no declared remote endpoints, and no built-in mechanism for direct code execution or data exfiltration. Given its open-source GitHub origin and very strong community adoption, overall risk is low, though license and maintenance status are not explicitly stated and should still be verified.
The material explicitly states that no keys or environment variables are required; there is no request for API keys, OAuth tokens, or other sensitive credentials, so credential exposure and abuse risk appears low.
The metadata says there are no remote hosts and the skill is prompt-only; while the README mentions researching competitor sites 'via browser MCP', it does not declare any built-in third-party endpoint or an inherent mechanism to transmit user data outward.
As a prompt-only skill, the material does not show any built-in ability to spawn local processes, run scripts, install dependencies, or invoke system commands; the README's 'scan/generate/review' language reads as task guidance rather than an executable component.
The description references scanning a codebase, reviewing PRs, and generating files such as DESIGN.md and token outputs, but this is presented as intended workflow guidance; the material does not show the skill itself requesting standalone file access or excessive permissions.
The source is an open-source GitHub repository with very high community adoption (about 210k stars), which strongly lowers risk; the unspecified license and unknown maintenance status reduce governance transparency, but based on the available facts this is not enough to elevate it to high risk.
Copy the install command and let the AI configure it · recommended for beginners
Please install the "design-system" skill from askskill: 1. Download https://raw.githubusercontent.com/affaan-m/ECC/main/skills/design-system/SKILL.md 2. Save it as ~/.claude/skills/design-system/SKILL.md 3. Reload skills and tell me it's ready
Create a first draft design system for a B2B SaaS admin dashboard, including colors, typography, spacing, buttons, forms, tables, feedback components, and dark mode recommendations, with usage rules for each.
A structured design system draft covering core visual tokens and common component rules.
Review the following product page design notes, identify inconsistencies in colors, spacing, border radius, typography hierarchy, and button styles, and provide prioritized fixes by severity.
A visual consistency audit listing issues, affected areas, priorities, and recommended fixes.
Review the styling changes in this frontend PR. Check whether they follow the existing design system, introduce duplicate tokens, or break responsive layouts, and provide actionable revision suggestions.
A PR review focused on styling changes, including risks, design-system violations, and improvement suggestions.
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
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.
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
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
Handle returns, refunds, fraud checks, and warranty claim decisions efficiently.
Use Bun for runtime, bundling, testing, packages, and Node migration decisions.
Use the correct Ethereum Keccak-256 hashing in Node.js and TypeScript.
Apply Nuxt 4 patterns for SSR safety, performance, and data fetching.
Generate images, videos, and audio with one unified AI media workflow.
Design Quarkus 3 backend patterns for messaging, APIs, data, and async workflows.
Generate UI design rules, color palettes, and brand design references.
Generate custom design system rules for your codebase and Figma-to-code workflow.
Analyze design images for layout, color, typography, and accessibility improvements.
Get structured feedback on screens, mockups, and UI design quality.
Create or update a professional Figma design system from a codebase.
Analyze visual sources and generate structured design docs, tokens, and components.