analyze-frontend-structureThis skill is used to scan any frontend project directory, automatically analyze routing structure and module division, and generate a universal module-page...
Install via ClawdBot CLI:
clawdbot install damutou95/analyze-frontend-structureGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated May 8, 2026
A development team needs to quickly generate module-page mapping documentation for a large React project. This skill scans the directory, analyzes routes, and outputs a JSON mapping file, enabling new developers to understand the project structure without reading every file.
When refactoring an old Angular project, the team uses this skill to identify current module divisions and route mappings. The generated document helps plan refactoring steps and ensures no routes are broken during changes.
A consulting firm is auditing a Vue.js project acquired from another company. By running this skill, they quickly produce a structured overview of pages and components, facilitating cost and complexity assessment.
A company plans to migrate from Svelte to React. Using this skill, they analyze the existing Svelte project's routes and modules, then compare with the target React structure to create a migration roadmap.
An engineering team integrates this skill into their CI/CD pipeline. Every time the frontend code is updated, the skill automatically regenerates the module-page mapping and uploads it to a documentation site, ensuring docs are always current.
Offer a free tier for small projects (up to 50 files) and paid plans for larger projects. Revenue comes from monthly subscriptions for unlimited scans and advanced features like custom output formats.
License the skill to large organizations with many frontend projects. Includes priority support, on-premise deployment, and integration with internal tools. Revenue from annual licensing fees.
Provide the skill as a cloud API where developers can send project archives and receive mapping documents. Revenue based on API call volume with tiered pricing.
💬 Integration Tip
Integrate as a CLI tool into your CI/CD pipeline, or use the provided API to automate documentation generation after each deploy.
Scored May 8, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.