skills.rest
arsen-ask-lx
arsen-ask-lxCOMMUNITY
Explore all skills by this author โ†’
GitHub

react-patterns

Enforce React/TypeScript architectural patterns for FSD-structured frontend codebases.

Updated Aug 23, 2026
Search Tags:#typescript#architecture#react#zustand#react-query#fsd#frontend-patterns
One-click install
npx skills add https://github.com/arsen-ask-lx/.claude_file_4all --skill react-patterns-arsen-ask-lx
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/arsen-ask-lx/.claude_file_4all/tree/main/skills/react-patterns
Command: npx skills add https://github.com/arsen-ask-lx/.claude_file_4all --skill react-patterns-arsen-ask-lx

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes references (resource) components.

What problem does it solve?

React/TypeScript pattern guide for frontend codebases, helping teams standardize architecture, state management, and UI patterns.

Core Features & Use Cases

  • Clear guidance on organizing code with FSD: app, pages, features, widgets, shared, and types.
  • Prescribed tooling and patterns for Zustand stores, React Query queryKeys, Radix UI, Tailwind 4, and TypeScript strict mode.
  • Real-world examples for building scalable frontend apps.

Quick Start

Align your repo to the FSD structure (src/app, pages, features, widgets, shared, types) and apply the standard pattern rules to your components and hooks.

Frequently Asked Questions about react-patterns

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

FAQPage Schema
How do I structure a React TypeScript project using Feature-Sliced Design?โ–ผ

Structure React TypeScript projects using Feature-Sliced Design by organizing code into app, pages, features, widgets, shared, and types layers with strict dependency directions. This standardizes frontend architecture and enforces clear module boundaries for scalable applications.

What's the best way to organize React Query queryKeys in a large frontend codebase?โ–ผ

Organize React Query queryKeys by enforcing standardized architectural patterns that prescribe consistent key structures. This Skill implements specific rules for queryKey management within FSD layers, ensuring cache invalidation remains predictable across features and widgets.

Can I use Zustand for state management with Feature-Sliced Design?โ–ผ

Yes, you can use Zustand for state management with Feature-Sliced Design. This Skill provides prescribed patterns and rules for structuring Zustand stores within FSD layers, ensuring state logic remains isolated and follows strict dependency directions.

How do Tailwind 4 and Radix UI fit into a FSD React architecture?โ–ผ

Tailwind 4 and Radix UI fit into FSD React architecture as prescribed UI tooling within the shared and widgets layers. This Skill implements specific styling and component patterns to maintain visual consistency while respecting strict architectural boundaries.

Why should I enforce strict TypeScript mode in a React FSD architecture?โ–ผ

Enforce strict TypeScript mode in React FSD architecture to guarantee type safety across strict dependency directions. This Skill implements TypeScript discipline rules that prevent runtime errors and maintain code quality across app, pages, features, and widgets layers.

Related Skills

Explore More Software Engineering Skillsโ†’
dev-goraebapdev-goraebap

framework-adapter

Generate a framework-specific folder tree from an FSD blueprint.

Community
Advanced
LazyIsEfficientLazyIsEfficient
15

typescript-testing-frontend

Automate Jest-based frontend tests for TypeScript React components and hooks.

Official
Intermediate
huseyindenizhuseyindeniz
15

code-audit

Audits front-end projects for architectural and code quality compliance via 19 scripted checks.

Community
Intermediate
jamesogunsanjamesogunsan

python-project-structure

Plan or review Python repository structure for clean module boundaries and maintainable layout.

Community
Intermediate