web-interface-design
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 |
More from ratacat/claude-skills
ripgrep
Use when searching text in files, codebases, books, or documents. Use when finding files by pattern, searching large files that are too big to read fully, extracting specific content from many files, or when grep/find is too slow. Triggers on "search for", "find occurrences", "look for pattern", "search in files".
232clean-code
Use when writing, reviewing, or refactoring code. Apply when naming variables or functions, structuring classes, handling errors, writing tests, or when code feels complex or hard to understand. Based on Robert C. Martin's Clean Code.
193annas-archive-ebooks
Use when needing to look up book content, find a book by title/author, download an ebook, or reference material from a published book. Triggers on book lookups, ebook downloads, "find the book", "get the PDF/EPUB of". Downloads produce PDF/EPUB/MOBI files - use ebook-extractor skill to convert to text.
163brave-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.
73design-patterns
Use when designing software architecture, refactoring code structure, solving recurring design problems, or when code exhibits symptoms like tight coupling, rigid hierarchies, scattered responsibilities, or difficult-to-test components. Also use when choosing between architectural approaches or reviewing code for structural improvements.
64ebook-extractor
Use when user wants to extract text from ebooks (EPUB, MOBI, PDF). Use for converting ebooks to plain text for analysis, processing, or reading. Handles all common ebook formats.
59