OptiTech Frontend Developer (1 of 6 skill)

The problem

Frontend features often suffer from architectural drift where business logic leaks into routes and API calls are scattered across components. Manual implementation frequently misses critical states like loading or error handling and breaks caching logic.

What it does

• Implements features using React 19, TanStack Router, and TanStack Query following a domain-first (FSD-lite) architecture.
• Enforces strict separation between stable domain data (Entities) and user workflows (Features).
• Automates data fetching with route loaders, Zod-validated search params, and standardized cache invalidation.
• Generates MUI-based UI components with built-in loading, error, and empty states.
• Handles technical debt by running lint, build, and unit test checks before submitting code.

Frameworks & tools

React 19, TypeScript, Vite, TanStack Router, TanStack Query, TanStack Form, MUI (@mui/material), and Zod.

Why this beats prompting it yourself

Standard prompts often result in "spaghetti code" where logic is placed in the first file the AI finds. This skill follows a rigorous architectural contract, ensuring every new line of code lives in the correct slice (entity, feature, or shared) and maintains strict import rules.

Use cases

• Building new dashboard modules with complex data-fetching and caching requirements.
• Implementing multi-step forms with Zod validation and TanStack Form.
• Adding protected routes with auth-aware redirects and pre-fetching logic.
• Refactoring scattered API calls into centralized entity-based query factories.

Known limitations

Requires a CONTEXT.md file and an architect task file to function. It is restricted to the backend directory and will not modify frontend or end-to-end test files.