How does it handle animations?

It utilizes motion/react for JavaScript animations, limits duration to 200ms, and ensures they only affect compositor properties like transform and opacity for peak performance.

What UI libraries does this skill prefer?

The skill mandates Tailwind CSS for styling and accessible primitives like Base UI, Radix, or React Aria for complex component behavior.

Can I use custom gradients or glow effects?

By default, the skill discourages the use of gradients and glows to maintain a clean, professional aesthetic unless they are explicitly requested.

Does it support accessibility?

Yes, it strictly enforces ARIA labels for icon-only buttons and forbids manual rebuilding of keyboard or focus logic in favor of established primitives.

Professional UI Constraints

Name: Professional UI Constraints
Author: andybons

byandybons

0•

Herramientas de Diseño

Enforces strict design and accessibility standards to build high-quality, production-ready user interfaces with AI agents.

The UI Skill provides a rigorous framework of opinionated constraints designed to ensure AI agents produce professional-grade frontend code. By mandating the use of Tailwind CSS defaults, accessible component primitives like Radix and Base UI, and high-performance animation patterns via motion/react, it eliminates common AI-generated design debt. This skill is particularly useful for developers and teams looking to maintain UI consistency, accessibility compliance, and optimal performance across agent-generated components without manual oversight.

Características Principales

01Implements refined typography using text-balance and tabular-nums for data-heavy views.

02Standardizes layout logic with Tailwind CSS defaults and modern CSS units like dvh.

03Optimizes animations by restricting them to compositor properties and motion/react.

04Ensures performance-first rendering by restricting heavy filters and inefficient useEffect patterns.

05Enforces accessibility standards using Base UI, React Aria, and Radix primitives.

060 GitHub stars

Casos de Uso

01Building accessible design systems that follow WCAG guidelines by default.

02Standardizing frontend code quality across large projects using AI-assisted development.

03Rapidly prototyping high-performance React components with consistent spacing and shadows.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add andybons/kit ui

For use in Claude.ai and ChatGPT

Download Skill