skills.rest
nand1234
nand1234COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/nand1234/Agentic-workflow-builder --skill scan-frontend
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
karenrebecagkarenrebecag

webflow-code-component:component-scaffold

Scaffold Webflow Code Components with React and Webflow definition files.

Community
Advanced
OnlyaguestOnlyaguest
18

data-showcase-site

Convert CSV, JSON, Markdown, or HTML data into a static report site.

Community
Intermediate
nicholasgriffintnnicholasgriffintn
2

performance-optimisation

Identify and fix performance bottlenecks across frontend, backend, and database layers.

Community
Basic
eliottbusinesseliottbusiness

requesting-code-review

Automate pre-commit code review with static analysis and security scanning.

Community
Advanced