skills.rest
mattdowney
mattdowneyCOMMUNITY
Explore all skills by this author →
Website𝕏@mattdowneyGitHub

ui-skills

Defines UI constraints enforcing Tailwind CSS defaults and ARIA-labeled icon-only buttons for web tasks.

Updated Aug 23, 2026
Search Tags:#ui#accessibility#components#tailwind#design-system#design-constraints#motion-react
One-click install
npx skills add https://github.com/mattdowney/ai-skills --skill ui-skills-mattdowney
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/mattdowney/ai-skills/tree/main/ui-skills
Command: npx skills add https://github.com/mattdowney/ai-skills --skill ui-skills-mattdowney

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This set of constraints guides UI designers and developers to create consistent, accessible interfaces by enforcing a compact, opinionated design system.

Core Features & Use Cases

  • Enforces Tailwind CSS default usage for uniform styling across projects.
  • Ensures accessibility and keyboard focus handling via accessible primitives and ARIA attributes.
  • Guides component usage and prevents mixing primitive systems to maintain consistency.

Quick Start

Apply ui-skills constraints to your current UI task to enforce all rules.

Frequently Asked Questions about ui-skills

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

FAQPage Schema
How do I maintain consistent UI design constraints when building web components?▼

Consistent UI design constraints are maintained by enforcing a curated set of rules for interface design, ensuring uniform styling and accessibility across all web components. This approach prevents mixing primitive systems and relies on existing project primitives.

How do I ensure Tailwind CSS defaults are properly applied across my design system?▼

Tailwind CSS defaults are applied properly by adhering to a strict set of UI constraints that enforce uniform styling across projects. This prevents deviations and ensures consistent component design and interaction patterns.

What is the best way to handle accessibility and keyboard focus in web UI tasks?▼

Accessibility and keyboard focus are handled by utilizing accessible primitives and enforcing ARIA attributes, such as requiring aria-labels on icon-only buttons. This ensures compliance and quality across interface implementations.

Can I use motion/react for animations while enforcing UI constraints?▼

Yes, motion/react is explicitly required for animations within this UI constraint framework. Proper usage ensures interaction patterns remain consistent while adhering to the established design system rules.

Why should I avoid mixing primitive systems in interface implementation?▼

Mixing primitive systems in interface implementation is avoided to maintain strict consistency and quality across projects. Relying exclusively on existing project primitives ensures a compact, opinionated design system without conflicts.

Does this UI constraint system support custom styling outside of Tailwind CSS?▼

No, this UI constraint system requires strict adherence to Tailwind CSS default usage for uniform styling. Deviating into custom styling outside of Tailwind CSS breaks the enforced design system consistency.

Related Skills

Explore More Design & Creative Skills→
kmshihab7878kmshihab7878
6

baseline-ui

Validate Tailwind CSS UI components for motion, typography, accessibility, and layout rules.

Community
Advanced
mbdeatonmbdeaton

epic-ui-guidelines

Guide UI/UX best practices, accessibility, and component usage in Epic Stack.

Community
Intermediate
iadr-deviadr-dev
2

baseline-ui

Enforces Tailwind UI baselines for typography, accessibility, layout, and animation in apps via cn-based classes.

Community
Intermediate
SyedaashnaghazanfarSyedaashnaghazanfar
2

shadcn

Provide accessible UI components for React apps built with Tailwind CSS.

Community
Advanced