ui-skills

Enforce accessible UI component constraints across React and Tailwind code reviews.

1|Updated Feb 22, 2021

Search Tags:#ui #consistency #accessibility #frontend #interaction #tailwind #design-systems

Ready to run

npx skills add https://github.com/reVrost/dotfiles --skill ui-skills-revrost

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/reVrost/dotfiles/tree/main/skills/ui-skills
Command: npx skills add https://github.com/reVrost/dotfiles --skill ui-skills-revrost

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Opinionated constraints for building better interfaces with agents.

Core Features & Use Cases

Enforce accessible component primitives and consistency across UI surfaces
Provide guidance for Tailwind defaults, animation rules, and design-system alignment
Use in UI review scenarios: building components, reviewing frontend code, and implementing interactions

Quick Start

Use the UI skills to validate a new component against the project guidelines and obtain an accessibility-compliant review.

Frequently Asked Questions about ui-skills

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

FAQPage Schema

How do I enforce UI consistency and accessibility in a React component library?▼

To enforce UI consistency and accessibility in a React component library, apply opinionated constraints using accessible primitives, ARIA labeling, and Tailwind defaults to validate components against unified design-system guidelines.

What guidelines should I use for accessible frontend code reviews?▼

For accessible frontend code reviews, use a constraint-based skill set that checks ARIA labeling, accessible component primitives, safe animation rules, and Tailwind defaults to ensure interfaces meet strict design-forward accessibility requirements.

Can I use this skill to validate Tailwind defaults and animation rules?▼

Yes, you can use this skill to validate Tailwind defaults and animation rules. It provides safe animation guidelines and enforces design-system alignment to ensure UI interactions remain consistent and accessible across frontend surfaces.

How do I build accessible UI components with strict design constraints?▼

To build accessible UI components with strict design constraints, enforce a unified set of rules covering ARIA labeling and accessible primitives during development to obtain an accessibility-compliant review of your interactions.

What is the best way to align frontend code with a design system?▼

The best way to align frontend code with a design system is to enforce opinionated constraints that validate component implementations against Tailwind defaults and accessibility primitives, ensuring unified design-system alignment across all UI surfaces.

Does this UI validation skill work without external dependencies?▼

Yes, this UI validation skill works without external dependencies. It functions as an independent guideline set to validate frontend components, enforce ARIA labeling, and review interactions without requiring additional component installations.