New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Design References

by MadAppGang in MadAppGang/claude-code

Predefined design system references for UI reviews. An agent skill from MadAppGang/claude-code.

MITAuto-check passedFrontend & Design

Install Design References

skills CLI
$ npx skills add MadAppGang/claude-code --skill design-references -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install MadAppGang/claude-code design-references --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/MadAppGang/claude-code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/dev/skills/design/design-references .claude/skills/design-references && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
design-references
GitHub stars
285
Token cost
~2.8k tokens
SKILL.md length
1,107 words
Files
1
Skills in repo
69
Repo updated
First seen
Licence
MIT

At a glance

Predefined design system references for UI reviews. An agent skill from MadAppGang/claude-code.

  • Works in 3 steps: Adaptive & Accessible - Responsive… → Personal & Customizable - Dynamic color,… → Expressive - Motion, shape, and color…
  • Conducting design reviews against established design systems
  • SKILL.md covers Overview, Available Design Systems and Usage in Reviews
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Design References is an agent skill from MadAppGang/claude-code. Predefined design system references for UI reviews. Includes Material Design 3, Apple Human Interface Guidelines, Tailwind UI, Ant Design, and Shadcn/ui. Use when conducting design reviews against established design systems.

Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design systems, CSS and styling and iOS development. It works with Ant Design, Tailwind CSS and shadcn/ui. The repository describes itself as: claude code plugins marketplace. The licence is MIT.

When your agent uses it

  • Conducting design reviews against established design systems
  • Tasks that involve Design systems
  • Tasks that involve CSS and styling

Example prompts

  • “/design-references”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Adaptive & Accessible - Responsive across devices, accessible to all
  2. Personal & Customizable - Dynamic color, personalization
  3. Expressive - Motion, shape, and color express brand

What it can do on your machine

Read from SKILL.md and the folder at commit 6097ad4. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • m3.material.io
    • developer.apple.com
    • tailwindui.com
    • ant.design
    • ui.shadcn.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Design References loads about 2.8k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 1,107 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~61
When it runs · the whole SKILL.md, loaded when a task matches
~2.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from MadAppGang/claude-code at commit 6097ad4, republished under its MIT licence (© MadAppGang). 1,107 words, ~2,770 tokens.

