SkillCheatSheet
design-system
An AI agent skill from affaan-m/ECC, scored 66 out of 100 by code.
Code score by group
It loses the most points in Procedure (12), the group that checks whether the steps are numbered, read the context first and say what to do when something fails.
What the author says it does
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with DESIGN.md rationale and an interactive HTML preview, score the UI across 10 dimensions, and flag AI-slop patterns. Use when starting a design system, auditing visual consistency before a redesign, or reviewing a PR that touches styling.
This is the description in the skill's own SKILL.md, written by its author, not by SkillCheatSheet.
- Repository
- affaan-m/ECC
- Folder
- skills/design-system
- License
- MIT
- GitHub stars
- 301,615
- SKILL.md lines
- 84
- Other files
- 0
Add design-system to your agent
npx skills add affaan-m/ECC --skill design-systemThe command uses the open skills CLI. A skill is instructions and scripts your agent will follow, so read it first: open the folder on GitHub at the commit that was scored.
More skills from affaan-m/ECC
-
frontend-design-direction
Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, o…
Verified85A -
prompt-optimizer
Analyze draft prompts, detect intent and missing context, match ECC commands, skills, and agents, and output a ready-to-paste optimized prompt with diagnosis and rationale — advis…
Verified85A -
ui-demo
Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM vide…
Verified85A -
prompt-caching-strategy
Optimize LLM prompt caching hit rate to reduce API costs and improve latency. Analyzes prompt structure, identifies cacheable vs non-cacheable content, and recommends restructurin…
Verified84B -
loop-design-check
Design a goal-oriented agent loop or review one for failure modes: spinning, Goodhart-gaming the verifier, or running a wrong answer to completion. Covers machine-decidable goals,…
Verified80B -
plan-orchestrate
Read a plan document, decompose it into steps, classify each step, and emit the ready-to-paste ECC slash command for that step, carrying the step identifier and scope in the comma…
79B -
data-scraper-agent
Build a fully automated AI-powered data collection agent for any public source — job boards, prices, news, GitHub, sports, anything. Runs on a schedule, enriches data with a free…
78B -
accessibility
Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, co…
77B
Scores come from a snapshot of 300 public GitHub repositories taken on 12 November 2026. Every score is the result of fixed checks run by code; no AI is involved. How scoring works.