Enforce Tailwind CSS and React UI constraints for accessibility and performance.
npx skills add https://github.com/Alfie728/my-skills --skill ui-skills-alfie728
Please help me install this Agent Skill. Skill: ui-skills Source: https://github.com/Alfie728/my-skills/tree/main/UI Command: npx skills add https://github.com/Alfie728/my-skills --skill ui-skills-alfie728
Provides a concise set of opinionated constraints and best-practice rules to help teams build consistent, accessible, and performant user interfaces for agent-powered products. Reduces design ambiguity, prevents regressions, and speeds implementation by setting clear defaults for stack, components, interaction, animation, typography, layout, performance, and design decisions.
Use the ui-skills guidelines to review a React + Tailwind codebase and produce a prioritized implementation plan that enforces accessibility, animation, and performance rules.
High-intent search queries and answers about installing and using this skill.
To standardize React and Tailwind CSS components, apply opinionated constraints mandating accessible primitives, aria-labels for icon-only controls, AlertDialog for destructive actions, and compositor-only animations to enforce consistency and performance.
Best practices for animation performance dictate using motion/react for JS animations, enforcing prefers-reduced-motion, forbidding layout- and paint-heavy animations, and limiting animations to compositor properties to maintain UI responsiveness.
Yes, Tailwind CSS is required to enforce consistent UI typography and layout rules, providing the baseline defaults for text balancing, tabular numerics, fixed z-index scales, and safe-area handling across your frontend project.
To ensure accessible interaction patterns in agent user interfaces, require accessible component primitives, apply aria-labels to icon-only controls, use AlertDialog for destructive actions, and respect focus and keyboard behavior.
React UI performance degrades during heavy visual animations because layout- and paint-heavy animations block the main thread, which is why you must limit animations to compositor properties and enforce prefers-reduced-motion support.
DITEKmaxEnforce Tailwind CSS UI and styling constraints for accessibility, animation, typography, and layout.
catlog22Design and validate motion systems for UI animation and reduced-motion accessibility.
BenjamindaosonEnforce Tailwind CSS UI baselines for React components and design systems.
dotlab-hqEnforce UI consistency baselines for Tailwind CSS and React projects.
