web-design

Provides design principles for UI layout, typography, color, and component states.

3|Updated Nov 8, 2014

Search Tags:#typography #accessibility #layout #web design #design specification #color contrast #ui design

One-click install

npx skills add https://github.com/mintuz/.dotfiles --skill web-design-mintuz

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: web-design
Source: https://github.com/mintuz/.dotfiles/tree/main/agents/.agents/skills/web-design
Command: npx skills add https://github.com/mintuz/.dotfiles --skill web-design-mintuz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often look unintentional because design decisions are left vague or deferred. This Skill gives concrete, opinionated guidance on layout, typography, color, and component states so every visual decision is named and specified rather than implied. ## Core Features & Use Cases - Visual Hierarchy & Layout: Guidance on spacing scales, max widths, grouping, and responsive column reduction for readable pages. - Typography & Color Systems: Concrete type scales, letter-spacing rules, neutral palettes, and WCAG contrast ratios (4.5:1 for text, 3:1 for large text). - Component & State Specification: Rules for buttons, forms, lists, and icons plus required treatments for hover, focus, loading, error, empty, and success states. - Use Case: When asked to refine a settings page, the Skill produces a full design specification—named spacing values, type sizes, emphasis levels for each action, and visible treatments for every control state—while leaving implementation code to the engineer. ## Quick Start Ask the AI to review the layout, typography, and color of your settings page and specify the design values and state treatments for each control.

Frequently Asked Questions about web-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

When should text truncation be used in layouts?▼

Truncate only when the complete text stays available through a clearly marked control. Containers should size from their content and avoid fixed heights, since translated strings run longer and readers may enlarge text up to 200 percent.