Design
UI/UX direction, visual design, and design systems
dark-mode
by dylantarre
Implements theme switching with semantic tokens and prefers-color-scheme detection. Use when adding dark mode, light/dark themes, color scheme toggles, or converting hardcoded colors to theme-aware tokens.
icon-system
by dylantarre
Implements scalable icon systems with SVG sprites or React/Vue components. Use when setting up icon libraries, creating icon sizing tokens, optimizing SVGs, or building accessible icon buttons.
spacing-scale
by dylantarre
Generates consistent spacing tokens using base values and ratios. Use when creating margin/padding systems, gap tokens, or layout spacing. Outputs CSS custom properties, Tailwind config, or JSON tokens.
compound-components
by dylantarre
Builds accessible composable components using Radix/Headless UI patterns. Use when creating Select, Dialog, Tabs, Accordion, Menu, or Dropdown components with proper ARIA, keyboard navigation, and focus management.
UI/UX Pro Max - Design Intelligence
by joneqian
Claude Skill 合集
tdesign-miniprogram
by joneqian
TDesign Mini Program UI component library by Tencent. Use for building WeChat mini apps with TDesign components, design system, and best practices.
frontend-design
by JunhuaLiu1
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
gc-review-branding
by dougkeefe
Review code for Government of Canada branding compliance - verifies Federal Identity Program symbols, typography, design tokens, and GC Design System patterns
Brand
by b1rdmania
Complete brand development system with emotive foundation. Triggers on requests for brand identity, logos, visual systems, or design guidelines. Creates distinctive, anti-AI-slop design from strategy through delivery.
animation-principles
by dylantarre
Applies Disney's 12 animation principles to UI motion design. Use when improving animation quality, designing micro-interactions, creating easing curves, or making transitions feel natural and purposeful.
create-remotion-geist
by vercel-labs
Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's visual style - dark theme, spring animations, Geist typography, and the Geist color palette.
UI/UX Pro Max - Design Intelligence
by intrusive-memory
Claude Code skills for iOS/macOS development, UI/UX design, and automation
brand-guidelines
by JayZeeDesign
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
ui-design
by JayZeeDesign
Use this to design a nice UI in single html as inspiration & UI exploration.
frontend-design
by ttmouse
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
academic-paper-writing
by ouyangyipeng
Guides AI agents to write high-quality academic papers following top-tier conference standards. Use this skill when: - Writing or drafting academic papers for AI/systems conferences - Designing paper structure, sections, or experimental methodology - Creating figures, tables, or data visualizations for papers - Performing literature review or managing citations - Responding to reviewer comments or preparing rebuttal - Any task involving academic writing workflow Do NOT use for: - Non-academic writing (blogs, marketing copy, documentation) - Papers outside AI/systems domains without adaptation - Simple formatting tasks that don't require domain expertise
design-system
by oakoss
'Builds scalable design systems with tokens, theming, and component architecture. Use when creating design token hierarchies, theming systems, component variant patterns, or accessibility foundations. Use for design tokens, CVA variants, dark mode, multi-brand theming, Radix headless UI, Storybook documentation, and governance.'
brand-identity-wizard
by cdeistopened
Create a comprehensive brand identity document that other skills can reference. Use this wizard before running newsletter, podcast, or content skills that need brand context. Outputs a brand-identity.md file with persona, voice, audience, values, and messaging.
figma-developer
by oakoss
'Extracts design data from Figma via the REST API and converts designs to React code. Use when syncing Figma tokens to CSS variables, exporting icons as SVG components, generating code from Figma designs, or automating design-to-code workflows. Use for design token extraction, icon export, component generation, and CI-based Figma sync.'
apple-ui-designer
by heyman333
Redesign mobile app UI to feel unmistakably Apple-like, iOS-forward, and native. Use this skill when building iOS apps, applying Apple Human Interface Guidelines, or creating native-feeling mobile interfaces with SF Pro typography, translucency, and system-like components.
wireframe-generator
by Wire-DSL
Generate Wire DSL code for wireframes and UI prototypes
design-systems
by Logos-Liber
Design system principles, component libraries, typography, color theory, spacing systems, and design tokens
frontend-design
by b1rdmania
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
designer
by joeseesun
Transform frontend designs with uncompromising perfectionism. Use when redesigning UI/UX, improving visual aesthetics, creating polished interfaces, or when user mentions design improvements, beautification, visual polish.