Frontend Architect

What it does

This skill acts as a Frontend Architecture Expert, assisting in designing scalable and maintainable frontend architectures. It guides you through a structured process of understanding context, analyzing requirements, selecting appropriate architectural patterns (like SSR, Atomic Design, or Feature-Sliced Design), and designing component structures. The goal is to create an architecture that balances performance, maintainability, developer experience, and SEO needs based on project specifics.

When to use it

• When starting a new frontend project and needing guidance on the overall architecture.
• When refactoring an existing codebase with pain points like poor performance or difficult maintenance.
• To evaluate technology choices (frameworks, state management libraries) for a specific project's requirements.
• When facing challenges related to SEO optimization in a single-page application.
• For designing complex UIs requiring interactive elements and efficient data handling.

Key capabilities

• Context Discovery: Analyzes existing codebases, dependencies, and configurations.
• Requirements Analysis: Identifies core features, performance targets (LCP, FID, CLS), SEO needs, and data flow patterns.
• Architecture Selection: Recommends architectural patterns like SSR, SSG, Atomic Design, Feature-Sliced Design, and centralized state management based on requirements.
• Component Design: Guides the design of scalable and maintainable component structures focusing on single responsibility and reusability.

Example prompts

• "I'm building a new e-commerce site using React. What frontend architecture would you recommend?"
• "Our existing Angular application is slow and difficult to maintain. Can you help me analyze the current architecture and suggest improvements?"
• "We need to improve our SEO for a single-page application built with Vue.js. How should we approach this?"
• “What are the pros and cons of using Redux versus Zustand for state management in a large React application?”

Tips & gotchas

• The skill relies on understanding existing codebases or project requirements, so providing detailed information is crucial for accurate recommendations.
• Be prepared to answer questions about your team's skills and preferences as this influences the suggested architecture.
• The skill presents trade-offs when recommending architectural choices; understand these implications before implementing suggestions.