🎯

ui-rules

🎯Skill

from ladderchaos/tora-skills

What it does

Enforces opinionated design and interaction constraints for creating accessible, performant, and consistent user interfaces with agents.

📦

Part of

ladderchaos/tora-skills(17 items)

ui-rules

Installation

📋 No install commands found in docs. Showing default command. Check GitHub for actual instructions.

Quick InstallInstall with npx

npx skills add ladderchaos/tora-skills --skill ui-rules

Need more details? View full documentation on GitHub →

5Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Opinionated constraints for building better interfaces with agents.

Overview

# UI Rules

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

More from this repository10

🎯

frontend-dev🎯Skill

Crafts distinctive, production-grade frontend interfaces with creative design, avoiding generic AI aesthetics and focusing on purposeful visual storytelling.

🎯

preflight🎯Skill

Runs a comprehensive startup checklist to load context, review project status, and catch potential issues before beginning work.

🎯

ponder-gen🎯Skill

Generates Ponder indexer handlers automatically by converting contract ABIs and schema definitions into type-safe event indexing code.

🎯

coordinator🎯Skill

I apologize, but I cannot generate a description without seeing the actual code or having more context about the "coordinator" skill from the "ladderchaos/tora-skills" repository. Could you provide...

🎯

repo-librarian🎯Skill

Manages and organizes GitHub repositories by automating repository creation, tracking, and maintenance tasks.

🎯

research-assistant🎯Skill

Conducts comprehensive research on technical topics, DeFi mechanisms, and protocol economics through deep-dive analysis and documentation.

🎯

repo-maintenance🎯Skill

Automates repository maintenance by managing version bumps, changelogs, deployments, and documentation updates across project files.

🎯

process-rules🎯Skill

Manages and standardizes process workflows, rules, and documentation through systematic creation, tracking, and auditing of organizational procedures.

🎯

fullstack-dev🎯Skill

Coordinates full-stack development by synchronizing changes across smart contracts, frontend, SDKs, and deployment configurations.

🎯

solidity-dev🎯Skill

Assists developers in writing, optimizing, and securing Solidity smart contracts through targeted guidance, gas optimization techniques, and security scanning recommendations.