skills.rest
Loosand
LoosandCOMMUNITY
Explore all skills by this author →
GitHub

ui-skills

Audit React UI components against fixed constraint rules for Tailwind, motion, and accessibility.

Updated Jan 27, 2026
Search Tags:#ui#accessibility#react#components#design-system#motion#tailwind-css
One-click install
npx skills add https://github.com/Loosand/next-forge --skill ui-skills-loosand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/Loosand/next-forge/tree/main/.agents/skills/ui-skills
Command: npx skills add https://github.com/Loosand/next-forge --skill ui-skills-loosand

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

固定约束规则帮助开发团队在 UI 构建中实现一致性、可访问性和可维护性，降低设计偏差和实现错误。

Core Features & Use Cases

  • 统一的组件原语与可访问性原则，优先使用现有组件原语并确保无障碍支持。
  • 在 Tailwind CSS 默认值优先，避免使用自定义值，规范动效和排版。
  • 覆盖交互、动画、排版、布局、性能等方面的指南，确保在复杂界面中的一致体验。
  • 使用场景示例：审查按钮、表单、模态框等组件以保持一致性和可用性。
  • 用于团队协作的设计系统规则，帮助新开发者快速对齐。

Quick Start

Use the UI skills to audit a UI component by applying the defined constraints to a given component.

Frequently Asked Questions about ui-skills

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

FAQPage Schema
How do I audit React components for accessibility and UI consistency?▼

To enforce UI constraints, audit your React components against fixed rules covering Tailwind CSS defaults, accessibility primitives, motion guidelines, and component composition. This ensures interfaces remain consistent, accessible, and maintainable across your project.

What are fixed UI constraint rules and when do I need them for component development?▼

Fixed UI constraint rules are standards for layouts, interactions, and accessibility within React projects. You need them during component development and review to reduce design deviation, enforce accessibility primitives, and maintain a consistent user experience across complex interfaces.

Does this UI auditing approach work with Tailwind CSS custom values?▼

This UI auditing approach prioritizes Tailwind CSS defaults and discourages custom values. By enforcing these fixed defaults for styling and motion, teams can standardize animation, typography, and layout behaviors across all interface components.

How do I enforce design system rules for team collaboration in React?▼

Enforce design system rules by applying fixed constraints to component development and review processes. This helps new developers quickly align with unified component primitives, Tailwind defaults, and accessibility principles, ensuring disciplined component composition across the team.

What is the best way to standardize motion guidelines and accessibility in React?▼

The best way to standardize motion and accessibility is to audit your UI code against comprehensive fixed constraint rules. This enforces consistent motion guidelines, prioritizes existing accessibility primitives, and ensures disciplined component composition throughout the interface.

Related Skills

Explore More Design & Creative Skills→
gustavscirulisgustavscirulis
114

baseline-ui

Validate Tailwind CSS UI against animation, typography, accessibility, and layout constraints.

Community
Intermediate
KARENLHAOKARENLHAO
1

ui-skills

Apply opinionated UI constraints to Tailwind CSS, React, and accessibility checks.

Community
Intermediate
shawn-sandyshawn-sandy

wcag-compliance-reviewer

Identify WCAG 2.1 AA accessibility violations in HTML/CSS and React/TypeScript code.

Community
Intermediate
unthinkmediaunthinkmedia

ux-design-system-auditor

Audit UI implementations against design system guidelines for compliance deviations.

Community
Intermediate