Ui Design
Apply prioritized UI/UX and frontend rules when agents generate, review, or refactor interfaces.
Overview
UI Design is an agent skill most often used in Build (also Ship, Launch) that enforces 42 prioritized UI/UX rules across 8 categories for accessible, performant frontend code.
Install
npx skills add https://github.com/pproenca/dot-skills --skill ui-designWhat is this skill?
- 42 rules across 8 impact-ordered categories for agent-driven UI work
- Critical-tier accessibility: keyboard nav, touch targets, headings, alt text
- Core Web Vitals and performance guidance with incorrect vs correct examples
- Rule-level impact metrics for automated review and codegen
- Optimized for AI maintenance workflows—not a generic human-only style guide
- 42 rules across 8 categories
- Version 0.1.0 (January 2026)
Adoption & trust: 563 installs on skills.sh; 157 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent ships UIs that look fine visually but miss keyboard access, heading structure, touch targets, or vitals-friendly patterns.
Who is it for?
Solo builders who want consistent AI code review and generation against WCAG-leaning, vitals-aware frontend standards.
Skip if: Pure brand strategy or illustration-heavy design systems with no code output, or backend-only services with no UI surface.
When should I use this skill?
Maintaining, generating, or refactoring frontend codebases where UI consistency, accessibility, and performance must be enforced by the agent.
What do I get? / Deliverables
Generated or refactored frontend code aligns with categorized rules, critical accessibility first, with concrete before/after examples to justify changes.
- UI changes or review notes mapped to rule categories and impact level
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Frontend build is the canonical shelf because the guide targets implementation-time consistency for UI codebases. Frontend subphase covers layout, interaction, performance, and accessibility patterns agents apply while shipping UI.
Where it fits
Refactor a settings page so heading hierarchy and focus order match the critical accessibility rules.
Pre-release pass on forms and buttons for minimum touch targets and keyboard traps.
Tune landing layout and media for vitals and meaningful alt text without sacrificing structure.
Raise a clickable prototype to baseline accessibility before investing in full build-out.
How it compares
Rule-based design lint for agents—not a component library install or Figma plugin.
Common Questions / FAQ
Who is ui-design for?
Indie developers and agent users maintaining web or hybrid frontends who need LLMs to follow a fixed, high-impact UI/UX rulebook.
When should I use ui-design?
During Build when scaffolding or refactoring UI, in Ship review before release, and at Launch when tightening landing pages for accessibility and Core Web Vitals.
Is ui-design safe to install?
It is documentation-only guidance; review the Security Audits panel on this page and treat linked reference paths as part of the skill package.
SKILL.md
READMESKILL.md - Ui Design
# UI/UX Frontend Design **Version 0.1.0** UI/UX Best Practices January 2026 > **Note:** > This document is mainly for agents and LLMs to follow when maintaining, > generating, or refactoring codebases. Humans may also find it useful, > but guidance here is optimized for automation and consistency by AI-assisted workflows. --- ## Abstract Comprehensive UI/UX and frontend design best practices guide, designed for AI agents and LLMs. Contains 42 rules across 8 categories, prioritized by impact from critical (accessibility compliance, Core Web Vitals) to incremental (animation performance). Each rule includes detailed explanations, real-world examples comparing incorrect vs. correct implementations, and specific impact metrics to guide automated code review and generation. --- ## Table of Contents 1. [Accessibility & WCAG Compliance](references/_sections.md#1-accessibility-&-wcag-compliance) — **CRITICAL** - 1.1 [Ensure Full Keyboard Navigation](references/access-keyboard-navigation.md) — CRITICAL (enables access for motor-impaired users and power users) - 1.2 [Ensure Minimum Touch Target Size](references/access-target-size.md) — CRITICAL (enables users with motor impairments to tap controls accurately) - 1.3 [Maintain Logical Heading Hierarchy](references/access-heading-hierarchy.md) — CRITICAL (enables screen reader users to navigate and understand page structure) - 1.4 [Provide Meaningful Alt Text for Images](references/access-alt-text.md) — CRITICAL (enables blind users to understand image content) - 1.5 [Provide Visible Focus Indicators](references/access-focus-indicators.md) — CRITICAL (enables keyboard users to track position on page) - 1.6 [Use ARIA Labels for Icon-Only Controls](references/access-aria-labels.md) — CRITICAL (enables screen readers to announce button purpose) - 1.7 [Use Semantic HTML Elements](references/access-semantic-html.md) — CRITICAL (enables screen reader navigation and improves SEO) 2. [Core Web Vitals Optimization](references/_sections.md#2-core-web-vitals-optimization) — **CRITICAL** - 2.1 [Improve Interaction to Next Paint](references/cwv-improve-inp.md) — CRITICAL (INP under 200ms makes UI feel responsive) - 2.2 [Inline Critical CSS and Defer the Rest](references/cwv-critical-css.md) — CRITICAL (eliminates render-blocking CSS, 200-500ms faster FCP) - 2.3 [Lazy Load Offscreen Images and Iframes](references/cwv-lazy-load-offscreen.md) — CRITICAL (reduces initial page weight by 30-60%) - 2.4 [Minimize Cumulative Layout Shift](references/cwv-minimize-cls.md) — CRITICAL (CLS under 0.1 prevents frustrating misclicks) - 2.5 [Optimize Largest Contentful Paint](references/cwv-optimize-lcp.md) — CRITICAL (LCP under 2.5s improves SEO rankings by 8-15%) - 2.6 [Serve Responsive Images with srcset](references/cwv-responsive-images.md) — CRITICAL (reduces image payload by 40-70% on mobile) 3. [Visual Hierarchy & Layout](references/_sections.md#3-visual-hierarchy-&-layout) — **HIGH** - 3.1 [Design for F-Pattern Reading Behavior](references/layout-f-pattern.md) — HIGH (increases CTA visibility by 30-50%) - 3.2 [Establish Clear Visual Hierarchy](references/layout-visual-hierarchy.md) — HIGH (improves CTA click-through rates by 20-40%) - 3.3 [Group Related Elements with Proximity](references/layout-proximity-grouping.md) — HIGH (reduces cognitive load, clarifies content relationships) - 3.4 [Limit to One Primary Call-to-Action Per Screen](references/layout-single-cta.md) — HIGH (reduces decision paralysis, improves click-through rates) - 3.5 [Use a Consistent Grid System](references/layout-grid-system.md) — HIGH (creates visual harmony and faster layout development) - 3.6 [Use Whitespace to Improve Readability](references/layout-whitespace.md) — HIGH (reduces cognitive load by 20%, improves comprehension) 4. [Responsive & Mobile-First Design](references/_sections.md#4-responsive-&-mobile-first-design) — **HIGH** - 4.1 [Configure Viewport