better-web-ui

In the author's own words, from each skill's SKILL.md — showing the first 30 of 264 files.

• a11y

  Systematically audit and remediate accessibility issues in UI, focusing on keyboard navigation, screen reader support, color contrast, semantic HTML, ARIA usage, and motion sensitivity. Use when the user wants to improve accessibility, make a component accessible, fix WCAG violations, add keyboard support, or ensure screen reader compatibility.

  skills/a11y/SKILL.md on GitHub (opens in a new tab)

• adapt

  Adapt designs for narrow, medium, wide, embedded, or print web contexts without losing usability, hierarchy, or target sizing. Use when the user mentions responsive design, breakpoints, narrow layouts, viewport changes, touch-capable browsers, or cross-context adaptation.

  skills/adapt/SKILL.md on GitHub (opens in a new tab)

• add-ui

  Generate 5 distinct, production-grade UI variations for a requested new or existing section, component, page, flow, or shell, then help the user preview and apply one. Use when the user asks to add or redesign UI like a hero, pricing, navbar, auth flow, dashboard shell, ecommerce surface, or data component.

  skills/add-ui/SKILL.md on GitHub (opens in a new tab)

• animate

  Improve or implement purposeful motion systems, micro-interactions, gestures, and transition behavior for production-grade UI. Use when the user mentions animation, motion, transitions, micro-interactions, hover states, drawers, toasts, gestures, or making the UI feel more alive.

  skills/animate/SKILL.md on GitHub (opens in a new tab)

• arrange

  Improve layout composition, spacing systems, grouping, and visual rhythm. Use when the user mentions weak layout structure, arbitrary spacing, weak grouping, crowded composition, or layout monotony rather than priority/emphasis problems.

  skills/arrange/SKILL.md on GitHub (opens in a new tab)

• audit

  Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants measurable accessibility, performance, responsive, theming, or anti-pattern findings—not when they mainly want an overall UX critique or final visual/detail polish.

  skills/audit/SKILL.md on GitHub (opens in a new tab)

• bolder

  Increase visual impact, contrast, personality, and compositional confidence when a design feels bland, generic, or too safe. Use when the design needs more energy, confidence, or memorability—not when the real problem is clutter, over-intensity, or micro-detail polish.

  skills/bolder/SKILL.md on GitHub (opens in a new tab)

• clarify

  Improve UX writing, marketing copy, labels, microcopy, instructions, and error messages so interfaces and product messaging are easier to understand and act on. Use when the user mentions confusing copy, unclear labels, bad error text, weak CTAs, hard-to-follow instructions, or wanting better UX writing.

  skills/clarify/SKILL.md on GitHub (opens in a new tab)

• colorize

  Build or refine UI color systems, warmth, semantic color, and color-based hierarchy in designs that are too gray, monochromatic, or missing color meaning. Use when the user mentions dull colors, gray UI, missing warmth, weak semantic color, or a need for stronger color hierarchy.

  skills/colorize/SKILL.md on GitHub (opens in a new tab)

• critique

  Evaluate an interface from a UX perspective, assessing hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring and actionable feedback. Use when the user wants an overall design or UX review—not when the main need is measurable accessibility/performance diagnosis, or final micro-detail polish.

  skills/critique/SKILL.md on GitHub (opens in a new tab)

• data-viz

  Design or improve data visualizations, charts, and data presentation interfaces. Use when the user asks to add charts, build dashboards, visualize data, choose chart types, make data accessible, or present metrics and analytics.

  skills/data-viz/SKILL.md on GitHub (opens in a new tab)

• delight

  Add moments of joy, personality, and surprise through success states, empty states, loading moments, hover details, and celebratory polish once the fundamentals already work. Use when the user wants delight, charm, personality, or memorable micro-interactions—not when the main need is baseline cleanup or stronger visual impact.

  skills/delight/SKILL.md on GitHub (opens in a new tab)

• depth

  Add or refine depth through elevation systems, raised and inset surfaces, layered overlap, and meaningful shadow behavior so interfaces feel structured instead of flat. Use when the user mentions depth, elevation, shadows, layering, flat cards, pressed states, drag feedback, or inset controls.

  skills/depth/SKILL.md on GitHub (opens in a new tab)

• distill

  Simplify cluttered UI by removing unnecessary elements, choices, features, and structural complexity. Use when the problem is too many controls, options, features, or competing elements—not when the structure is sound and the real issue is only visual intensity or lack of personality.

  skills/distill/SKILL.md on GitHub (opens in a new tab)

