Ui Skills

Opinionated constraints for building better interfaces with agents.

Security Scan

This is an instruction-only, opinionated UI guideline skill that is internally consistent with its name and description and does not request credentials or install code.

Purpose & Capability

The name/description match the content: SKILL.md is an opinionated checklist for building agent UIs and mandates particular libraries/patterns. The skill asks for no binaries, env vars, or installs, which is proportionate for a guideline-only skill.

Instruction Scope

Runtime instructions are purely prescriptive UI/UX constraints (components, animation, accessibility, performance) and do not instruct the agent to read files, access credentials, or transmit data to external endpoints. It does prescribe specific libraries/tools but does not attempt to install or fetch them.

Install Mechanism

No install spec is provided and there are no code files — lowest-risk instruction-only skill; nothing will be written to disk by the skill itself.

Credentials

The skill requires no environment variables, credentials, or config paths; requested scope is minimal and appropriate for a documentation/guideline skill.

Persistence & Privilege

No elevated persistence requested (always:false) and no instructions to modify agent or system-level settings. Autonomous invocation is permitted by default but is not combined with other concerning privileges.

Assessment

This skill is essentially a static style and accessibility checklist — it does not access secrets, install code, or read your files. It's safe from a permissions perspective, but keep in mind: (1) it is opinionated and may constrain design choices; (2) it references specific libraries/tools without providing installation steps, so verify those dependencies exist in your project before following the rules; and (3) the skill source/homepage is unknown, so if provenance or licensing matters to you, ask for the author or a homepage before relying on it.

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 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