ui-ux-design

Review UI/UX designs for design system compliance and accessibility standards.

Updated Feb 7, 2026
One-click install
npx skills add https://github.com/froggugugugu/project-blueprints --skill ui-ux-design-froggugugugu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/froggugugugu/project-blueprints/tree/main/project-blueprint-en/.claude/skills/ui-ux-design
Command: npx skills add https://github.com/froggugugugu/project-blueprints --skill ui-ux-design-froggugugugu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures user interfaces are visually consistent, accessible, and adhere to the project's established design system, preventing visual debt and improving user experience.

Core Features & Use Cases

  • Design System Compliance: Verifies adherence to color palettes, typography, spacing, and component usage.
  • Accessibility Audits: Checks for WCAG compliance, keyboard navigation, and screen reader compatibility.
  • Responsive & Dark Mode: Validates proper display across devices and in both light/dark themes.
  • Use Case: A developer needs to implement a new feature's UI. This skill reviews the proposed components against the design system, flags any inconsistencies, and ensures accessibility standards are met before code review.

Quick Start

Review the dashboard layout for design system compliance and accessibility issues.

Frequently Asked Questions about ui-ux-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my UI components for design system compliance?

To check UI components for design system compliance, review their color palettes, typography, spacing, and usage against your project's established standards. This process flags visual inconsistencies to prevent visual debt and ensure user interface fidelity.

How do I audit my web application for WCAG accessibility standards?

Auditing for WCAG accessibility standards requires checking keyboard navigation, screen reader compatibility, and visual consistency. This ensures user interfaces are accessible, adhering to established design systems and preventing usability barriers.

Does this approach handle responsive design and dark mode implementation?

Yes, this approach handles responsive design and dark mode implementation by validating proper visual display across multiple devices and themes. It ensures UI components adapt correctly to both light and dark modes while maintaining design system fidelity.

What is the best way to implement UI styling without creating visual debt?

The best way to implement UI styling without visual debt is to review proposed components against your project's design system before code review. Verifying adherence to accessibility standards and visual consistency ensures pixel-perfect user interfaces.

When do I need an accessibility and UI styling review for my feature?

You need an accessibility and UI styling review when implementing a new feature's user interface. This review process checks for design system compliance, flags inconsistencies, and ensures accessibility standards are met before final code review.