Ui Design
A comprehensive frontend design reference with 42 rules organized by impact level, from critical accessibility requirements to animation polish. Use this when you need to check WCAG compliance, optimize Core Web Vitals, or validate responsive design decisions. The structure is smart: rules are prefixed by category (access-, cwv-, layout-) and prioritized so you can focus on what actually matters first. It's opinionated in the right ways, like advocating for mobile-first design and semantic HTML, without being dogmatic. The full compiled AGENTS.md gives you detailed explanations when you need them, but the quick reference is useful enough on its own for code reviews or catching common mistakes before they ship.
- skills.sh installs
- 827
- GitHub stars
- 222
- last updated
- Aug 21, 2026
Install
$ npx -y skills add pproenca/dot-skills --skill ui-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
UI/UX Best Practices Frontend Design
Comprehensive UI/UX and frontend design best practices guide. Contains 42 rules across 8 categories, prioritized by impact to guide accessible, performant, and user-friendly interface development.
When to Apply
Reference these guidelines when:
- Structuring HTML for accessibility and semantics
- Writing CSS for responsive layouts and visual hierarchy
- Optimizing images and fonts for Core Web Vitals
- Designing forms with proper validation and error handling
- Adding animations and interactive elements
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Accessibility & WCAG Compliance | CRITICAL | access- |
| 2 | Core Web Vitals Optimization | CRITICAL | cwv- |
| 3 | Visual Hierarchy & Layout | HIGH | layout- |
| 4 | Responsive & Mobile-First Design | HIGH | resp- |
| 5 | Typography & Font Loading | MEDIUM-HIGH | typo- |
| 6 | Color & Contrast | MEDIUM | color- |
| 7 | Forms & Validation UX | MEDIUM | form- |
| 8 | Animation & Performance | LOW-MEDIUM | anim- |
Quick Reference
1. Accessibility & WCAG Compliance (CRITICAL)
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/pproenca/dot-skills
- Categories
- Frontend Development, Documentation, Debugging, Design & UI/UX
- First seen
- Jun 3, 2026
More from pproenca/dot-skills
All 100- Typescript Refactor799
- React Refactor791
- Chrome Extension Ui732
- Shadcn732
- Chrome Extension729
- Shell704
- Tailwind657
- Refactor651
- Expo561
- React496
- Tailwind Responsive Ui470
- Tailwind Ui Refactor467
- Zustand453
- Debug444
- Ios Design436
- Feature Spec431
- Feature Arch423
- React Testing Library418
- Jscodeshift416
- Expo React Native Coder415
- Tdd415
- Humanize409
- React Optimise403
- Knip Deadcode390
Recommended
More Frontend Development
encore-frontendencoredev/skillsConnect a frontend application (React, Next.js, Vue, Svelte, etc.) to an Encore.ts backend.806skills.sh installs
scaffold-nextjsmblode/agent-skillsScaffolds a production-ready Next.js turborepo end to end. Runs create-next-app with TypeScript 7, Tailwind CSS, React Compiler, and Cache Components, sets up s785skills.sh installs
angular-best-practicesboise-state-development/agentcore-public-stackAngular 21 development with modern best practices including signals, standalone components, reactive patterns, and accessibility. Use when creating Angular comp758skills.sh installs
syncfusion-react-image-editorsyncfusion/react-ui-components-skillsMaster Syncfusion React Image Editor for comprehensive image editing. Use this when users need to edit images, add annotations, apply filters, manage layers, or743skills.sh installsui-auditmblode/agent-skillsAudits built React and Next.js frontends for user-facing defects in code and rendered UI: state gaps, data loss, double submits, focus and keyboard failures, ro733skills.sh installs
shadcnpproenca/dot-skillsshadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui compon732skills.sh installs