skilld
All skills
sailscastshq avatar

/beautiful-ui

@960657a
by The Sailscasts Companysailscastshq/boring-stack505 stars
25

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/sailscastshq/boring-stack/beautiful-ui

This session only. Nothing lands on disk.

README.md

≈588 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Beautiful UI Skills for Claude Code

Write meaningful, accessible, responsive markup in The Boring JavaScript Stack with Claude Code.

Installation

npx skills add sailscastshq/boring-stack/skills/beautiful-ui

Usage

After installing, Claude will automatically apply beautiful UI best practices when you build page layouts, forms, and component markup:

"Build a settings page with a sidebar navigation"

"Create a pricing page with feature comparison"

"Add a blog post layout with author info and related articles"

"Build a responsive dashboard with stats cards and a data table"

"Add a signup form with validation"

Skills Included

  • semantic-html - Element selection guide: when to use which HTML element and why
  • accessibility - ARIA roles, live regions, skip links, focus management, keyboard navigation, contrast, reduced motion
  • responsive-patterns - Mobile-first breakpoints, container queries, responsive grids, navigation, tables, touch targets, viewport units
  • typography - Type scale, font stacks, line height, line length, letter spacing, font weight hierarchy, text color, prose, truncation, tabular numbers
  • form-ux - Form layout, labels, validation timing, error presentation, submit buttons, optional fields, destructive actions

What is Beautiful UI?

Beautiful UI means building interfaces that are meaningful, accessible, and structurally correct. A <nav> tells screen readers "this is navigation." An <article> tells Reader Mode "this is the main content." A top-aligned label is completed fastest. A tabular-nums class aligns your pricing table. A min-h-svh replaces h-screen so mobile users don't have content hidden behind the address bar.

The goal is to eliminate div soup, fix accessibility gaps, make layouts responsive by default, establish typographic hierarchy, and build forms that are fast to complete and forgiving of mistakes. These patterns draw from Refactoring UI, Nielsen Norman Group, WCAG, and MDN best practices.

Links

License

MIT

Source: SKILL.md on GitHub

Third-party checks

No alerts17d4 checks · Risk SAFE
  • Gen Agent Trust Hub17d

    The skill provides a comprehensive set of UI best practices and code templates for building accessible, responsive, and semantic web interfaces. No security issues were detected.

  • Socket17d

    No alerts

  • Snyk17d

    Risk: LOW · No issues

  • Runlayer6mo

    9 files scanned · No issues

Provenance

Signed by skilld at 960657a. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 3 days ago.

Activeupdated 7 months ago

Capability

Other metadata
metadata
{
  "author": "sailscastshq",
  "version": "1.0.0",
  "tags": "beautiful-ui, semantic-html, accessibility, a11y, responsive, typography, form-ux, landmarks, aria, navigation, forms, tables, headings, tailwind, mobile-first, container-queries"
}

README badge

README badge for sailscastshq/boring-stack/beautiful-ui