Skip to content
mcp/skillhub

Agent Skill

UI Styling skill

ui-stylingUI UX Pro Max.claude/skills/ui-styling/SKILL.md

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.

139kMIT

always on

90 tokname + description

once used

2,396 tokSKILL.md body

bundled files

974 scripts

repo stars

139kGitHub

Install the UI Styling skill

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

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

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/ui-styling ~/.claude/skills/ui-styling

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 description90 tok
When the agent uses itThe SKILL.md instructions2,396 tok
Only if opened97 bundled files (5.5 MB)varies

Until it is used, ui-styling costs about 15× 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.

  • UI Styling Skill
  • Reference
  • When to Use This Skill
  • Core Stack
  • Component Layer: shadcn/ui
  • Styling Layer: Tailwind CSS
  • Visual Design Layer: Canvas
  • Script Paths
  • Quick Start
  • Component + Styling Setup
  • Alternative: Tailwind-Only Setup
  • Component Library Guide
  • Theme & Customization
  • Accessibility Patterns
  • Tailwind Utilities
  • Responsive Design
  • Tailwind Customization
  • Visual Design System
  • Utility Scripts
  • shadcnadd.py
  • tailwindconfiggen.py
  • Best Practices
  • Reference Navigation
  • Common Patterns

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. design-systemnextlevelbuilder/ui-ux-pro-max-skill

    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.

    139k1052 tok idle · 1,736 in use
  6. 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