Beautiful UI
Beautiful UI is the practice of building interfaces that are meaningful, accessible, and structurally correct. Every element should carry semantic weight — describing what content *is*, not just how it *looks*. Every layout should respond to the user's device. Every form should be fast to complete and forgiving of mistakes. Beautiful UI fills the gap between "it looks right" and "it *is* right."
When to Use
Use this skill when:
- Building page layouts with
<header>,<main>,<aside>,<footer>landmarks - Structuring content sections with
<article>,<section>,<nav> - Choosing between
<div>/<span>and a more meaningful element - Writing navigation menus, breadcrumbs, and pagination
- Building forms with proper labels, fieldsets, validation timing, and error presentation
- Creating data tables with
<thead>,<tbody>,<caption>, and<scope> - Establishing heading hierarchy (
<h1>through<h6>) - Using interactive elements like
<details>,<dialog>,<menu> - Embedding media with
<figure>,<figcaption>,<picture>,<video> - Adding ARIA roles, live regions, skip links, or focus management
- Making keyboard navigation work for tabs, menus, and custom widgets
- Respecting
prefers-reduced-motionand color contrast requirements - Building responsive layouts with Tailwind breakpoints and container queries
- Creating responsive navigation (hamburger menus, off-canvas sidebars)
- Making tables responsive (scroll, card transformation, priority columns)
- Establishing typographic hierarchy with size, weight, and color
- Using
tabular-numsfor data alignment,text-balancefor headings - Configuring font stacks, custom fonts, and the prose/typography plugin
- Designing form layouts (single-column, multi-column for related fields)
- Implementing "reward early, punish late" validation with Inertia.js
- Choosing between radio buttons and select menus
- Building destructive action confirmations (type-to-confirm)
Rules
Read individual rule files for detailed explanations and code examples:
- rules/semantic-html.md - Element selection guide: when to use which HTML element and why
- rules/accessibility.md - ARIA roles, live regions, skip links, focus management, keyboard navigation, screen reader announcements, contrast, and reduced motion
- rules/responsive-patterns.md - Mobile-first breakpoints, container queries, responsive grids, navigation, tables, forms, touch targets, and viewport units
- rules/typography.md - Type scale, font stacks, line height, line length, letter spacing, font weight hierarchy, text color, prose styling, truncation, tabular numbers, and dark mode
- rules/form-ux.md - Form layout, label placement, input sizing, validation timing, error presentation, submit buttons, optional fields, help text, and destructive action confirmation
- rules/spacing-over-dividers.md - Default to spacing over borders and dividers — fewer lines, more whitespace, cleaner interfaces