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