
Designs hackathon-ready frontend architecture: folder layout, page shell, component boundaries, state flow, API touchpoints, TypeScript types, async UI states, and responsive patterns. Optimized for Next.js MVPs, speed, and demo quality. Use when scaffolding or refactoring UI, planning pages and components, wiring client to API, or when the user mentions frontend structure, layout, state management, or implementation order for an MVP.
Connects Next.js frontends to backend Route Handlers with centralized fetch wrappers, TypeScript response types, simple async state (loading / empty / success / error), and debug-friendly single-module API code. Use when wiring client components to `app/api`, refactoring scattered fetch calls, defining request/response typing for API calls, or when the user mentions API integration, fetch patterns, or keeping the frontend decoupled from backend internals.
Designs clean, stable MVP API and UI contracts: input/output shapes, TypeScript types, sample JSON, required vs optional fields, validation hints, and extension notes. Optimized for one-day builds and card-friendly UIs. Use when defining endpoints, request/response schemas, form models, shared types, or before wiring frontend to backend; when the user mentions contracts, DTOs, API design, or stable JSON shapes for an MVP.
Audits an existing MVP for demo readiness: user flow clarity, visible value, visual polish, information scanability, first impression, and what to cut or simplify. Produces a prioritized list of practical, quick-win improvements only. Use when polishing for a demo, hackathon presentation, stakeholder walkthrough, or when the user asks for demo readiness, first impression, or what to remove before showing the product.
Builds Next.js + TypeScript UIs with modular components, clear layout hierarchy, card-based results, polished spacing and typography, async states (loading, empty, success, error), responsive behavior, and thin API integration. Use when implementing or polishing screens, building feature UI from scratch, wiring components to backend routes, or when the user asks for clean minimal UI, demo-ready pages, or step-by-step UI construction with manual test steps.