ui-skills

Enforce UI constraints for accessibility, primitives, interaction, and animation.

4|Updated Nov 22, 2025

Search Tags:#ui #accessibility #frontend #design system #animation #ux

Ready to run

npx skills add https://github.com/r1cA18/dotfiles --skill ui-skills-r1ca18

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a set of opinionated constraints and best practices to ensure the creation of high-quality, accessible, and performant user interfaces.

Core Features & Use Cases

Enforces UI best practices: Ensures consistency and quality across interface development.
Component guidelines: Promotes the use of accessible primitives and consistent styling.
Interaction and animation rules: Defines how users interact with the interface and how animations are implemented.
Use Case: A developer can use this skill to review a new UI component to ensure it meets accessibility standards, uses the correct animation libraries, and adheres to the project's design system.

Quick Start

Apply these opinionated constraints to any UI work in this conversation.

Frequently Asked Questions about ui-skills

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

FAQPage Schema

How do I enforce accessibility standards when building frontend UI components?▼

To enforce accessibility standards in frontend UI components, apply opinionated constraints that mandate the use of accessible Base UI primitives and established design system best practices during development.

What's the best way to standardize animations in a React design system?▼

Standardize animations in a React design system by applying interaction and animation rules that specifically require the motion/react library, ensuring consistent and performant motion design across all UI components.

How do I review a UI component for accessibility and design system compliance?▼

Review a UI component by checking it against enforced UI best practices, verifying it uses accessible Base UI primitives, correct Tailwind CSS styling, and motion/react animations to meet design system standards.

Do I need Tailwind CSS and Base UI to use these frontend UI constraints?▼

Yes, these frontend UI constraints require adherence to specific libraries, meaning you need Tailwind CSS for styling, Base UI for accessible component primitives, and motion/react for animations.

Why use opinionated constraints for frontend interaction design?▼

Use opinionated constraints for frontend interaction design to enforce UI best practices, ensuring high-quality, accessible, and performant user interfaces that consistently adhere to established design systems.