How does it handle component testing?

It discourages unit testing individual components. Instead, it advocates for testing stores and logic with Vitest and critical user flows with Playwright.

What is the core philosophy of the lang-react skill?

The core philosophy is that components should be declarative UI consumers of external state, with business logic living in stores rather than the components themselves.

What CSS tools does it prefer?

The skill provides patterns for Styled-Components, specifically recommending consolidated components with CSS selectors over fragmented element-based components.

Does this skill support state management libraries?

Yes, it specifically optimizes for Zustand for application state, XState for complex machines, and TanStack Query or Apollo for remote data.

React Logic & State Architect

Name: React Logic & State Architect
Author: codethread

bycodethread

设计工具

Builds scalable React SPAs using external state management and declarative UI patterns.

关于

The lang-react skill optimizes Claude for building modern React Single Page Applications based on a 'logic-less component' philosophy. It guides the development process to ensure that components remain pure UI layers while complex business logic resides in external stores like Zustand, XState, or TanStack Query. This approach improves maintainability, enhances type safety through TypeScript inference, and implements a robust testing strategy that focuses on state logic rather than fragile UI components.

主要功能

Declarative UI patterns with logic-less components
External state centralization with Zustand and XState
0 GitHub stars
Standardized prop ordering and Styled-Components patterns
Store-focused testing architecture with Vitest
Type-safe variant matching using ts-pattern

使用场景

Architecting complex UI state machines with XState
Optimizing frontend performance through specialized profiling techniques
Refactoring legacy React components into external state stores

关于

主要功能

Declarative UI patterns with logic-less components
External state centralization with Zustand and XState
0 GitHub stars
Standardized prop ordering and Styled-Components patterns
Store-focused testing architecture with Vitest
Type-safe variant matching using ts-pattern

使用场景

Architecting complex UI state machines with XState
Optimizing frontend performance through specialized profiling techniques
Refactoring legacy React components into external state stores