frontend-architecture

What it does

This skill provides architectural patterns and structural guidance for building robust frontend applications. It helps AI agents organize codebases, select appropriate design systems, and implement scalable component hierarchies to ensure maintainability and performance.

When to use it

• Designing the initial folder structure and module organization for a new web application.
• Refactoring legacy monolithic code into modular, reusable components.
• Selecting state management strategies and routing patterns based on app complexity.
• Establishing consistent styling conventions and design system integration plans.

Key capabilities

• Defines scalable directory structures for large-scale frontend projects.
• Recommends component composition strategies for reusability.
• Guides the selection of architectural patterns (e.g., MVC, MVVM, Atomic Design).
• Supports planning for state management and data flow architectures.

Example prompts

• "Propose a folder structure and module organization for a React application handling user authentication and dashboard analytics."
• "Analyze this existing codebase and suggest architectural improvements to reduce coupling between components."
• "What are the best practices for implementing a design system in a Vue.js frontend architecture?"

Tips & gotchas

• Architectural decisions often depend on specific framework constraints; ensure the AI agent understands your tech stack before applying generic patterns.
• While this skill provides structural blueprints, it does not generate full application code or handle backend integration logic.