skills.rest
sgpropertyanalytics
sgpropertyanalyticsOFFICIAL
Explore all skills by this author →
GitHub

ui-skills

Enforce React and Tailwind UI constraints for agent-facing interfaces.

2|1|Updated Dec 15, 2025
Search Tags:#accessibility#react#tailwind#design-system#motion#ui-guidelines
One-click install
npx skills add https://github.com/sgpropertyanalytics/sg-property-analytics --skill ui-skills-sgpropertyanalytics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/sgpropertyanalytics/sg-property-analytics/tree/main/.claude/skills/ui-skills
Command: npx skills add https://github.com/sgpropertyanalytics/sg-property-analytics --skill ui-skills-sgpropertyanalytics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing agent-facing interfaces that are consistent, accessible, and maintainable can be challenging without a shared set of constraints and patterns.

Core Features & Use Cases

  • Tailwind-first defaults: enforce the use of Tailwind CSS defaults (spacing, radius, shadows) to maintain a cohesive visual language.
  • Interaction & accessibility: require accessible primitives (Base UI, React Aria, Radix) and always add aria-labels to icon-only buttons; discourage mixing primitive systems.
  • Animation governance: use motion/react for required animations and avoid unnecessary effects to keep performance and UX stable.
  • Design-system alignment: reuse existing primitives and follow a fixed z-index scale and layout conventions; prefer Base UI for new primitives when possible.

Quick Start

Apply these constraints when starting a new agent-driven interface to ensure accessible, consistent, and performant UI.

Frequently Asked Questions about ui-skills

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

FAQPage Schema
What are UI guidelines for building accessible agent interfaces in React?▼

UI guidelines for accessible agent interfaces require using accessible primitives like Base UI or Radix, adding aria-labels to icon-only buttons, and enforcing Tailwind defaults to maintain a cohesive visual language.

How do I enforce consistent design system usage in a React and Tailwind frontend?▼

Enforce consistent design system usage by applying Tailwind-first defaults for spacing and shadows, reusing existing primitives, following a fixed z-index scale, and avoiding mixing different primitive systems.

What is the best way to manage animations in React agent interfaces?▼

Manage animations in React agent interfaces by using motion/react for required animations and avoiding unnecessary effects to keep performance and UX stable.

Can I use Radix primitives alongside Base UI when building agent interfaces?▼

Mixing primitive systems is discouraged for building agent interfaces. You should reuse existing accessible primitives and prefer Base UI when creating new components to maintain consistency.

Do I need Tailwind CSS to apply these UI constraints for agent-facing interfaces?▼

Yes, Tailwind CSS is required. The UI constraints mandate using Tailwind defaults for spacing, radius, and shadows as the single source of truth for styling agent-facing interfaces.

Why should frontend teams use opinionated UI constraints for agent interfaces?▼

Opinionated UI constraints solve the challenge of designing agent-facing interfaces that are consistent, accessible, and maintainable without relying on a fragmented shared set of patterns.

Related Skills

Explore More Design & Creative Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
reVrostreVrost
1

ui-skills

Enforce accessible UI component constraints across React and Tailwind code reviews.

Community
Intermediate
runkidsrunkids
11

ui-skills

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

Community
Basic
trungdo9trungdo9
3

ui-styling

Create React-based user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced