Skills
.Work. You
Rest

web-ui-best-practices

Community

Opinionated UI constraints for better interfaces.

Design & Creative#accessibility#frontend#tailwind#best-practices#ui-design#ux#web-ui
Authorheykvnzhao
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Inconsistent UI patterns, accessibility gaps, and performance pitfalls across frontend projects are common; this Skill defines a clear set of constraints to streamline design-to-implementation quality and maintainability.

Core Features & Use Cases

  • Enforces accessibility primitives and keyboard focus management across components.
  • Aligns with Tailwind CSS defaults and ensures consistent styling with documented patterns.
  • Guides animation usage, interaction patterns, and responsive behavior to improve UX and performance.
  • Provides a repeatable checklist for reviewing UI changes during design reviews or code reviews.
  • Use Case: When adding a new modal, a form, or a page section, apply these constraints to ensure accessible, performant, and consistent UI.

Quick Start

Review the current UI component against all constraints and report any violations with exact references and concrete fixes.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: web-ui-best-practices
Download link: https://github.com/heykvnzhao/dotfiles/archive/main.zip#web-ui-best-practices

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.