skills.rest
amano--
amano--COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-skills

Enforce UI constraints for agents using Tailwind CSS and accessible primitives.

Updated Jan 24, 2026
Search Tags:#ui#accessibility#frontend#design system#guidelines#ux
One-click install
npx skills add https://github.com/amano--/call-center --skill ui-skills-amano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/amano--/call-center/tree/main/.agent/skills/design-system/ui-skills
Command: npx skills add https://github.com/amano--/call-center --skill ui-skills-amano

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a set of opinionated constraints and guidelines to ensure consistency, accessibility, and performance in UI development, helping agents build better interfaces.

Core Features & Use Cases

  • Enforces Design Principles: Ensures adherence to best practices in typography, layout, and design.
  • Optimizes Interactions: Guides the implementation of user interactions and animations for a smooth experience.
  • Promotes Accessibility: Mandates the use of accessible component primitives and best practices.
  • Use Case: When an agent is tasked with creating a new modal dialog, invoking this skill will ensure it follows accessibility standards, uses appropriate animation, and adheres to the project's design system.

Quick Start

Apply these UI constraints to the current conversation's UI work.

Frequently Asked Questions about ui-skills

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

FAQPage Schema
How do I build accessible frontend interfaces with consistent design system guidelines?▼

To optimize UI animations without anti-patterns, apply specific constraints that enforce the use of motion/react. This guides interactions to maintain smooth performance while avoiding common layout and animation pitfalls.

Does this UI skill enforce specific frontend libraries for layout and interactions?▼

To optimize UI animations without anti-patterns, apply specific constraints that enforce the use of motion/react. This guides interactions to maintain smooth performance while avoiding common layout and animation pitfalls.

What are common UI layout and animation anti-patterns to avoid when generating components?▼

Common UI layout and animation anti-patterns involve ignoring performance constraints and using inaccessible component primitives. Applying strict UI guidelines prevents these issues by enforcing best practices for typography, layout, and motion.

How do I ensure my generated modal dialog follows UX and accessibility standards?▼

To ensure a generated modal dialog follows UX and accessibility standards, apply UI constraints that mandate accessible component primitives. This enforces appropriate animation and design system adherence for smooth interactions.

What's the best way to establish design principles for frontend user interface generation?▼

The best way to establish design principles for frontend user interface generation is to apply opinionated constraints. This enforces best practices in typography, stack selection, and performance to build better interfaces.

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
Alfie728Alfie728

ui-skills

Enforce Tailwind CSS and React UI constraints for accessibility and performance.

Community
Basic
zacjones93zacjones93

design

Assess UI/UX design problems across screens, layouts, typography, and accessibility.

Community
Basic
avoidthekitchenavoidthekitchen
1

web-design-guidelines

Audit HTML, CSS, and JavaScript/React files against Web Interface Guidelines.

Community
Intermediate