solid-react

SOLID React - Component Architecture

Codebase Analysis (MANDATORY)

Before ANY implementation:

1. Explore project structure to understand architecture
2. Read existing related files to follow established patterns
3. Identify naming conventions, coding style, and patterns used
4. Understand data flow and dependencies

DRY - Reuse or Create Shared (MANDATORY)

Before writing ANY new code:

1. Grep the codebase for similar function names, patterns, or logic
2. Check shared locations: modules/cores/lib/, modules/cores/components/, modules/cores/hooks/
3. If similar code exists → extend/reuse instead of duplicate
4. If code will be used by 2+ features → create it in modules/cores/ directly
5. Extract repeated logic (3+ occurrences) into shared helpers
6. Run npx jscpd ./src --threshold 3 after creating new files

---

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

1. fuse-ai-pilot:explore-codebase - Analyze project structure and existing patterns
2. fuse-ai-pilot:research-expert - Verify latest docs for all stack technologies
3. mcp__context7__query-docs - Check integration compatibility

After implementation, run fuse-ai-pilot:sniper for validation.

---

Absolute Rules (MANDATORY)

1. Files < 100 lines

• Split at 90 lines - Never exceed 100
• Components < 50 lines (use composition)
• Hooks < 30 lines each
• Services < 40 lines each

2. Modular Architecture

See references/architecture-patterns.md for complete structure with feature modules and cores directory.

3. JSDoc Mandatory

/**
 * Fetch user by ID from API.
 *
 * @param id - User unique identifier
 * @returns User object or null if not found
 */
export async function getUserById(id: string): Promise<User | null>

4. Interfaces Separated

modules/[feature]/src/interfaces/
├── user.interface.ts
├── post.interface.ts
└── api.interface.ts

NEVER put interfaces in component files.