ui-skills

Enforce opinionated UI constraints for consistency, accessibility, and performance.

Updated Jan 29, 2026

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

Ready to run

npx skills add https://github.com/raduceuca/wcgw-fun --skill ui-skills-raduceuca

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/raduceuca/wcgw-fun/tree/main/.claude/skills/ui-skills
Command: npx skills add https://github.com/raduceuca/wcgw-fun --skill ui-skills-raduceuca

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and best practices to ensure consistency, accessibility, and performance when building user interfaces for agents.

Core Features & Use Cases

Consistent UI Development: Enforces standards for styling, components, and interaction patterns.
Accessibility Compliance: Promotes the use of accessible primitives and ARIA attributes.
Performance Optimization: Guides against performance pitfalls in animation and rendering.
Use Case: Ensure all buttons with icons have an accessible label, or that animations are performant and respect user preferences.

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 consistent UI development and accessibility standards when building interfaces with AI agents?▼

To enforce consistent UI development and accessibility, apply opinionated constraints that guide styling, component primitives, and interaction patterns. This ensures interfaces built with agents maintain standards for ARIA attributes and compliance.

What are the best practices for accessible dialog and button components in frontend design systems?▼

Accessible dialog and button components require using accessible primitives and ARIA attributes. Ensure all buttons with icons have an accessible label and follow established interaction patterns to maintain compliance and usability.

Does this UI skill work with Tailwind CSS and framer-motion for frontend development?▼

Yes, this UI skill works with Tailwind CSS and framer-motion by enforcing opinionated stack choices. It guides animation best practices and performance considerations to prevent rendering pitfalls while using these technologies.

How do I optimize UI animation performance and respect user preferences in frontend applications?▼

To optimize UI animation performance, follow best practices that guide against performance pitfalls in rendering. Ensure animations respect user preferences by applying opinionated constraints to interaction patterns and motion implementations.

Can I use component primitives from Base UI, React Aria, or Radix for building agent interfaces?▼

Yes, you can use component primitives from Base UI, React Aria, or Radix. The skill enforces standards for styling and interaction patterns using these primitive libraries to ensure accessibility and consistency.

Why do my AI-generated user interfaces lack consistency and accessibility compliance?▼

AI-generated user interfaces lack consistency and accessibility because they miss opinionated constraints. Applying standards for styling, accessible primitives, and interaction patterns ensures compliance and prevents performance pitfalls.