Does this skill help with performance optimization?

Yes, it includes strict rules against animating layout properties, avoids heavy CSS filters, and restricts the use of useEffect for logic that can be handled during render.

What frontend stack does this skill favor?

It prioritizes Tailwind CSS for styling, motion/react (formerly framer-motion) for animations, and accessible headless primitives like Base UI, Radix, or React Aria.

Is it compatible with mobile web development?

Absolutely. It mandates the use of dynamic viewport units like h-dvh and requires fixed elements to respect safe-area-insets for modern mobile devices.

How does it handle web accessibility?

The skill enforces the use of established accessibility primitives for keyboard/focus behavior and mandates ARIA labels for interactive elements like icon-only buttons.

UI Component & Interface Architect

Name: UI Component & Interface Architect
Author: simonlee2

bysimonlee2

0•

Design Tools

Builds high-performance, accessible frontend interfaces using opinionated best practices and modern React component patterns.

The UI Skills plugin provides Claude with a rigorous set of constraints for developing production-grade user interfaces. It enforces accessibility standards through headless primitives like Radix and Base UI, prioritizes performance via compositor-only animations, and ensures consistent styling with Tailwind CSS defaults. This skill is essential for developers who want to generate UI code that isn't just visually appealing but also respects web standards, performance budgets, and modern development patterns like the use of the cn utility and dynamic viewport units.

Key Features

01Performance-optimized animations using motion/react and compositor props

020 GitHub stars

03Accessibility-first component selection using Radix, Base UI, and React Aria

04Standardized Tailwind CSS implementation with strict utility patterns

05Opinionated layout constraints for mobile-responsive and safe-area design

06Advanced typography control using text-balance, text-pretty, and tabular-nums

Use Cases

01Refactoring legacy frontend code to follow modern Tailwind and React best practices

02Building accessible design systems and component libraries from scratch

03Implementing performance-critical landing pages with optimized micro-animations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add simonlee2/claude-plugins ui-skills

For use in Claude.ai and ChatGPT

Download Skill