verify-frontend-ui

Community

Ensure UI quality and consistency.

Authorbigbulgogiburger
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the verification of frontend UI components against established design principles, accessibility standards, and technical best practices, ensuring a high-quality and consistent user experience.

Core Features & Use Cases

  • Design System Compliance: Verifies adherence to design tokens (HSL CSS variables, Tailwind semantic classes).
  • Accessibility Audit: Checks for ARIA roles, labels, keyboard navigation, and focus management.
  • Responsiveness & Theming: Validates dark mode compatibility and mobile responsiveness.
  • Use Case: After updating the Button.tsx component and modifying Tailwind theme colors in tailwind.config.ts, run this Skill to confirm that the changes maintain accessibility, dark mode support, and adhere to the design system.

Quick Start

Run the UI verification checks for the frontend components.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: verify-frontend-ui
Download link: https://github.com/bigbulgogiburger/rag-bio/archive/main.zip#verify-frontend-ui

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 471,000+ vetted skills library on demand.