Agent skill
web-interface-design
Use when designing or reviewing web UI, implementing forms/buttons/inputs, fixing visual hierarchy issues, creating color systems, building layouts, or when interface feels cluttered, hard to read, or users don't know what to click.
Install this agent skill to your Project
npx add-skill https://github.com/ratacat/claude-skills/tree/main/skills/web-interface-design
SKILL.md
Web Interface Design
Overview
Design exists to separate the primary from the secondary. Users should instantly recognize what matters. Good interface design is invisible—users accomplish goals without noticing the interface.
This skill orchestrates domain-specific reference files. Read only what you need for the task.
Reference File Index
| Task | Load Reference |
|---|---|
| Font sizes, line spacing, heading hierarchy, vertical rhythm | references/typography.md |
| Input fields, validation, checkboxes, radios, selects, textareas | references/forms-and-inputs.md |
| Button hierarchy, sizing, states, CTAs, ghost buttons | references/buttons.md |
| Color palettes, dark mode, tints/shades, state colors | references/color-systems.md |
| Navigation, cards, tabs, accordions, modals, tables, toasts | references/ui-components.md |
| Grids, spacing scales, responsive patterns, whitespace | references/layout-and-spacing.md |
| Focus techniques, hierarchy principles, action pyramid | references/visual-hierarchy.md |
| Contrast ratios, focus states, screen readers, WCAG | references/accessibility.md |
| CSS implementation patterns, variables, common styles | references/css-patterns.md |
Quick Decision: Which Reference?
What's the problem?
├─ Text hard to read, spacing feels off → typography.md
├─ Form not working well, validation issues → forms-and-inputs.md
├─ Users don't know what to click → buttons.md OR visual-hierarchy.md
├─ Colors look wrong, dark mode broken → color-systems.md
├─ Need nav/cards/tabs/modals/tables → ui-components.md
├─ Spacing inconsistent, layout cramped → layout-and-spacing.md
├─ Everything competes for attention → visual-hierarchy.md
├─ Accessibility audit or contrast issues → accessibility.md
└─ Need CSS implementation → css-patterns.md
Universal Quick Reference
Spacing Scale (4px base)
4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
Typography Baseline
- Body: 16px, line-height 1.5
- Heading:body ratio max 1:3 (48px heading for 16px body)
- Paragraph spacing: line-height ÷ 1.5
Touch Targets
- Minimum: 44×44px
- Recommended: 48×48px
Contrast Minimums (WCAG)
- Normal text: 4.5:1
- Large text (18px+ or 14px+ bold): 3:1
- UI components: 3:1
Button Hierarchy
| Level | Use For | Treatment |
|---|---|---|
| Primary | Main action (ONE per view) | Solid fill, high contrast |
| Secondary | Alternative actions | Outlined or subtle fill |
| Tertiary | Minor actions | Text-only or ghost |
Dark Mode Essentials
- Background: #121212 (not pure black)
- Text: #E0E0E0 (not pure white)
- Reduce color saturation
Common Mistakes Checklist
- Multiple primary buttons per view
- Placeholder used as only label
- Pure white on pure black
- Thin/light font weights
- Color-only error indicators
- Long centered text
- Inconsistent spacing values
Design Review Protocol
- Hierarchy: Is primary action obvious? Can you tell what matters?
- Readability: Text contrast OK? Line length reasonable (45-75 chars)?
- Forms: Labels above fields? Touch targets 44px+? Helpful errors?
- Spacing: Consistent scale? Breathing room around elements?
- Accessibility: Color not sole indicator? Focus states visible?
When NOT to Use This Skill
- Pure visual branding/identity work
- Marketing copy decisions
- Backend architecture
- Mobile native patterns (iOS/Android differ)
Sources
- Web Interface Handbook by Aleksei Baranov (Imperavi)
- User Interface Typography by Imperavi
- Refactoring UI by Wathan & Schoger
- WCAG 2.1 accessibility guidelines
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
ratacat/claude-skills
brave-search
Use when user asks to search the web, look something up online, find current/recent/latest information, or needs cited answers. Triggers on "search", "look up", "find out about", "what is the current/latest", image searches, news lookups. NOT for searching code/files—only for web/internet searches.
ratacat/claude-skills
bug-reproduction-validator
Use this agent when you receive a bug report or issue description and need to verify whether the reported behavior is actually a bug. This agent will attempt to reproduce the issue systematically, validate the steps to reproduce, and confirm whether the behavior deviates from expected functionality. <example>\nContext: The user has reported a potential bug in the application.\nuser: "Users are reporting that the email processing fails when there are special characters in the subject line"\nassistant: "I'll use the bug-reproduction-validator agent to verify if this is an actual bug by attempting to reproduce it"\n<commentary>\nSince there's a bug report about email processing with special characters, use the bug-reproduction-validator agent to systematically reproduce and validate the issue.\n</commentary>\n</example>\n<example>\nContext: An issue has been raised about unexpected behavior.\nuser: "There's a report that the brief summary isn't including all emails from today"\nassistant: "Let me launch the b...
ratacat/claude-skills
agent-native-audit
Run comprehensive agent-native architecture review with scored principles
ratacat/claude-skills
brainstorming
This skill should be used before implementing features, building components, or making changes. It guides exploring user intent, approaches, and design decisions before planning. Triggers on "let's brainstorm", "help me think through", "what should we build", "explore approaches", ambiguous feature requests, or when the user's request has multiple valid interpretations that need clarification.
ratacat/claude-skills
performance-oracle
Use this agent when you need to analyze code for performance issues, optimize algorithms, identify bottlenecks, or ensure scalability. This includes reviewing database queries, memory usage, caching strategies, and overall system performance. The agent should be invoked after implementing features or when performance concerns arise.\n\n<example>\nContext: The user has just implemented a new feature that processes user data.\nuser: "I've implemented the user analytics feature. Can you check if it will scale?"\nassistant: "I'll use the performance-oracle agent to analyze the scalability and performance characteristics of your implementation."\n<commentary>\nSince the user is concerned about scalability, use the Task tool to launch the performance-oracle agent to analyze the code for performance issues.\n</commentary>\n</example>\n\n<example>\nContext: The user is experiencing slow API responses.\nuser: "The API endpoint for fetching reports is taking over 2 seconds to respond"\nassistant: "Let me invoke the...
ratacat/claude-skills
triage
Triage and categorize findings for the CLI todo system
Didn't find tool you were looking for?