What problem does it solve?
Many frontend projects lack a consistent folder structure, clear data-access boundaries, and a machine-usable architecture document, which makes onboarding, automated agent workflows, and long-term maintenance inefficient. This Skill analyzes existing repositories or new project setups and produces an organized architecture spec that AI agents and developers can use as actionable context.
Core Features & Use Cases
- Repository analysis: Inspect folders and key files to infer stack, routes, services, and data layers for Next.js, React, Vue, Supabase, Firebase, and Prisma projects.
- Architecture document generation: Produce spec/PROJECT_ARCHITECTURE.md describing the 3-layer Component/Hook/Service separation, folder roles, coding rules, and external integration patterns.
- Agent context / scaffolding: Update or suggest CLAUDE.md or .cursorrules entries and provide folder templates and implementation patterns for consistent scaffolding and onboarding.
- Team onboarding & standardization: Create a single-source reference that reduces cognitive load for new contributors and enforces import/DB client rules across the codebase.
Quick Start
Analyze the repository and generate spec/PROJECT_ARCHITECTURE.md with recommended folder structure, 3-layer rules, and CLAUDE.md updates for AI agent context.