How does this skill handle state management?

It favors local state and idiomatic React hooks like useState and startTransition, only lifting state when strictly necessary to maintain performance.

Are the UI components accessible?

Yes, all component and screen recommendations are designed to meet WCAG 2.2 AA accessibility standards.

Does it include specific guidance for Next.js?

Yes, it provides default routing and server/client boundary guidance optimized for Next.js 16.

What React version does this skill support?

It uses React 19 as the default baseline for hooks, transitions, and client interactions.

Can I use this for styling legacy projects?

While it defaults to Tailwind CSS v4, the skill includes logic to preserve existing repository conventions and only apply new patterns where requested.

React UI Composition Patterns

Name: React UI Composition Patterns
Author: jscraik

byjscraik

•

Herramientas de Diseño

Provides standardized React UI composition patterns using TypeScript, Tailwind CSS, and Radix UI for building maintainable, accessible components.

This skill equips Claude with advanced architectural patterns for modern React development, specifically optimized for the TypeScript, Tailwind CSS v4, and Radix UI stack. It offers concrete guidance on state management, routing, and component hierarchy, ensuring code follows industry best practices like React 19 hooks and Next.js 16 server/client boundaries. By providing structured workflows for both new scaffolding and refactoring existing screens, it helps developers maintain high accessibility standards (WCAG 2.2 AA) and avoid common anti-patterns like excessive use of useEffect for derived state.

Características Principales

01WCAG 2.2 AA accessibility-first UI recommendations

02Next.js 16 server and client boundary management

03Tailwind CSS v4 and Radix UI component scaffolds

042 GitHub stars

05React 19 hook and transition pattern implementations

06Controlled dialog and async modal interaction patterns

Casos de Uso

01Implementing complex, accessible dialogs with controlled state and async actions

02Refactoring a monolithic settings screen into smaller, focused React components

03Architecting new feature views with optimized state ownership and data fetching

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jscraik/agent-skills react-ui-patterns

For use in Claude.ai and ChatGPT

Características Principales

01WCAG 2.2 AA accessibility-first UI recommendations

02Next.js 16 server and client boundary management

03Tailwind CSS v4 and Radix UI component scaffolds

042 GitHub stars

05React 19 hook and transition pattern implementations

06Controlled dialog and async modal interaction patterns

Casos de Uso

01Implementing complex, accessible dialogs with controlled state and async actions

02Refactoring a monolithic settings screen into smaller, focused React components

03Architecting new feature views with optimized state ownership and data fetching

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jscraik/agent-skills react-ui-patterns

For use in Claude.ai and ChatGPT