frontend-code-analyzer

English | 简体中文

An open-source Agent Skills-standard skill that analyzes any frontend codebase — directory structure, module boundaries, and tech stack — and generates a polished project introduction document (README-style overview or structured analysis report).

Works with Claude Code, CodeBuddy, Cursor, Codex, and any AI IDE that supports the Agent Skills standard (SKILL.md + YAML frontmatter).

Why

Pointing an AI at an unfamiliar frontend repo and asking "what is this project?" usually means it slowly reads files one by one and guesses. This skill flips the workflow: a deterministic, zero-dependency scanner extracts the facts first (tree, stats, dependencies, tech-stack fingerprints — each with evidence), then the AI writes the document on top of verified data. Faster, cheaper, and no hallucinated tech stacks.

Features

• Directory structure analysis — recursive annotated tree; ignores node_modules, dist, .git, etc.; basic .gitignore awareness; --max-depth / --include / --ignore controls
• Tech-stack detection — framework (React, Vue, Angular, Svelte, Next.js, Nuxt, Remix, Astro…), build tool (Vite, Webpack, Rspack…), UI library, state management, routing, CSS approach, testing, linting, language, package manager, monorepo — every item with evidence
• Module identification — from directory layout, entries, and routing
• Two document templates — README-style introduction (Template A) and a structured analysis report (Template B), in the user's language
• Safe by default — never executes or modifies the analyzed project; sensitive files (.env, keys, credentials) are skipped without being read and reported in sensitiveSkipped
• LLM-friendly — rough token estimate for the codebase
• Standalone CLI — no AI IDE required: node scripts/scan.mjs <path>
• No-Node fallback — the skill still works as pure instructions when Node.js is unavailable

Install as a skill

Clone this repo, then either run the installer or copy manually.

git clone https://github.com/ideshun/frontend-code-analyzer.git
cd frontend-code-analyzer
./scripts/install.sh        # interactive menu, or: --to <skills-dir>

AI IDE	Install target	Command
Claude Code	~/.claude/skills/	./scripts/install.sh --to ~/.claude/skills
CodeBuddy	~/.codebuddy/skills/	./scripts/install.sh --to ~/.codebuddy/skills
Codex	~/.codex/skills/	./scripts/install.sh --to ~/.codex/skills
Cursor (project)	<project>/.cursor/skills/	./scripts/install.sh --to .cursor/skills
Any Agent-Skills IDE	its skills directory	./scripts/install.sh --to <dir>

Restart the IDE / start a new session after installing.

Use

Just ask your AI assistant in natural language:

• "Analyze this project's tech stack and structure"
• "Generate a project introduction document for this repo"
• "Generate a README-style overview of this repo"
• "Give me a structured analysis report of this frontend project"

The generated document follows your request language — ask in Chinese, get a Chinese document.

Or use the scanner directly (Node >= 18, zero dependencies):

node scripts/scan.mjs /path/to/project                  # JSON summary
node scripts/scan.mjs /path/to/project --format tree    # directory tree
node scripts/scan.mjs /path/to/project --max-depth 3 --out summary.json

See examples/sample-output.md for a real scan + generated document.

Repository layout

frontend-code-analyzer/
├── SKILL.md                      # the skill (Agent Skills standard)
├── AGENTS.md                     # entry point for generic agents
├── scripts/
│   ├── scan.mjs                  # zero-dependency scanner (Node >= 18)
│   └── install.sh                # cross-platform skill installer
├── references/
│   ├── tech-stack-detection.md   # detection rulebook (8+ categories)
│   ├── doc-template-readme.md    # Template A: README-style intro
│   └── doc-template-report.md    # Template B: structured report
└── examples/
    └── sample-output.md          # real scan + generated doc

Acknowledgments

Design ideas borrowed from these excellent projects:

• repomix — LLM-first output, .gitignore awareness, token estimates, security-first defaults
• code2prompt — goal/format/ context structure, include/exclude filtering as a quality mechanism
• codebase-digest — directory-tree overview, ignore system, prompt library idea
• Sitrep — core-engine/thin-shell separation, structured reports with config-based exclusions
• project-code-analyzer — language distribution stats, project-type recognition

Contributing

Issues and PRs welcome — especially new tech-stack detection rules (references/tech-stack-detection.md + the map in scripts/scan.mjs) and translations. Please keep scan.mjs dependency-free.

License

MIT