• empty-state

  Design focused empty states for zero-data, no-results, permission, and error situations with clear value framing, strong CTAs, and less dead chrome. Use when the user mentions blank pages, zero-data screens, no results, permission states, or dead controls—not broader onboarding strategy.

  skills/empty-state/SKILL.md on GitHub (opens in a new tab)

• extract

  Extract reusable components, product patterns, and design tokens into a clearer design system with shared APIs, documented defaults, and better reuse. Use when the user wants to refactor repeated UI, consolidate buttons/cards/forms/sections, build a component library, or turn one-off values into reusable tokens.

  skills/extract/SKILL.md on GitHub (opens in a new tab)

• forms

  Design, structure, or improve form interfaces for clarity, completion rates, and user confidence. Use when the user asks to build a form, redesign a form flow, improve form conversion, add multi-step forms, fix form UX, or structure field layouts and validation.

  skills/forms/SKILL.md on GitHub (opens in a new tab)

• frontend-design

  Create distinctive, production-grade frontend interfaces with strong hierarchy, thoughtful systems, and polished implementation that avoid generic AI aesthetics. Use when the user wants to build or redesign web pages, flows, components, or full app surfaces, or when another better-web-ui skill needs shared project design context before other better-web-ui skills.

  skills/frontend-design/SKILL.md on GitHub (opens in a new tab)

• harden

  Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management, making interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.

  skills/harden/SKILL.md on GitHub (opens in a new tab)

• hierarchy

  Clarify priority and emphasis by fixing unclear primary actions, competing visual weight, loud section titles, and weak label/value treatment. Use when the user mentions hierarchy, prioritization, too much competition, grayscale confusion, loud headings, or unclear primary actions.

  skills/hierarchy/SKILL.md on GitHub (opens in a new tab)

• imagery

  Improve how interfaces use photos, screenshots, icons, illustrations, and user-uploaded media so visuals support clarity instead of undermining it. Use when the user mentions images, screenshots, background photos, hero images, icon sizing, user-uploaded media, crops, overlays, or image readability.

  skills/imagery/SKILL.md on GitHub (opens in a new tab)

• localize

  Plan, implement, or improve an internationalization and localization strategy for UI content, formatting, and regional adaptation. Use when the user asks to add i18n, localize, translate, support multiple languages, handle regional formats, manage locale switching, or build a multilingual product.

  skills/localize/SKILL.md on GitHub (opens in a new tab)

• normalize

  Audit and realign UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.

  skills/normalize/SKILL.md on GitHub (opens in a new tab)

• onboard

  Design onboarding and activation flows that help users reach value quickly. Use when the user mentions onboarding, getting started, first-time users, activation, aha moments, or new user flows—not when the work is only the empty-state surface itself.

  skills/onboard/SKILL.md on GitHub (opens in a new tab)

• optimize

  Diagnose and fix UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.

  skills/optimize/SKILL.md on GitHub (opens in a new tab)

• polish

  Perform a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the work is functionally complete and needs finishing touches—not when the hierarchy, structure, tone, or technical foundation still need major changes.

  skills/polish/SKILL.md on GitHub (opens in a new tab)

• quieter

  Reduce visual intensity, saturation, and noise while preserving hierarchy and character. Use when the structure is basically sound but the design feels too loud, bold, garish, aggressive, or overstimulating—not when the real problem is structural clutter, too many features, or not enough personality.

  skills/quieter/SKILL.md on GitHub (opens in a new tab)

• search

  Design or improve search experiences, result presentation, and filtering interfaces. Use when the user asks to add search, redesign search results, improve findability, build autocomplete, add filters, or fix zero-results dead ends.

  skills/search/SKILL.md on GitHub (opens in a new tab)

• security-ux

  Design security-conscious interfaces that protect users without frustrating them. Use when the user asks about MFA, password UX, breach notifications, trust indicators, secure forms, account recovery, or making security feel safe rather than scary.

  skills/security-ux/SKILL.md on GitHub (opens in a new tab)

• setup

  Gather and persist project design context such as audience, brand personality, UX goals, and implementation defaults for future better-web-ui work. Use when starting a project, defining UI direction, or establishing reusable design guidance before other better-web-ui skills.

  skills/setup/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• superpowersby obra An agentic skills framework & software development methodology that works. 300k stars · 15 skills
• skillsby mattpocock Skills for Real Engineers. Straight from my .agents directory. 293k stars · 30 skills
• ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod… 280k stars · 30 skills
• reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries. 270k stars · 1 skill
• andrej-karpathy-skillsby multica-ai A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls. 220k stars · 1 skill
• skillsby anthropics Public repository for Agent Skills 181k stars · 19 skills