agentleFS
Sign inStart free
Cor-IncorporatedCor-Incorporated/claude-code-skills/skills/ui-design-system/SKILL.md

ui-design-system

Skill5 starsChanged 2 months agoMITView on GitHub

Design system toolkit: generate design tokens (colors, typography, spacing), document components, calculate responsive layouts, and produce developer handoff assets. Use when creating a design system, generating tokens from brand colors, ensuring visual consistency, or preparing dev handoff. Triggers: 'generate design tokens', 'create color palette', 'design system setup', 'typography scale'. Do NOT use for UX research, user testing, or backend architecture.

19 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use fda-consultant-specialist, quality-manager-qmr and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • Hussain-ElfalahSkill

    fda-consultant-specialist

    Also in 5 projects that use this

  • Hussain-ElfalahSkill

    quality-manager-qmr

    Also in 5 projects that use this

  • CloudChefSkill

    information-security-manager-iso27001

    ISO 27001 ISMS implementation and cybersecurity governance for HealthTech and MedTech companies. Use for ISMS design, security risk assessment, control implementation, ISO 27001 certification, security audits, incident response, and compliance verification. Covers ISO 27001, ISO 27002, healthcare security, and medical device cybersecurity.

    Also in 5 projects that use this

  • csiddhant796-blipSkill

    karpathy-coder

    Use when writing, reviewing, or committing code to enforce Karpathy's 4 coding principles — surface assumptions before coding, keep it simple, make surgical changes, define verifiable goals. Triggers on "review my diff", "check complexity", "am I overcomplicating this", "karpathy check", "before I commit", or any code quality concern where the LLM might be overcoding.

    Also in 4 projects that use this

  • +8 more from Hussain-Elfalah

The file

We split this skill into the rules it gives an agent

3 rules. 0 are common, 2 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 11 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    If brand_color is not a valid hex, reject with an example of correct format.

    line 39
  2. Distinctive:

    If contrast ratio between generated text/background pairs falls below WCAG AA (4.5:1), auto-adjust and warn.

    line 40
  3. Distinctive:

    If the requested format is unsupported, list supported formats and ask the user to choose.

    line 41

“Common” is measured: kept by at least 6 in 10 of the 11 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

UI Design System

Generate and maintain scalable design system artifacts.

Core Capabilities

  • Design token generation (colors, typography, spacing, shadows, animation).
  • Component system architecture and documentation.
  • Responsive design calculations (breakpoints, fluid scales).
  • Accessibility compliance checks (contrast ratios, focus states).
  • Developer handoff in multiple formats.

Token Generator

Run: python scripts/design_token_generator.py [brand_color] [style] [format]

ArgumentValuesDefault
brand_colorAny hex color (e.g., #3B82F6)Required
stylemodern, classic, playfulmodern
formatjson, css, scssjson

Generated Tokens

  • Color palette: Primary, secondary, neutral, semantic (success/warning/error/info) with 50-950 shades.
  • Typography scale: Modular scale (1.25 ratio for modern, 1.333 for classic, 1.2 for playful).
  • Spacing: 8pt grid system (4, 8, 12, 16, 24, 32, 48, 64, 96).
  • Shadows: 5-level elevation scale.
  • Breakpoints: sm (640), md (768), lg (1024), xl (1280), 2xl (1536).

Error Handling

  • If brand_color is not a valid hex, reject with an example of correct format.
  • If contrast ratio between generated text/background pairs falls below WCAG AA (4.5:1), auto-adjust and warn.
  • If the requested format is unsupported, list supported formats and ask the user to choose.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free