Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
Creates professional, accessible interfaces with sophisticated interactive elements like chat, terminals, and code displays. Use when building polished UIs that need developer-focused features and streaming content.
/plugin marketplace add rand/cc-polymath/plugin install cc-polymath@cc-polymath-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdSUMMARY.txtfoundation/colors-and-spacing.mdfoundation/layout-patterns.mdfoundation/typography.mdimplementation/components-and-accessibility.mdimplementation/performance.mdimplementation/testing-and-qa.mdinteractive/chat-and-messaging.mdinteractive/diffs-and-logs.mdinteractive/streaming-and-loading.mdinteractive/terminals-and-code.mdreference/anti-patterns.mdreference/design-systems.mdreference/tools-and-libraries.mdWorld-class design is intentional, accessible, and delightful. Every element serves a purpose, every interaction feels natural, and the experience adapts gracefully across contexts.
Core Principles:
Use this skill when:
Follow this workflow for optimal results:
Map User Experience:
# Create flow diagrams with Graphviz
cat > user-flow.dot << 'EOF'
digraph UserFlow {
Start -> "Observe State"
"Observe State" -> "Orient Understanding"
"Orient Understanding" -> "Decide Action"
"Decide Action" -> "Act Execute"
"Act Execute" -> "Observe State" [label="OODA loop"]
}
EOF
dot -Tpng user-flow.dot -o user-flow.png
OODA Loop Mapping: For each major user goal, optimize the cycle:
Document States:
List Affordances: Identify every UI element needed:
Before Building Custom Components:
Establish Visual System:
Read the detailed foundation guides:
foundation/typography.md - Font selection (Geist, JetBrains Mono), scales, loadingfoundation/colors-and-spacing.md - Color palettes, spacing systems, dark modefoundation/layout-patterns.md - Grids, containers, white space, responsive breakpointsQuick Reference:
For sophisticated interactive features, reference the specialized guides:
Chat & Messaging:
interactive/chat-and-messaging.md when building conversational interfacesTerminals & Code Display:
interactive/terminals-and-code.md for terminal emulators, syntax highlighting, semantic highlightingStreaming & Loading:
interactive/streaming-and-loading.md for progressive loading, streaming text, optimistic updatesDiffs & Logs:
interactive/diffs-and-logs.md for version control UIs, log viewersBuild Components:
implementation/components-and-accessibility.md for component architecture and WCAG complianceOptimize Performance:
implementation/performance.md for Core Web Vitals optimizationTest & Refine:
implementation/testing-and-qa.md for comprehensive testing approachPre-Launch Checklist:
Need to understand the basics?
→ Read foundation/ files first
Building chat or messaging?
→ Read interactive/chat-and-messaging.md
Building terminal or code editor?
→ Read interactive/terminals-and-code.md
Need streaming or loading states?
→ Read interactive/streaming-and-loading.md
Building diffs or log viewers?
→ Read interactive/diffs-and-logs.md
Ready to implement?
→ Read implementation/ files
Need tools or want to avoid mistakes?
→ Read reference/ files
shadcn/ui (https://ui.shadcn.com) - PRIMARY CHOICE
daisyUI (https://daisyui.com)
HeroUI (https://heroui.com)
See reference/design-systems.md for detailed comparison and usage patterns.
Use these fonts exclusively:
Geist (https://vercel.com/font) - For ALL interface text
JetBrains Mono (https://jetbrains.com/mono) - For ALL code/technical content
Never mix multiple sans-serif or multiple monospace fonts.
See foundation/typography.md for complete guidance.
Study these for design patterns:
Avoid these mistakes:
<div> for everythingSee reference/anti-patterns.md for complete list with explanations.
For simple interfaces (single page, few components):
For complex interfaces (multiple features, interactive elements):
For developer tools or technical interfaces:
If unsure where to start:
If design feels off:
If implementation is slow:
elegant-design/
├── SKILL.md (you are here)
├── foundation/
│ ├── typography.md (fonts, scales, loading)
│ ├── colors-and-spacing.md (palettes, spacing system, dark mode)
│ └── layout-patterns.md (grids, containers, responsive)
├── interactive/
│ ├── chat-and-messaging.md (chat UIs, streaming messages)
│ ├── terminals-and-code.md (terminals, syntax highlighting)
│ ├── streaming-and-loading.md (progressive loading, skeletons)
│ └── diffs-and-logs.md (version control UI, log viewers)
├── implementation/
│ ├── components-and-accessibility.md (architecture, WCAG)
│ ├── performance.md (Core Web Vitals, optimization)
│ └── testing-and-qa.md (testing checklist, tools)
└── reference/
├── design-systems.md (shadcn, daisyUI, HeroUI details)
├── tools-and-libraries.md (complete tool list)
└── anti-patterns.md (what not to do, with explanations)
World-class design is invisible. Users shouldn't notice your clever solutions - they should simply accomplish their goals effortlessly and maybe smile along the way.
Start simple, iterate based on real use. Don't build everything at once. Build what's needed, test it, refine it, then move to the next feature.
Accessibility is not optional. Design for keyboard navigation, screen readers, and sufficient contrast from the start. Retrofitting is much harder.
Performance matters. A beautiful interface that's slow is a bad interface. Measure performance early and often.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.