Design
UI/UX direction, visual design, and design systems
hugging-face-ui-skills
by ihlamury
Hugging Face's UI design system. Use when building interfaces inspired by Hugging Face's aesthetic - dark mode, Inter font, 4px grid.
coda-ui-skills
by ihlamury
Coda's UI design system. Use when building interfaces inspired by Coda's aesthetic - light mode, Inter font, 4px grid.
lattice-ui-skills
by ihlamury
Lattice's UI design system. Use when building interfaces inspired by Lattice's aesthetic - light mode, Inter font, 4px grid.
arc-ui-skills
by ihlamury
Arc's UI design system. Use when building interfaces inspired by Arc's aesthetic - light mode, Inter font, 4px grid.
miro-ui-skills
by ihlamury
Miro's UI design system. Use when building interfaces inspired by Miro's aesthetic - light mode, Inter font, 4px grid.
mem-ui-skills
by ihlamury
Mem's UI design system. Use when building interfaces inspired by Mem's aesthetic - light mode, Inter font, 4px grid.
loops-ui-skills
by ihlamury
Loops's UI design system. Use when building interfaces inspired by Loops's aesthetic - light mode, Inter font, 4px grid.
linear-ui-skills
by ihlamury
Linear's UI design system. Use when building interfaces inspired by Linear's aesthetic - dark mode, Inter font, 4px grid.
figma-ui-skills
by ihlamury
Figma's UI design system. Use when building interfaces inspired by Figma's aesthetic - light mode, Inter font, 4px grid.
html-explainer
by ds-vibe
Build a polished, lightly-interactive single-page web explainer for educational, informational, or explanatory content. Use when the user wants to explain, teach, summarize, or visualize a topic, concept, policy, dataset, process, or body of knowledge as an interactive web page — emphasizing progressive complexity, strong visual design, source-grounded accuracy, and an iterative quality loop. Triggers on requests like "make an interactive explainer / guide / walkthrough / one-pager," "turn this into a visual web page people can explore," or "help people get acquainted with X and drill down."
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 futuregerald
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.
ui-design
by futuregerald
Practical UI design principles for developers and non-designers. Use when creating web interfaces, components, dashboards, landing pages, or any visual design work. Covers hierarchy, spacing, typography, color, depth, and polish. Based on Refactoring UI methodology.
optics-context
by RoleModel
Use the Optics design framework for styling applications. Apply Optics classes for layout, spacing, typography, colors, and components. Use when working on CSS, styling views, or implementing design system guidelines.
bem-structure
by RoleModel
Expert guidance for writing, refactoring, and structuring CSS using BEM (Block Element Modifier) methodology. Provides proper CSS class naming conventions, component structure, and Optics design system integration for maintainable, scalable stylesheets.
design-principles
by futuregerald
Enforce a precise, minimal design system inspired by Linear, Notion, and Stripe. Use this skill when building dashboards, admin interfaces, or any UI that needs Jony Ive-level precision - clean, modern, minimalist with taste. Every pixel matters.
go-google-style-decisions
by metalagman
Expertise in Go programming decisions according to the Google Go Style Guide. Focuses on specific choices for naming, error handling, and language usage.
go-google-style-guide
by metalagman
Expertise in Go programming according to the Google Go Style Guide. Use when the user needs to write, refactor, or review Go code for clarity, simplicity, and maintainability. This skill ensures adherence to Google's official Go idioms, formatting, and the "Least Mechanism" principle.
go-uber-style-guide
by metalagman
Use this skill to write, refactor, or review Go code according to the Uber Go Style Guide. It ensures strict adherence to correctness, safety, and idiomatic patterns.
wireframe
by Magdoub
Progressive UX generation — Phase 1 generates 5 B&W wireframe options instantly (1 safe + 4 exploratory), then Phase 2 renders Clean + Polished color variants via 5 parallel Task agents (one per option). Supports wireframes-only or wireframes+visuals. Extracts optimization intent from arguments when present. Maintains persistent design context. Use when user says "wireframe", "prototype", "UX options", or "layout exploration".
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.
storybook
by Tyler-R-Kendrick
Use when documenting, developing, or testing UI components with Storybook. Covers CSF3, CSF Factories, play functions, Args, interaction testing, and addon configuration. USE FOR: Storybook stories (CSF3 and CSF Factories), play functions, Args and ArgTypes, interaction testing, Storybook addons, visual regression testing, component documentation DO NOT USE FOR: design token authoring (use design-tokens), token transformation (use style-dictionary), Figma design handoff (use figma), cross-framework component compilation (use mitosis)