Is this skill useful for legacy projects?

Absolutely. It is specifically designed to help developers quickly map out the dependencies, build tools, and structure of unfamiliar or legacy codebases.

Does it evaluate code quality?

Yes, it assesses quality metrics such as TypeScript adoption/coverage and detects the presence of tools like ESLint, Prettier, and Stylelint.

What types of reports can I generate?

You can generate technical JSON for API integration, human-readable Markdown reports, high-level executive summaries, and quantitative scorecards.

Which frameworks does the analyzer support?

It supports all major modern frameworks including Vue, React, Angular, Svelte, and Solid.js, as well as meta-frameworks like Next.js, Nuxt, and Remix.

Can it detect monorepo configurations?

Yes, the skill identifies workspace configurations and architecture patterns like monorepos, microservices, and modular, feature-based designs.

Frontend Architecture Analyzer

Name: Frontend Architecture Analyzer
Author: hubvue

byhubvue

•

Developer Tools

Analyzes frontend projects to identify technology stacks, architectural patterns, and quality metrics with comprehensive reporting.

The Frontend Architecture Analyzer is a specialized skill designed to provide deep insights into frontend codebases by automatically detecting frameworks, meta-frameworks, and build configurations. It simplifies the discovery process by identifying patterns such as monorepos or layered architectures and evaluating project health through TypeScript coverage and linting configurations. This tool is essential for architects and developers who need to quickly onboard to new projects, conduct technical audits, or generate stakeholder-ready reports without manual inspection.

Key Features

01Actionable recommendation engine for improving tooling and addressing technical debt

02Identification of build tools and package managers including Vite, Webpack, pnpm, and Yarn

03Multi-format report generation including executive summaries, scorecards, and JSON

04Automatic detection of frameworks and meta-frameworks like React, Vue, Next.js, and Nuxt

05Recognition of complex architectural patterns such as Monorepos and Micro-frontends

061 GitHub stars

Use Cases

01Performing technical debt audits and assessing code quality metrics across a project

02Generating high-level architectural summaries for stakeholders and decision-makers

03Rapidly onboarding developers to unfamiliar or legacy frontend codebases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hubvue/fe-analysis-skills architecture-analysis

For use in Claude.ai and ChatGPT

Download Skill