Enforce UI constraints for Tailwind defaults, ARIA usage, and motion animations.
npx skills add https://github.com/JoeyCacciatore3/Clawd --skill ui-skills-joeycacciatore3
Please help me install this Agent Skill. Skill: ui-skills Source: https://github.com/JoeyCacciatore3/Clawd/tree/main/skills/ui-skills Command: npx skills add https://github.com/JoeyCacciatore3/Clawd --skill ui-skills-joeycacciatore3
This guide codifies opinionated UI constraints to guide agent-facing interfaces and prevent inconsistent UX across apps powered by agents.
Review the ui-skills.md guidelines and start applying the rules to the next UI component you build. Ensure Tailwind defaults are used, animations are added only when required, and ARIA attributes are properly applied.
High-intent search queries and answers about installing and using this skill.
To enforce consistent UI design rules for agent-driven React apps, apply codified constraints covering Tailwind defaults, ARIA accessibility, and motion-based animations. This prevents inconsistent UX across agent-powered interfaces and ensures components remain accessible and performant.
The best Tailwind defaults for agent dashboard accessibility involve using the framework's default spacing, radius, and shadows to maintain visual consistency. Pair these defaults with ARIA attributes and accessible primitives for keyboard navigation to ensure usable interfaces.
To add structured animation guidelines to a Tailwind design system, prefer motion/react for animations, limit animation duration, and avoid animating layout properties. This approach maintains performance while providing necessary motion-based user feedback.
Yes, you need ARIA attributes for icon-only buttons in agent interfaces. Applying aria-labels to icon-only buttons is a required constraint to ensure screen readers can properly announce the button's purpose and maintain accessible keyboard and focus behavior.
You should not use layout property animations in React UI components when following strict UI constraints for agent interfaces. Animating layout properties causes performance issues and reflow; instead, limit duration and use motion/react for safer animations.
Yes, you can use these UI constraints with an existing React design system. The guidelines apply across frontend components, interactions, and accessibility workflows, allowing you to layer Tailwind defaults and ARIA rules onto current project primitives.
AngelP17Standardize UI design with Tailwind-based design tokens and component patterns.
mauriciodelrioImplement performant UI animations in React/Next.js with Framer Motion and CSS transitions.
videojsAudit React UI components for ARIA accessibility and keyboard navigation.
ckorhonenEnforce Tailwind CSS and motion/react UI design constraints for agent-enabled interfaces.
