skills.rest
surfingalien
surfingalienCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Applies opinionated constraints for building accessible UI components with Tailwind CSS and motion/react.

1|Updated May 6, 2026
Search Tags:#accessibility#frontend#design system#tailwind css#animation#ui design#react components
One-click install
npx skills add https://github.com/surfingalien/FinSurfing --skill ui-design-surfingalien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/surfingalien/FinSurfing/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/surfingalien/FinSurfing --skill ui-design-surfingalien

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Agents building frontend interfaces often produce inconsistent spacing, poor color contrast, missing loading/error states, and inaccessible components. This Skill enforces a strict rule set so generated UI code follows accessibility standards, animation best practices, and consistent design systems. ## Core Features & Use Cases - Component Rules: Mandates accessible primitives (Base UI, Radix, React Aria), aria-labels on icon buttons, and AlertDialog for destructive actions. - Animation Constraints: Restricts animation to transform and opacity, enforces 200ms feedback limits, and requires prefers-reduced-motion support via motion/react and tw-animate-css. - Layout & Typography Standards: Enforces Tailwind default scales, text-balance/text-pretty, tabular-nums, fixed z-index scales, and h-dvh viewport sizing. - Use Case: When asking an agent to build a dashboard card or settings form, the Skill ensures the output uses proper contrast ratios, 44px touch targets, skeleton loading states, and responsive stacking instead of arbitrary pixel values. ## Quick Start Use the ui-design skill to build a responsive settings panel with Tailwind CSS, accessible form controls, and a skeleton loading state.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I build accessible UI components with Tailwind CSS?▼

Use accessible primitives like Base UI, Radix, or React Aria for keyboard and focus behavior instead of rebuilding interactions by hand. Add aria-label to icon-only buttons, maintain WCAG AA contrast ratios, and ensure touch targets are at least 44x44 pixels.

What CSS properties are safe to animate for good performance?▼

Only animate transform and opacity, which run on the compositor without triggering layout or paint. Never animate width, height, top, left, margin, or padding, and avoid animating large blur or backdrop-filter surfaces.

Should I use framer-motion or CSS animations in React?▼

Use motion/react (formerly framer-motion) for JavaScript-driven animation and tw-animate-css for entrance and micro-animations. Keep interaction feedback under 200ms, use ease-out on entrances, and respect prefers-reduced-motion.

Why does my Tailwind layout look inconsistent across components?▼

Inconsistency usually comes from arbitrary pixel values like ml-[13px] instead of the Tailwind spacing scale. Stick to system values (ml-4, p-6, gap-8), use size-x for square elements, and define fixed patterns for buttons, cards, and section gaps.

How do I handle loading and empty states in React interfaces?▼

Use structural skeletons instead of spinners so layouts stay stable while loading. Show errors next to the action that failed with a retry option, and give empty states one clear next action such as a create button.

Related Skills

Explore More Design & Creative Skills→
sagittarassagittaras

write-ux-spec

Writes or updates a UX specification document for one screen or flow through guided interview and independent review.

Official
Advanced
HouseGarofaloHouseGarofalo
3

cypress

Automate end-to-end and component testing for web applications with Cypress.

Official
Advanced
p-o-ke-naep-o-ke-nae

visual-design-foundations

Create cohesive visual design systems with typography, color, spacing, and iconography standards.

Community
Intermediate
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced