ui-skills_skill

Overview

This skill provides opinionated constraints and best practices for building consistent, accessible, and performant interfaces for AI agents. It packages a focused UI prescription—layout, components, animation, typography, and performance rules—so teams can ship cohesive agent UIs quickly. The guidance is TypeScript- and Tailwind-first and favors established primitives and motion libraries.

How this skill works

The skill defines a set of MUST/SHOULD/NEVER rules that guide implementation choices: which CSS tokens to use, which component primitives to prefer, how to handle animation and accessibility, and which layout and performance patterns to avoid. It inspects UI decisions and offers concrete prescriptions (e.g., use AlertDialog for destructive actions, prefer Base UI primitives, animate only compositor properties) so code and designs remain predictable.

When to use it

• Building or auditing agent-facing interfaces where consistency and accessibility are priorities
• Starting a new UI module that will be reused across multiple agent subagents
• Integrating animation or motion and needing clear constraints to preserve performance
• Defining component libraries or design-system rules for agent UIs
• Enforcing keyboard and focus behavior for interactive surfaces

Best practices

• Use Tailwind defaults first (spacing, radius, shadows) and extend only when necessary
• Prefer existing project primitives; default to Base UI for new primitives when compatible
• Always add aria-labels to icon-only buttons and rely on accessible primitives for focus
• Animate only transform and opacity, respect prefers-reduced-motion, and cap interactions at 200ms
• Show errors inline, provide a clear next action for empty states, and respect safe-area-inset for fixed elements

Example use cases

• Creating a chat pane for an assistant that respects keyboard focus, animation limits, and safe areas
• Building a reusable AlertDialog pattern for destructive operations across agent tools
• Designing loading skeletons and small entrance animations using tw-animate-css and motion/react
• Auditing an existing UI to remove expensive paint animations, arbitrary z-indices, and forbidden effects like primary glows
• Extending a component library while ensuring consistent typography (text-balance, text-pretty, tabular-nums)