skills.rest
kentoje
kentojeCOMMUNITY
Explore all skills by this author →
GitHub

ui-skills

Enforce UI constraints for accessible agent interfaces using Tailwind defaults.

2|2|Updated Jan 5, 2021
Search Tags:#design#ui#consistency#accessibility#interaction#tailwind#aria
One-click install
npx skills add https://github.com/kentoje/dotfiles --skill ui-skills-kentoje
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/kentoje/dotfiles/tree/main/.config/claude/skills/ui-skills
Command: npx skills add https://github.com/kentoje/dotfiles --skill ui-skills-kentoje

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams enforce accessible, predictable UI patterns for agent-based interfaces, reducing UX debt and onboarding friction.

Core Features & Use Cases

  • Enforces accessible primitives and component-first design to ensure keyboard and focus behavior are reliable.
  • Promotes Tailwind CSS defaults and consistent typography, spacing, and motion to reduce visual inconsistency.
  • Use Case: Designers and engineers apply these constraints when building a new agent interaction surface (e.g., chat window, command panel) to guarantee cohesive UX.

Quick Start

Provide the next UI task (e.g., design a modal with accessible focus trap and aria-labels) and apply the Skill's constraints to ensure accessibility, consistent typography, and Tailwind defaults.

Frequently Asked Questions about ui-skills

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

FAQPage Schema
How do I ensure accessibility and keyboard focus when designing agent interfaces?▼

To ensure accessible agent interfaces, apply accessible primitives and component-first design constraints. This guarantees reliable keyboard navigation, focus trapping, and proper aria-labels for interactive components like modals and chat windows.

What are the best UI constraints for consistent typography and spacing in agent chat windows?▼

The best UI constraints for consistent agent interfaces integrate Tailwind CSS defaults with strict typography, spacing, and motion rules. This reduces visual inconsistency and UX debt across web and mobile agent interaction surfaces.

Can I use Tailwind defaults to build predictable modals and navigation for agents?▼

Yes, you can use Tailwind defaults to build predictable modals and navigation for agents. Applying these constraints ensures accessible focus traps, aria-labels, and cohesive UX across interactive components.

Why does my agent command panel have inconsistent motion and UX debt?▼

Your agent command panel has inconsistent motion and UX debt because it lacks enforced animation rules and accessible primitives. Applying strict UI constraints ensures predictable interactions and reduces onboarding friction.

Related Skills

Explore More Design & Creative Skills→
BenjamindaosonBenjamindaoson

baseline-ui

Enforce Tailwind CSS UI baselines for React components and design systems.

Community
Intermediate
vincent119vincent119

ui-component-guidelines

Standardizes UI component behavior and accessibility for web and mobile interfaces.

Community
Advanced
videojsvideojs
888

aria

Audit React UI components for ARIA accessibility and keyboard navigation.

Official
Basic
GLaDO8GLaDO8

ui-skills

Enforce opinionated UI constraints for agent-driven interfaces with Tailwind CSS.

Community
Basic