skills.rest
runkids
runkidsCOMMUNITY
Explore all skills by this author →
GitHub

ui-skills

Enforce UI constraints for accessible interfaces using Tailwind defaults and project primitives.

11|2|Updated Jan 15, 2026
Search Tags:#ui#a11y#components#constraints#tailwind#motion#design-systems
One-click install
npx skills add https://github.com/runkids/my-skills --skill ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/runkids/my-skills/tree/main/ui-skills
Command: npx skills add https://github.com/runkids/my-skills --skill ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured approach to building consistent, accessible UI for agent-assisted interactions, reducing design drift and rework.

Core Features & Use Cases

  • Enforces Tailwind defaults and project-wide constraints to ensure visual consistency.
  • Uses accessible primitives for keyboard interactions and focus management.
  • Guides component composition and animation choices to align with design-system principles.
  • Use Case: When designing a new dashboard, apply these constraints to keep typography, spacing, and interactions aligned with the project tokens.

Quick Start

Review the current UI task against the listed rules, ensuring Tailwind defaults are used, interactive elements rely on project primitives, and accessible labels are included for icon-only controls.

  • Verify an icon button has aria-label
  • Confirm h-screen is not used; prefer h-dvh
  • Ensure motion is used only when necessary and follows the recommended constraints

Frequently Asked Questions about ui-skills

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

FAQPage Schema
How do I ensure UI consistency across components using Tailwind and design constraints?▼

Apply opinionated UI constraints enforced through Tailwind defaults and project-wide primitives to maintain visual consistency. This skill guides component composition, spacing, and typography alignment to reduce design drift and ensure all interfaces follow the same design-system principles.

What's the best way to make UI components accessible for keyboard navigation and focus management?▼

Use accessible primitives with proper keyboard interactions and focus management built in. This skill ensures interactive elements include required aria-labels for icon buttons and other controls, meeting accessibility standards for agent-assisted interfaces.

How do I choose when to use motion and animation in web dashboards?▼

Motion should be applied only when necessary and follow recommended constraints tied to your design system. This skill guides animation choices to align with project tokens, preventing unnecessary motion that distracts from dashboard functionality.

Can I use h-screen with Tailwind for full-height layouts?▼

Avoid h-screen in favor of h-dvh for reliable full-height layouts that account for dynamic viewport heights. This constraint ensures consistent behavior across devices and browser viewports in web applications.

Does this approach work for designing agent-powered dashboards and complex interfaces?▼

Yes. This skill targets UI design tasks for agent-assisted interactions across components, interactions, and animations in web apps and dashboards, enforcing constraints that keep complex interfaces consistent and accessible.

What dependencies do I need before applying these UI constraints?▼

You need Tailwind CSS defaults, motion/react for animations, and accessible primitives available in your project. This skill builds on these foundations to enforce design-system rules and component composition patterns.

Related Skills

Explore More Design & Creative Skills→
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
Sanali209Sanali209

ui-ux-pro-max

Generate comprehensive UI/UX design systems covering color, typography, spacing, components, and accessibility.

Community
Advanced
majesticlabs-devmajesticlabs-dev
47

frontend-design

Create distinctive frontend interfaces with typography, color, and motion guidelines.

Official
Advanced
vercel-labsvercel-labs
5.8k

baseline-ui

Validate animation durations, typography scale, and accessibility in Tailwind CSS projects.

Official
Intermediate