Frontend Architecture Analyzer

This skill analyzes frontend project architecture and provides comprehensive insights about technology stacks, build tools, and architectural patterns.

Quick Start

Analyze any frontend project with a single command:

const result = await analyzeProject("/path/to/project", {
  format: "markdown",  // json, markdown, summary, scorecard
  includeRecommendations: true
});

Core Capabilities

The analyzer detects:

• Frameworks: Vue, React, Angular, Svelte, Solid.js
• Meta-frameworks: Nuxt, Next.js, Remix, Gatsby, Astro
• Build Tools: Vite, Webpack, Rollup, Parcel, esbuild
• Package Managers: pnpm, yarn, npm
• Architecture Patterns: Monorepo, microservices, modular, layered
• Quality Metrics: TypeScript coverage, linters, code quality tools

Output Formats

Choose the format that best suits your audience:

Technical Analysis (JSON)

{
  "success": true,
  "data": {
    "framework": { "name": "vue", "metaFramework": "nuxt" },
    "buildTool": { "name": "vite", "version": "5.0.0" },
    "architecturePatterns": ["modular", "layered"]
  }
}

Markdown Report

Human-readable report with sections for stakeholders

Executive Summary

High-level overview for decision makers

Scorecard

Quantitative assessment with scores

Usage Examples

Basic Analysis

node scripts/analyze-project.js /path/to/project

With Options

node scripts/analyze-project.js /path/to/project '{"format": "markdown", "depth": 2}'

Generate Executive Summary

const analyzer = new ProjectAnalyzer("./my-project");
const result = await analyzer.analyze();
const report = new ReportGenerator(result);
const summary = report.generate("summary");

Advanced Features

Pattern Recognition

• Monorepo Detection: Identifies workspace configurations
• Microservices: Service-based architecture detection
• Modular Design: Feature-based organization analysis
• Layered Architecture: Controller-service-repository patterns

Quality Assessment

• TypeScript adoption and coverage calculation
• Code quality tool detection (ESLint, Prettier, Stylelint)
• Architectural complexity evaluation
• Maintainability scoring

Recommendations Engine

Provides actionable recommendations based on:

• Missing tooling (testing, linting)
• Architecture improvements
• Best practice adoption
• Technology debt

Implementation Details

Detector Modules

• framework-detector.js

  - Framework and meta-framework detection

• build-tool-detector.js

  - Build tool and bundler identification

• architecture-detector.js

  - Pattern recognition and scoring

Report Generator

Supports multiple output formats:

• Technical JSON for API integration
• Markdown for documentation
• Executive summaries for presentations
• Scorecards for metrics tracking

Reference Documentation

Detailed implementation guides and patterns:

• Framework Detection: See framework-patterns.md
• Build Tools: See build-tool-patterns.md
• Architecture Patterns: See architecture-patterns.md
• Output Formats: See output-formats.md