scan-frontend

Scan React and TypeScript frontend codebases to generate an architecture standards document.

Updated Mar 6, 2026

Search Tags:#architecture #documentation #frontend #codebase #standards #refactor #scan

Ready to run

npx skills add https://github.com/nand1234/Agentic-workflow-builder --skill scan-frontend

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: scan-frontend
Source: https://github.com/nand1234/Agentic-workflow-builder/tree/main/ai-dev-worflow/.claude/skills/scan-frontend
Command: npx skills add https://github.com/nand1234/Agentic-workflow-builder --skill scan-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scans a frontend codebase to produce a centralized architecture standards document, reducing onboarding time and ensuring consistency across teams.

Core Features & Use Cases

Component Architecture: identifies component patterns, folder structures, and export patterns to guide future implementations.
State Management & API Patterns: documents state strategy, data flow, and API interaction conventions across the app.
Styling & Theming: records styling approach, theming tokens, and responsive patterns to standardize UI.
Documentation Backbone: backs claims with real file references and generates docs/architecture/frontend.md for future reference.

Quick Start

Run the scan-frontend tool on the project root to generate docs/architecture/frontend.md.

Frequently Asked Questions about scan-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate frontend architecture documentation from an existing React codebase?▼

You can generate frontend architecture documentation by scanning your React and TypeScript codebase to examine component structure, state management, and routing, which produces a comprehensive standards document at docs/architecture/frontend.md.

What is frontend architecture scanning and how does it identify project standards?▼

Frontend architecture scanning identifies patterns by validating results against real repository files, examining component structures, data flow, and styling conventions to generate a centralized standards document for team consistency.

Can I use this frontend documentation tool for codebases that are not React or TypeScript?▼

This frontend architecture scan specifically applies to React and TypeScript codebases, analyzing their unique component patterns and state management strategies to output accurate architectural standards.

What does a frontend architecture standards document include for onboarding new developers?▼

A frontend architecture standards document includes component patterns, state management strategies, API conventions, styling approaches, and theming tokens, all backed by real file references to reduce onboarding time.

How do I document state management and API patterns across a frontend project?▼

Scan the frontend project to automatically document state management and API patterns, recording state strategy, data flow, and API interaction conventions, then writing the validated output into a centralized markdown file.

Does the generated architecture documentation reference actual files in the repository?▼

The generated architecture documentation backs claims with real file references found in the repository, validating component structures and styling patterns before writing the final output to docs/architecture/frontend.md.