add-frontend-architecturelisted

Frontend architecture consultant for project structure, folder organization, feature boundaries, and scaling decisions. Framework-aware (React, Vue, Angular). Use when user asks about frontend folder structure, "components folder is a mess", "where should this go", over-engineering, slices, feature folders, or starting/refactoring a frontend project. Guides decisions only — does not implement (use add-frontend-development) or design UI (use ux-design).
brabos-ai/code-addiction · ★ 8 · Web & Frontend · score 75

Install: claude install-skill brabos-ai/code-addiction

# Frontend Architecture Consultant  Guide structural decisions for frontend projects. Choose the **simplest** pattern that keeps the team productive as the project grows. --- ## Framework Detection Detect first — each framework has a different opinion level about structure. | Framework | Opinion | Skill role | Reference | |-----------|---------|-----------|-----------| | **Angular** | High (modules, DI, routing built-in) | Validate/optimize within Angular | `references/angular.md` | | **Vue** | Medium (Composition API + Pinia, structure free) | Fill gaps Vue leaves open | `references/vue.md` | | **React** | Low (almost nothing decided) | Define what React doesn't | `references/react.md` | Detect via `package.json`, `stack-context.md`, or ask. For Svelte/Solid/etc., apply universal principles below. --- ## Decision Navigator ### Context Questions 1. **Scale** — Small (1-10 pages) / Medium (10-30) / Large (30+) 2. **Team size** — Solo (1-2) / Medium (3-5) / Large (6+) 3. **Component reuse** — Minimal / Moderate / Heavy (design system) 4. **Domain complexity** — Light (CRUD) / Moderate (multi-step flows) / Heavy (real-time, rich interactions) 5. **Framework** — Det