tianyili/react-architect-skills
skills/react-architect-skills/SKILL.md
React and TanStack Router folder structure and feature-module architecture. Use when writing, reviewing, or refactoring React code for structure, naming, colocation, encapsulation, and layer separation. Triggers on React folder structure, naming rules, module boundaries, or architecture decisions.
$ install --global
skillsauthnpx skillsauth add tianyili/skills react-architect-skillsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 2:31 AM4.5s2 files scanned
SKILL.md
- name:
- react-architect-skills
- description:
- React and TanStack Router folder structure and feature-module architecture. Use when writing, reviewing, or refactoring React code for structure, naming, colocation, encapsulation, and layer separation. Triggers on React folder structure, naming rules, module boundaries, or architecture decisions.
- license:
- MIT
- author:
- paul-devv
- version:
- 1.1.0
React Feature Module Architecture
Guidelines for React feature-module layout, layer separation (Data / Domain / Integration / Presentational), naming, and cross-module boundaries.
When to Apply
Use this skill when:
- Defining or reviewing React folder structure and module boundaries
- Naming files, folders, or layers (components, containers, pages, hooks, utils)
- Deciding where code belongs (colocation, encapsulation, layer separation)
- Designing pure component props (no redundant/optional params) or cross-module communication
When to load the full guide: For tasks that involve module boundaries, layer layout, naming conventions, or cross-module communication, read AGENTS.md in full before proceeding.
Do NOT load AGENTS.md for single-file renames, style-only changes, or when only fixing a typo or a single component’s logic.
Quick Reference
| Layer | Folders | Purpose |
|-------|---------|---------|
| Data | api/, stores/ | API hooks, cache keys, stores for cross-component state |
| Domain | hooks/, utils/, types/, contexts/ | Business logic, pure utils, types, DI |
| Integration | containers/, pages/ | Data + UI wiring, route entry, layout |
| Presentational | components/ | Pure UI, props-down/events-up, no optional/redundant props |
- Naming: kebab-case for files and folders; suffixes like
-page,-container,-context,.types,.schema,use-*for hooks. - Modules: Domain-first boundaries (e.g.
user-profile,order-processing); flat structure; direct imports from source files (no barrelindex.ts); enforce boundaries via ESLint rules. - Pure components: Pass primitives/specific values, not full data shapes; required props only; validate undefined in parent.
Full guide (principles, module structure, layer rules, naming, common module, cross-module communication, testing): AGENTS.md.
Related Skills
tianyili/zustand
development
VerifiedTrustedCommunity
Use and structure Zustand stores for React and vanilla JS state management. Use when the user mentions Zustand, needs a store pattern, global state, persist state, or migrating from Redux/Context.
1SKILL.mdUpdated Apr 17, 2026
tianyili/web3-format-number
tools
VerifiedTrustedCommunity
Use when displaying token balances or token values in UI, converting user input to bigint for contract writes, or doing math with wei/token amounts in viem or wagmi apps. Web3 number formatting with formatUnits, parseUnits, BigNumber, bigint naming (`Raw`, `Formatted`, `Bn`), decimals handling, and reusable display helpers. Triggers on token balance, formatUnits, parseUnits, wei, decimals, bigint, BigNumber, number formatting, or web3 display math.
1SKILL.mdUpdated Apr 17, 2026
tianyili/vercel-react-only-best-practices
development
VerifiedTrustedCommunity
React performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.
1SKILL.mdUpdated Apr 17, 2026
tianyili/reduce-optional-params
development
VerifiedTrustedCommunity
Use when designing or refactoring functions with many optional params, configurable components, or when the user mentions optional params, function signatures, or API simplification. Reduces optional parameters in functions and components for cleaner APIs.
1SKILL.mdUpdated Apr 17, 2026