Frontend Architecture

This one walks you through the structural decisions that keep frontend codebases from turning into spaghetti as they grow. It covers component hierarchies, the container/presentational split, layer separation (presentation, application, domain, infrastructure), and patterns like MVC and composition over inheritance. The examples are practical, showing you how to break apart a bloated UserDashboard or implement a proper repository pattern with TypeScript classes. Use it when you're architecting a new app, refactoring legacy code, or need to make decisions about state management and module boundaries. The focus is less on specific frameworks and more on the underlying patterns that work across React, Vue, or whatever comes next.

skills.sh installs: 728
GitHub stars: 63
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add manutej/luxor-claude-marketplace --skill frontend-architecture --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Architecture Skill

When to Use This Skill

Use this skill when you need to:

Design scalable application architecture - Structure large-scale frontend applications with maintainable patterns
Choose architectural patterns - Select appropriate design patterns (MVC, MVVM, Flux) for your use case
Implement state management - Design state architecture for complex applications
Structure component hierarchies - Create reusable, composable component systems
Optimize build processes - Configure bundlers and build tools for optimal performance
Plan testing strategies - Architect comprehensive testing approaches across layers
Design module systems - Implement code splitting, lazy loading, and module boundaries
Scale codebases - Establish conventions for growing teams and applications
Refactor legacy code - Migrate to modern architectural patterns
Performance optimization - Structure applications for optimal load times and runtime performance