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