skills.rest
LadderChaos
LadderChaosCOMMUNITY
Explore all skills by this author →
GitHub

ui-rules

Enforce unified accessible UI design policies for agent-driven interfaces.

Updated Aug 27, 2026
Search Tags:#design#accessibility#components#UI#Tailwind CSS#interaction#guidelines
One-click install
npx skills add https://github.com/LadderChaos/tora-skills --skill ui-rules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-rules
Source: https://github.com/LadderChaos/tora-skills/tree/main/ui-rules
Command: npx skills add https://github.com/LadderChaos/tora-skills --skill ui-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Opinionated interface constraints for agent-powered applications to ensure consistency, accessibility, and maintainability.

Core Features & Use Cases

  • Unified design primitives: reuse accessible primitives across surfaces to enforce consistency.
  • Accessibility-first: ensure keyboard navigation, ARIA attributes, and readable typography across components.
  • Interaction guidelines: define animation, timing, and state management rules to reduce cognitive load on users.
  • Use Case: Imagine building an agent dashboard where teams collaborate with AI to complete tasks; applying ui-rules enforces consistent visuals and predictable interactions.

Quick Start

Audit your UI surfaces against the ui-rules concise checklist and incorporate fixes in your component library.

Frequently Asked Questions about ui-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce accessible UI design in agent-driven dashboards?▼

Agent interface consistency is maintained by reusing accessible primitives across all component surfaces, defining interaction guidelines for animation and state management to reduce user cognitive load.

How do I audit my component library for accessible interaction guidelines?▼

You audit your component library against a concise UI constraints checklist, verifying Tailwind defaults, ARIA attributes, and interaction guidelines, then incorporate fixes directly into your components.

Does this UI design policy work with Tailwind CSS defaults?▼

Yes, the UI design policy explicitly satisfies constraints for Tailwind CSS defaults, allowing you to apply accessible primitives and interaction guidelines within your existing Tailwind component workflow.

What is the best way to standardize visuals across agent-powered applications?▼

Standardizing visuals across agent-powered applications requires a unified design policy that codifies accessible components, predictable interactions, and typography rules to ensure maintainability and reduce cognitive load.

Why do my agent dashboard components have inconsistent interaction states?▼

Agent dashboard components have inconsistent interaction states when they lack codified interaction guidelines for animation, timing, and state management, which this UI constraints skill resolves by enforcing unified primitives.

Related Skills

Explore More Design & Creative Skills→
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
LazyIsEfficientLazyIsEfficient
15

frontend-ui-engineering

Create React UI components with design-system and accessibility compliance.

Official
Advanced
viralcodeviralcode
61

ui-skills

Enforces UI constraints for AI agent dashboards using Tailwind CSS and framer-motion.

Community
Intermediate
no-problem-devno-problem-dev
5

design-audit

Audit SwiftUI Views for Design System token compliance and accessibility.

Official
Intermediate