Download SKILL.mdSave it as .claude/skills/design-references/SKILL.md (or your agent's skills folder).
name
design-references
description
Predefined design system references for UI reviews. Includes Material Design 3, Apple Human Interface Guidelines, Tailwind UI, Ant Design, and Shadcn/ui. Use when conducting design reviews against established design systems.
version
1.0.0

Design References Skill

Overview

This skill provides predefined design system references that the ui agent can use when reviewing designs. Each reference includes design principles, color guidelines, typography rules, spacing patterns, and component patterns.

Available Design Systems

Material Design 3 (Google)

Reference ID: material-3 Official URL: https://m3.material.io/

Design Principles
  1. Adaptive & Accessible - Responsive across devices, accessible to all
  2. Personal & Customizable - Dynamic color, personalization
  3. Expressive - Motion, shape, and color express brand
Color System
  • Dynamic Color - Colors derived from user wallpaper or brand
  • Tonal Palettes - 13 tones per color (0-100)
  • Color Roles:
    • Primary: Main brand color
    • Secondary: Accent elements
    • Tertiary: Contrast and balance
    • Error: Destructive actions
    • Surface: Backgrounds and containers
    • On-*: Text/icon colors on surfaces

Key Metrics:

  • Text contrast: 4.5:1 minimum (WCAG AA)
  • Large text contrast: 3:1 minimum
  • Non-text contrast: 3:1 minimum
Typography

Type Scale (Default):

RoleSizeWeightLine Height
Display Large57sp40064sp
Display Medium45sp40052sp
Display Small36sp40044sp
Headline Large32sp40040sp
Headline Medium28sp40036sp
Headline Small24sp40032sp
Title Large22sp40028sp
Title Medium16sp50024sp
Title Small14sp50020sp
Body Large16sp40024sp
Body Medium14sp40020sp
Body Small12sp40016sp
Label Large14sp50020sp
Label Medium12sp50016sp
Label Small11sp50016sp

Font: Roboto (sans-serif)

Spacing

Baseline Grid: 4dp Common Values: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128

Component Patterns
  • Buttons: Filled, Outlined, Text, Elevated, Tonal
  • Cards: Elevated, Filled, Outlined
  • Navigation: Rail, Bar, Drawer
  • Inputs: Filled, Outlined
  • Dialogs: Basic, Full-screen, Date picker
Review Checklist
  • Dynamic color theming applied correctly
  • Type scale follows M3 specs
  • 4dp baseline grid followed
  • Touch targets minimum 48dp
  • Elevation levels correct (0-5)
  • Shape scale appropriate (Extra small to Extra large)
Apple Human Interface Guidelines (iOS/macOS)

Reference ID: apple-hig Official URL: https://developer.apple.com/design/human-interface-guidelines/

Design Principles
  1. Clarity - Text readable, icons precise, ornaments subtle
  2. Deference - Content over chrome, minimal UI
  3. Depth - Visual layers, motion conveys hierarchy
Color System

System Colors:

ColorLight ModeDark ModeUsage
Blue#007AFF#0A84FFLinks, interactive elements
Green#34C759#30D158Success, positive actions
Indigo#5856D6#5E5CE6Accent
Orange#FF9500#FF9F0AWarnings, attention
Pink#FF2D55#FF375FAccent
Purple#AF52DE#BF5AF2Accent
Red#FF3B30#FF453ADestructive, errors
Teal#5AC8FA#64D2FFAccent
Yellow#FFCC00#FFD60AWarnings

Semantic Colors:

  • Label (Primary, Secondary, Tertiary, Quaternary)
  • Fill (Primary through Quaternary)
  • Background (Primary, Secondary, Tertiary)
  • Separator
Typography

SF Pro (San Francisco):

StyleSizeWeightLeading
Large Title34ptBold41pt
Title 128ptRegular34pt
Title 222ptRegular28pt
Title 320ptRegular25pt
Headline17ptSemi-Bold22pt
Body17ptRegular22pt
Callout16ptRegular21pt
Subheadline15ptRegular20pt
Footnote13ptRegular18pt
Caption 112ptRegular16pt
Caption 211ptRegular13pt
Spacing

iOS Standard Margins: 16pt (compact), 20pt (regular) macOS Standard Margins: 20pt

Component Patterns
  • Navigation: Tab Bar, Sidebar, Navigation Bar
  • Buttons: System, Custom, Icon-only
  • Lists: Plain, Grouped, Inset Grouped
  • Forms: Grouped sections with headers
Review Checklist
  • SF Pro or SF Mono fonts used
  • System colors or semantically appropriate custom colors
  • Touch targets minimum 44pt x 44pt
  • Standard margins respected
  • Navigation patterns match platform conventions
  • Dark mode support with proper semantic colors
Tailwind UI

Reference ID: tailwind-ui Official URL: https://tailwindui.com/

Design Principles
  1. Utility-First - Compose styles from atomic classes
  2. Responsive - Mobile-first, breakpoint prefixes
  3. Consistent - Design tokens as class names
Color System

Tailwind Colors (50-950 shades):

  • Slate, Gray, Zinc, Neutral, Stone (Grays)
  • Red, Orange, Amber, Yellow (Warm)
  • Lime, Green, Emerald, Teal (Cool greens)
  • Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose

Usage Patterns:

  • Primary: blue-600 (buttons, links)
  • Secondary: gray-600 (secondary text)
  • Success: green-600
  • Warning: amber-600
  • Error: red-600
  • Background: white / gray-50
  • Surface: gray-100 / gray-800
Typography

Font Scale:

ClassSizeLine Height
text-xs12px16px
text-sm14px20px
text-base16px24px
text-lg18px28px
text-xl20px28px
text-2xl24px32px
text-3xl30px36px
text-4xl36px40px
text-5xl48px48px
text-6xl60px60px
text-7xl72px72px
text-8xl96px96px
text-9xl128px128px

Font Weights: thin(100) to black(900)

Show full SKILL.md (449 more words)Show less
Spacing Scale
ClassValue
00px
px1px
0.52px
14px
28px
312px
416px
520px
624px
832px
1040px
1248px
1664px
2080px
2496px
Component Patterns
  • Buttons: Primary, Secondary, Soft, Outline
  • Forms: Stacked, Inline, with validation states
  • Cards: Simple, with header, with footer
  • Navigation: Navbar, Sidebar, Tabs
Review Checklist
  • Spacing uses Tailwind scale (4px base)
  • Typography uses Tailwind type scale
  • Colors from Tailwind palette
  • Consistent hover/focus states
  • Responsive breakpoints (sm, md, lg, xl, 2xl)
  • Dark mode with dark: variants
Ant Design

Reference ID: ant-design Official URL: https://ant.design/

Design Principles
  1. Natural - Align with user mental models
  2. Certain - Predictable, consistent behavior
  3. Meaningful - Purpose-driven design
  4. Growing - Support user skill progression
Color System

Functional Colors:

RoleHexUsage
Primary#1677ffBrand, primary actions
Success#52c41aPositive feedback
Warning#faad14Warnings, attention
Error#ff4d4fErrors, destructive
Info#1677ffInformational

Neutral Colors: 13 shades of gray (#fff to #000)

Typography

Font Family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue

RoleSizeWeight
h138px600
h230px600
h324px600
h420px600
h516px600
Base14px400
Small12px400
Spacing

Base Unit: 4px Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48

Component Patterns
  • Forms: Horizontal, Vertical, Inline layouts
  • Tables: Sortable, Filterable, Paginated
  • Modals: Confirm, Info, with footer
  • Data Entry: Extensive input types
Review Checklist
  • 14px base font size
  • 4px spacing base unit
  • Functional colors for feedback
  • Form layouts consistent
  • Table patterns for data display
  • Enterprise-grade density (compact option)
Shadcn/ui

Reference ID: shadcn-ui Official URL: https://ui.shadcn.com/

Design Principles
  1. Copy-Paste - Components you own, not import
  2. Accessible - Built on Radix UI primitives
  3. Customizable - CSS variables for theming
  4. Composable - Small, focused components
Color System

CSS Variables Based:

css
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
Typography

Inter (default) or system font stack

VariantSizeWeightLeading
h136px80040px
h230px60036px
h324px60032px
h420px60028px
p16px40028px
lead20px40028px
large18px60028px
small14px50020px
muted14px40020px
Spacing

Tailwind-based: 4px base (matches Tailwind scale)

Component Patterns
  • Buttons: Default, Secondary, Destructive, Outline, Ghost, Link
  • Forms: Built on Radix primitives
  • Dialogs: AlertDialog, Dialog, Sheet
  • Data Display: Table, DataTable, Cards
Review Checklist
  • CSS variables for theming
  • Radix UI primitives for accessibility
  • Border radius using --radius variable
  • Focus rings using --ring variable
  • Consistent variant naming
  • Dark mode via class strategy

Usage in Reviews

Selecting a Design Reference

The ui agent will check for style in this order:

  1. Project Style (.claude/design-style.md) - Highest priority
  2. Predefined Reference (via Design Reference: directive or user selection)
  3. Auto-detect (if recognizable patterns found)
  4. Generic Best Practices (fallback)
Review with Specific Reference
Task: ui

Review this dashboard screenshot against Material Design 3 guidelines.

Design Reference: material-3

Image: screenshots/dashboard.png

Write review to: ${SESSION_PATH}/reviews/design-review/gemini.md
Combining Project Style + Reference
Task: ui

Review using:
- Project Style: .claude/design-style.md (brand colors, custom tokens)
- Base Reference: shadcn-ui (component patterns, accessibility)

Image: screenshots/form.png

© MadAppGang, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugins/dev/skills/design/design-references of MadAppGang/claude-code.

Open the folder on GitHubat commit 6097ad4

Compare with similar skills

Design References next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Design References compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design References this skillMadAppGang/claude-code285—~2.8kAutomated safety check: PassMIT
Tailwind V4 Shadcnever-works/ever-works1622 repos~3.8kAutomated safety check: PassMIT
Nextjs StylingHoangNguyen0403/agent-skills-standard572—~703Automated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons19018 repos~11kAutomated safety check: NotesCustom licence
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT

Similar skills

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    162 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed

  • Nextjs Styling

    HoangNguyen0403/agent-skills-standard

    Implement zero-runtime CSS with Tailwind, CSS Modules, and the cn() utility for RSC-compatible styling in Next.js.

    572 GitHub stars~703 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    190 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Avoid AI Design

    sunkaifei/FlyCms

    Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the…

    656 GitHub stars~3.5k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

More from MadAppGang/claude-code

All 69 skills in this repo

  • Content Brief

    MadAppGang/claude-code

    Content brief template and creation methodology for SEO-optimized content.

    285 GitHub starsUsed in 1 repo~959 tokens
    Auto-check passed

  • Context Detection

    MadAppGang/claude-code

    A skill your agent uses when detecting project technology stack from files/configs/directory structure, auto-loading framework-specific skills, or analyzing multi-stack fullstack projects (e.g…

    285 GitHub stars~5.4k tokensUpdated 7 mo ago
    Auto-check passed

  • Content Optimizer

    MadAppGang/claude-code

    On-page SEO optimization techniques including keyword density, meta tags, heading structure, and readability.

    285 GitHub starsUsed in 1 repo~694 tokens
    Auto-check passed

  • Keyword Cluster Builder

    MadAppGang/claude-code

    Techniques for expanding seed keywords and clustering by topic and intent.

    285 GitHub starsUsed in 1 repo~674 tokens
    Auto-check passed

  • Serp Analysis

    MadAppGang/claude-code

    SERP analysis techniques for intent classification, feature identification, and competitive intelligence.

    285 GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

  • Agent Coordination Discipline

    MadAppGang/claude-code

    A skill your agent uses when deciding whether to launch an agent, selecting which agent to use, or coordinating multiple agents.

    285 GitHub stars~3.8k tokensUpdated 7 mo ago
    Auto-check passed

Works with

Categories

Questions about Design References

What does Design References do?

Predefined design system references for UI reviews. An agent skill from MadAppGang/claude-code. Design References is an agent skill from MadAppGang/claude-code. Predefined design system references for UI reviews.

When should I use Design References?

Design References fits situations like: conducting design reviews against established design systems; tasks that involve Design systems; tasks that involve CSS and styling.

How do I install Design References in Claude Code?

Run `npx skills add MadAppGang/claude-code --skill design-references -a claude-code`. Or copy the skill folder (plugins/dev/skills/design/design-references in MadAppGang/claude-code) into .claude/skills/design-references in your project. Claude Code loads it when a task matches its description.

How do I install Design References in Codex?

Run `npx skills add MadAppGang/claude-code --skill design-references -a codex`. Or copy the skill folder (plugins/dev/skills/design/design-references in MadAppGang/claude-code) into .agents/skills/design-references in your project. Codex loads it when a task matches its description.

Can I use Design References in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add MadAppGang/claude-code --skill design-references -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-references, .gemini/skills/design-references, .github/skills/design-references and .opencode/skills/design-references in your project.

What does Design References need to run?

SKILL.md names no scripts, command-line tools or credentials: Design References is instructions for the agent only.

Does Design References access the network?

SKILL.md names 5 domains. As links in the text: m3.material.io, developer.apple.com, tailwindui.com, ant.design and ui.shadcn.com. This is read from the text; nothing was executed.

Is Design References safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Design References use?

Design References is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Design References use?

About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Design References?

Skills that share tags, products or a category with Design References: Tailwind V4 Shadcn (ever-works/ever-works, 162 stars), Nextjs Styling (HoangNguyen0403/agent-skills-standard, 572 stars), UI Styling (Ohh-889/skyroc, 795 stars) and UI UX Pro Max (saoudi-h/solar-icons, 190 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design References?

MadAppGang (a GitHub organization) maintains it in MadAppGang/claude-code, which has 285 GitHub stars. The repository holds 69 skills in this directory. The repository was last updated on March 15, 2026.

Source: MadAppGang/claude-code on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.