Skip to content
mcp/skillhub

Agent Skill

Design System skill

design-systemUI UX Pro Max.claude/skills/design-system/SKILL.md

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

139kMIT

always on

52 tokname + description

once used

1,736 tokSKILL.md body

bundled files

2610 scripts

repo stars

139kGitHub

Install the Design System skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill
mkdir -p ~/.claude/skills
cp -R /tmp/ui-ux-pro-max-skill/.claude/skills/design-system ~/.claude/skills/design-system

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description52 tok
When the agent uses itThe SKILL.md instructions1,736 tok
Only if opened26 bundled files (171 KB)varies

Until it is used, design-system costs about 26× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 13 skills from nextlevelbuilder/ui-ux-pro-max-skill would load 1,010 tokens of descriptions. Skills vs MCP study

Checks

  • Ships scripts the agent can run. Read them before installing.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Design System
  • When to Use
  • Token Architecture
  • Three-Layer Structure
  • Script Paths
  • Quick Start
  • References
  • Component Spec Pattern
  • Scripts
  • Templates
  • Integration
  • Slide System
  • Source of Truth
  • Slide Search (BM25)
  • Decision System CSVs
  • Contextual Decision Flow
  • Pattern Breaking (Duarte Sparkline)
  • Slide Requirements
  • Chart.js Integration
  • Token Compliance
  • Reference Implementation
  • Command
  • Best Practices

More skills from nextlevelbuilder/ui-ux-pro-max-skill

All skills in this repo
  1. ui-ux-pro-maxnextlevelbuilder/ui-ux-pro-max-skill

    UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

    408k18114 tok idle · 3,683 in use
  2. banner-designnextlevelbuilder/ui-ux-pro-max-skill

    Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage.

    139k99 tok idle · 1,541 in use
  3. brandnextlevelbuilder/ui-ux-pro-max-skill

    Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

    139k535 tok idle · 844 in use
  4. designnextlevelbuilder/ui-ux-pro-max-skill

    Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

    139k11147 tok idle · 3,379 in use
  5. slidesnextlevelbuilder/ui-ux-pro-max-skill

    Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

    139k25 tok idle · 322 in use
  6. ui-stylingnextlevelbuilder/ui-ux-pro-max-skill

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

    139k490 tok idle · 2,396 in use