ui-design
Use when designing HTML semantics, accessible forms, responsive layouts, typography or reduced-motion behavior. Not for a Web Interface Guidelines compliance audit; use web-design-guidelines.
Target: React / Next.js. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- UI/UX Best Practices Frontend Design
- When to Apply
- Rule Categories by Priority
- Quick Reference
- 1. Accessibility & WCAG Compliance (CRITICAL)
- 2. Core Web Vitals Optimization (CRITICAL)
- 3. Visual Hierarchy & Layout (HIGH)
- 4. Responsive & Mobile-First Design (HIGH)
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. 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 | 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- | access-semantic-html - Use semantic HTML elements for screen readers access-keyboard-navigation - Ensure full keyboard navigation access-focus-indicators - Provide visible focus indicators access-alt-text - Pro
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- Cratis/AI
- Source file
- Source/AgentHarnesses/skills/react-agent-skills/skills/ui-design/SKILL.md
- Fixed revision
- 868bc20e7f474299466331a3cf86eaf995be0a2b
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: Cratis/AI · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-12T11:00:49.986Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.