ui-skills

Name: ui-skills
Availability: InStock
Author: Akbar

Enforce Tailwind defaults, accessible primitives, and safe animation practices in UI development.

1|Updated Aug 24, 2025

Search Tags:#ui #accessibility #frontend #components #constraints #tailwind #design-system

Ready to run

npx skills add https://github.com/akbarmridho/personal-server --skill ui-skills-akbarmridho

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/akbarmridho/personal-server/tree/main/.claude/skills/ui-skills
Command: npx skills add https://github.com/akbarmridho/personal-server --skill ui-skills-akbarmridho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies a set of opinionated UI constraints to ensure consistent, accessible, and performant interfaces across projects, reducing design-decisions overhead and implementation drift.

Core Features & Use Cases

Enforces Tailwind CSS defaults and consistent styling across components to speed up UI work.
Promotes safe, accessible interactions by requiring proper primitives, ARIA labels, and proper focus management.
Recommends animation only when requested, using compositor props and respecting prefers-reduced-motion.
Guides layout choices (z-index, fixed sizes) and typography defaults to ensure consistency.
Use Case: When reviewing or building dashboards and complex interfaces, apply these constraints to maintain cohesive UX.

Quick Start

Use the ui-skills to apply constraints to your UI work in this conversation. You can run /ui-skills or /ui-skills <file> to validate and enforce constraints.

Frequently Asked Questions about ui-skills

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

FAQPage Schema

How do I enforce consistent UI constraints and accessibility standards in frontend components?▼

To enforce consistent UI constraints and accessibility standards in frontend components, apply opinionated rules for Tailwind defaults, accessible primitives, ARIA labels, and focus management. This ensures interface consistency and reduces implementation drift across design systems.

What are safe animation practices for frontend interfaces respecting prefers-reduced-motion?▼

Safe animation practices for frontend interfaces respecting prefers-reduced-motion involve recommending animations only when requested, using compositor properties. This approach ensures accessible interactions without triggering unnecessary motion for sensitive users.

Does this UI constraint skill work with existing Tailwind CSS design systems?▼

Yes, this UI constraint skill works with existing Tailwind CSS design systems by enforcing Tailwind defaults and consistent styling across components. It guides both design and implementation workflows to maintain cohesive UX in complex interfaces like dashboards.

How do I validate UI layout choices like z-index and fixed sizes for design consistency?▼

To validate UI layout choices like z-index and fixed sizes for design consistency, apply opinionated constraints that guide typography defaults and layout structures. This reduces design-decision overhead and ensures cohesive interfaces across projects.

Why does implementation drift happen in UI development and how do constraints prevent it?▼

Implementation drift happens in UI development due to inconsistent design decisions across projects. Constraints prevent it by codifying opinionated rules for Tailwind styling, accessible primitives, and layout guidelines, ensuring performant and consistent interfaces.

When do I need opinionated UI constraints for building complex dashboards?▼

You need opinionated UI constraints for building complex dashboards when you want to maintain cohesive UX and reduce design-decision overhead. Applying these constraints ensures consistent styling, accessible interactions, and safe typography layout guidelines.