Beautiful UI patterns for modern web development — semantic HTML, accessible markup, responsive design, typography, and form UX. Use this skill when building page layouts, structuring content, choosing semantic elements, implementing navigation, building forms, creating data tables, handling accessibility, designing responsive layouts, establishing typographic hierarchy, or any markup and styling that should be meaningful, accessible, and well-structured. Works with React, Vue, and Svelte with Tailwind CSS.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Beautiful UI patterns for modern web development — semantic HTML, accessible markup, responsive design, typography, and form UX. Use this skill when building page layouts, structuring content, choosing semantic elements, implementing navigation, building forms, creating data tables, handling accessibility, designing responsive layouts, establishing typographic hierarchy, or any markup and styling that should be meaningful, accessible, and well-structured. Works with React, Vue, and Svelte with Tailwind CSS.
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-motion and color contrast requirements
Building responsive layouts with Tailwind breakpoints and container queries
Making tables responsive (scroll, card transformation, priority columns)
Establishing typographic hierarchy with size, weight, and color
Using tabular-nums for data alignment, text-balance for 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
