skills.rest
quanphm
quanphmCOMMUNITY
Explore all skills by this author →
𝕏@quan_phmnGitHub

ui-skills

Apply opinionated UI constraints to agent-enabled interfaces for consistency and accessibility.

Updated Apr 26, 2023
Search Tags:#design#ui#accessibility#components#constraints#tailwind
One-click install
npx skills add https://github.com/quanphm/dotfiles --skill ui-skills-quanphm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/quanphm/dotfiles/tree/main/opencode/skills/ui-skills
Command: npx skills add https://github.com/quanphm/dotfiles --skill ui-skills-quanphm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI teams often struggle with inconsistent interfaces and slow iteration due to ambiguous design constraints.

Core Features & Use Cases

  • Enforces accessible, consistent component primitives and Tailwind defaults.
  • Guides integration of motion and UI primitives while avoiding anti-patterns.
  • Use Case: When building an admin dashboard, apply these constraints to ensure consistency and accessibility across pages.

Quick Start

Apply these constraints to your current UI work to maintain consistency and accessibility across components.

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 design constraints across an admin dashboard?▼

To enforce consistent UI design constraints, apply opinionated accessibility rules and Tailwind defaults to component primitives. This ensures predictable behavior and usability across dashboards, forms, and interactive interfaces.

What are accessible UI constraints and how do they apply to agent-driven interfaces?▼

Accessible UI constraints are predefined rules for component primitives, motion usage, and safe interaction patterns. They guide teams in building agent-enabled interfaces by enforcing accessibility standards and preventing anti-patterns.

How do I integrate motion into interactive components without creating UI anti-patterns?▼

To integrate motion without anti-patterns, apply specific motion usage rules and constraints that dictate safe interaction patterns. This maintains predictable behavior while guiding the integration of UI primitives.

Can I use these UI constraints with existing Tailwind defaults for frontend forms?▼

Yes, you can use these UI constraints with Tailwind defaults. The playbook enforces Tailwind defaults and accessible component primitives to ensure consistency across frontend design and development tasks like forms.

What is the best way to standardize accessibility and component primitives for agent-enabled interfaces?▼

The best way to standardize accessibility is by applying an opinionated design playbook. It provides explicit constraints for accessible primitives, Tailwind defaults, and motion rules to maintain consistent and usable interfaces.

Related Skills

Explore More Design & Creative Skills→
oxorpoxorp

tailwindcss-development

Apply Tailwind CSS v4 utilities to style components and responsive layouts.

Community
Intermediate
GLaDO8GLaDO8

ui-skills

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

Community
Basic
svngokusvngoku
8

ui-skills

Enforce UI consistency and accessibility constraints for React/Next.js projects.

Community
Advanced
riezriez
1

frontend-implementation-guardrails

Enforce frontend guardrails for design-system alignment, accessibility, and responsive behavior.

Community
Intermediate