skills.rest
better-i18n
better-i18nOFFICIAL
Explore all skills by this author →
Website𝕏@betteri18nGitHub

ui-skills

Enforce accessible, performant UI constraints for agent-driven web development.

16|3|Updated Feb 1, 2026
Search Tags:#ui#accessibility#design system#react components#tailwindcss#agent workflows#animation constraints
One-click install
npx skills add https://github.com/better-i18n/oss --skill ui-skills-better-i18n
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/better-i18n/oss/tree/main/apps/landing/.claude/skills/ui-skills
Command: npx skills add https://github.com/better-i18n/oss --skill ui-skills-better-i18n

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inconsistent, inaccessible, and poorly performing UI implementations by enforcing a clear set of interface constraints for agent-assisted work.

Core Features & Use Cases

  • Opinionated UI constraints: Enforces Tailwind defaults, animation boundaries, typography rules, and layout/z-index standards to keep UI quality consistent.
  • Accessibility-first interaction patterns: Requires accessible primitives for focus/keyboard behavior and mandates aria-labels for icon-only buttons.
  • Safer UI state and motion: Guides destructive actions toward AlertDialog, recommends skeleton loading, and restricts animation to compositor-friendly properties.

Quick Start

Apply the ui-skills constraints to your Next.js/React component work by requesting: Review the proposed UI changes for accessibility, animation, layout rules, and error placement, and list any violations with exact line snippets and fixes.

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 and keyboard behavior in React components?▼

Accessible UI requires primitives from Base UI, React Aria, or Radix to manage focus and keyboard interactions. You must also mandate aria-labels for icon-only buttons to ensure screen reader compatibility.

What are the best TailwindCSS constraints for performant web interfaces?▼

Performant TailwindCSS interfaces require compositor-only animations, prefers-reduced-motion support, and specific layout rules. Use h-dvh for height, apply safe-area insets, and follow strict z-index usage standards.

Does this UI approach work with agent-driven interface development?▼

Yes, these UI constraints are specifically designed for agent-assisted work. You can request a review of proposed UI changes to list accessibility, animation, and layout violations with exact line snippets and fixes.

How do I handle destructive actions and loading states in an accessible design system?▼

Destructive actions should use AlertDialog components to ensure user consent, while loading states should implement skeleton loading placeholders. This maintains layout stability and accessibility during asynchronous operations.

Why do my web animations cause performance issues and layout shifts?▼

Animation performance issues occur when using non-compositor-friendly properties. Restrict animations to compositor-only properties and ensure prefers-reduced-motion support to prevent jank and respect user accessibility settings.

What is the correct way to compose TailwindCSS classes in a React design system?▼

Class composition in a constrained React design system requires using cn-based utilities to merge TailwindCSS defaults. This ensures consistent styling while preventing style conflicts across shared interface components.

Related Skills

Explore More Design & Creative Skills→
antonyfmunozantonyfmunoz

tailwind

Configure Tailwind CSS v4 with @theme, @utility, and @variant for React interfaces.

Community
Intermediate
VMRam95VMRam95

web-design-guidelines

Audit React and HTML code for WCAG accessibility and Vercel design compliance.

Community
Intermediate
imkdwimkdw
1

Frontend Accessibility

Implement accessible React components with ARIA, keyboard navigation, and WCAG compliance.

Community
Intermediate
waltcowwaltcow
1

frontend-design

Create production-grade frontend interfaces with distinctive typography, color, motion, and layout.

Community
Advanced