By svengraziani
UI design skills: color palettes, typography, component patterns, design principles, and WCAG 2.2 accessibility guidelines
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin svengraziani-ui-design12 ready-to-use color palettes with exact hex and HSL values in a 50-900 shade scale. Covers primary, neutral, and supporting colors (cyan, blue, purple, teal, red, green, pink, indigo, warm grey, cool grey, blue grey). Apply whenever picking colors, defining CSS custom properties or Tailwind theme colors, choosing background/text/border colors, setting up a design system color scale, or needing semantic colors for error/warning/success states.
Reference patterns with CSS values for: buttons, form inputs, badges, breadcrumbs, pagination, horizontal/vertical/mobile navigation, tables, cards, modals, alerts, pricing pages, hero sections, feature grids, testimonials, footers, activity feeds, checkout pages, dropdowns, and empty states. Apply whenever implementing, styling, or reviewing a specific UI component — provides concrete sizing, padding, shadow, and layout values rather than abstract principles.
Curated typeface catalog with weights, licensing, and CSS snippets for sans-serif fonts (Inter, Roboto, Open Sans, Proxima Nova, Graphik, Futura, Lato, IBM Plex Sans) and serif fonts (Merriweather, EB Garamond, Crimson Pro, Alegreya). Includes font pairing tables and the system font stack. Apply whenever choosing a font-family, setting up CSS font stacks, pairing headline and body typefaces, or deciding between free and commercial fonts for a project.
Rules for visual hierarchy, whitespace, spacing scales, layout, depth (shadows, elevation), and polish. Apply whenever writing or reviewing CSS/HTML styles, deciding on padding/margin/gap values, choosing shadow levels, structuring page layouts, handling responsive design, or improving the overall look and feel of a UI. NOT for picking specific colors (use ui-design:color-palettes), fonts (use ui-design:font-recommendations), building specific components (use ui-design:component-gallery), or accessibility/WCAG compliance (use ui-design:wcag-2.2).
WCAG 2.2 accessibility guidelines with actionable implementation rules for web developers. Covers contrast ratios, keyboard navigation, focus management, ARIA, screen readers, alt text, touch targets, form validation, color blindness, reduced motion, semantic HTML, and landmarks. Apply whenever writing HTML/CSS/JS, building forms, handling focus, choosing colors for accessibility, implementing interactive components, or reviewing code for a11y compliance. Includes all Level A + AA criteria and new 2.2 additions (focus not obscured, dragging alternatives, target size minimum, redundant entry, accessible authentication, consistent help).
A collection of Claude Code skills that provide UI design knowledge — color palettes, typography, component patterns, layout principles, and WCAG 2.2 accessibility guidelines.
Install as a plugin and Claude Code will automatically apply the right design skill when you're working on UI code.
| Skill | What it covers |
|---|---|
| color-palettes | 12 color palettes with hex/HSL values in a 50–900 shade scale. Primary, neutral, and supporting colors. |
| font-recommendations | Curated typeface catalog with weights, licensing, CSS snippets, and font pairing tables. |
| component-gallery | Reference patterns with concrete CSS values for buttons, forms, cards, modals, navs, tables, and more. |
| ui-design-principles | Visual hierarchy, whitespace, spacing scales, layout, shadows/elevation, and responsive design. |
| wcag-2.2 | WCAG 2.2 Level A + AA accessibility guidelines with actionable implementation rules. |
Add this repository as a Claude Code plugin:
claude plugin marketplace add svengraziani/ui-design
Or clone and reference it in your project's .claude/plugins.json.
The skills are loaded automatically based on context. When you ask Claude Code to work on UI code, it will apply the relevant skill. For example:
You can also invoke skills directly with slash commands (e.g. /color-palettes).
Sven Graziani
UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 15 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Nuxt, Jetpack Compose). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Team-oriented workflow plugin with role agents, 27 specialist agents, ECC-inspired commands, layered rules, and hooks skeleton.
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
Upstash Context7 MCP server for up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your LLM context.
Comprehensive startup business analysis with market sizing (TAM/SAM/SOM), financial modeling, team planning, and strategic research
This skill should be used when users need to generate ideas, explore creative solutions, or systematically brainstorm approaches to problems. Use when users request help with ideation, content planning, product features, marketing campaigns, strategic planning, creative writing, or any task requiring structured idea generation. The skill provides 30+ research-validated prompt patterns across 14 categories with exact templates, success metrics, and domain-specific applications.