playbooks

home / skills / vaayne / agent-kit / ui-skills

ui-skills skill

/skills/ui-skills

This skill enforces opinionated UI constraints for building accessible, performant interfaces with agents, covering components, animation, layout, and

npx playbooks add skill vaayne/agent-kit --skill ui-skills

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.9 KB
---
name: ui-skills
description: Opinionated constraints for building better interfaces with agents.
---

# UI Skills

Opinionated constraints for building better interfaces with agents.

## Stack

- MUST use Tailwind CSS defaults (spacing, radius, shadows) before custom values
- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required
- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS
- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic

## Components

- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`)
- MUST use the project’s existing component primitives first
- NEVER mix primitive systems within the same interaction surface
- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack
- MUST add an `aria-label` to icon-only buttons
- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested

## Interaction

- MUST use an `AlertDialog` for destructive or irreversible actions
- SHOULD use structural skeletons for loading states
- NEVER use `h-screen`, use `h-dvh`
- MUST respect `safe-area-inset` for fixed elements
- MUST show errors next to where the action happens
- NEVER block paste in `input` or `textarea` elements

## Animation

- NEVER add animation unless it is explicitly requested
- MUST animate only compositor props (`transform`, `opacity`)
- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`)
- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons)
- SHOULD use `ease-out` on entrance
- NEVER exceed `200ms` for interaction feedback
- MUST pause looping animations when off-screen
- MUST respect `prefers-reduced-motion`
- NEVER introduce custom easing curves unless explicitly requested
- SHOULD avoid animating large images or full-screen surfaces

## Typography

- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs
- MUST use `tabular-nums` for data
- SHOULD use `truncate` or `line-clamp` for dense UI
- NEVER modify `letter-spacing` (`tracking-`) unless explicitly requested

## Layout

- MUST use a fixed `z-index` scale (no arbitrary `z-x`)
- SHOULD use `size-x` for square elements instead of `w-x` + `h-x`

## Performance

- NEVER animate large `blur()` or `backdrop-filter` surfaces
- NEVER apply `will-change` outside an active animation
- NEVER use `useEffect` for anything that can be expressed as render logic

## Design

- NEVER use gradients unless explicitly requested
- NEVER use purple or multicolor gradients
- NEVER use glow effects as primary affordances
- SHOULD use Tailwind CSS default shadow scale unless explicitly requested
- MUST give empty states one clear next action
- SHOULD limit accent color usage to one per view
- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones

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)

FAQ

What animation properties are allowed?

Only compositor properties—transform and opacity—should be animated; avoid layout or expensive paint properties.

Which component primitives should I use?

Use the project’s existing primitives first; prefer Base UI for new primitives when compatible, and never mix primitive systems on the same interaction surface.