elegant-design

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.

Designing Elegant Interfaces

Philosophy

World-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:

When to Use This Skill

Use this skill when:

Design Process Workflow

Follow this workflow for optimal results:

1. Discovery & Planning (15-30 min)

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:

  1. Observe - What information does the user need?
  2. Orient - How do they make sense of it?
  3. Decide - What choices are available?
  4. Act - How do they execute?

Document States:

List Affordances: Identify every UI element needed:

Before Building Custom Components:

  1. Search shadcn/ui first (https://ui.shadcn.com)
  2. Check daisyUI (https://daisyui.com)
  3. Explore HeroUI (https://heroui.com)
  4. Build custom only when necessary

2. Design Foundation (20-40 min)

Establish Visual System:

Read the detailed foundation guides:

Quick Reference:

3. Interactive Elements (30-60 min)

For sophisticated interactive features, reference the specialized guides:

Chat & Messaging:

Terminals & Code Display:

Streaming & Loading:

Diffs & Logs:

4. Implementation (1-3 hours)

Build Components:

Optimize Performance:

Test & Refine:

5. Validation & Refinement

Pre-Launch Checklist:

Quick Decision Tree

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

Design Systems Priority

  1. shadcn/ui (https://ui.shadcn.com) - PRIMARY CHOICE
  1. daisyUI (https://daisyui.com)
  1. HeroUI (https://heroui.com)

See reference/design-systems.md for detailed comparison and usage patterns.

Typography Standards

Use these fonts exclusively:

Never mix multiple sans-serif or multiple monospace fonts.

See foundation/typography.md for complete guidance.

Inspiration Sites

Study these for design patterns:

Common Anti-Patterns

Avoid these mistakes:

See reference/anti-patterns.md for complete list with explanations.

Iterative Development

For simple interfaces (single page, few components):

  1. Start with foundation (read foundation files)
  2. Use design system components
  3. Test and refine

For complex interfaces (multiple features, interactive elements):

  1. Map flows and create diagrams
  2. Establish foundation (read foundation files)
  3. Build one feature at a time (read relevant interactive files)
  4. Test each feature before moving to next
  5. Optimize and polish (read implementation files)

For developer tools or technical interfaces:

  1. Map OODA loops carefully
  2. Read ALL interactive files (chat, terminals, code, streaming, diffs, logs)
  3. Focus on keyboard navigation and performance
  4. Test with actual technical content

Getting Help

If unsure where to start:

  1. Read the philosophy section above
  2. Follow the Design Process Workflow
  3. Reference specific guides as needed

If design feels off:

  1. Check against principles (clarity, consistency, performance)
  2. Review anti-patterns list
  3. Study inspiration sites
  4. Test with real users

If implementation is slow:

  1. Use design system components first
  2. Don't build what exists
  3. Focus on one feature at a time
  4. Test early and often

File Organization

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)

Remember

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.