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