frontend-architecture — Claude Code skill: frontend structure
A skill for planning frontend structure: layers, patterns, state management and module boundaries. Useful once an app outgrows a flat folder of components.
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a claude-codeWhat frontend-architecture does
The skill lays out a four-layer frontend: presentation, application, domain, infrastructure. It walks through component architecture with TypeScript examples — single responsibility, composition over inheritance, splitting containers from presentational components. MVC, MVVM and Flux each get a section, along with state design for apps that hold more than one screen of data.
There is material on module systems and build tooling too: code splitting, lazy loading, module boundaries, bundler configuration. Testing gets its own pass across layers, and there is a section on moving legacy code onto modern patterns.
The text stops mid-example in the MVC model, so do not expect finished code for that part. Treat the skill as a decision reference: your agent pulls structure and conventions from it rather than a drop-in library. Worth adding before the codebase sprawls, because retrofitting layers later costs more.
What it helps with
- split a frontend into layers instead of mixing logic into markup
- pick a pattern for the job: MVC, MVVM or Flux
- design state for an app with several screens
- carve code into modules with lazy loading
- move legacy code onto modern patterns without a rewrite
Example prompts for the agent
- help me split our React frontend into layers the way the frontend-architecture skill describes
- suggest a state management pattern for this dashboard and justify it
- break this component into a container and a presentational part
How to install frontend-architecture
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a claude-code2Manually: put the files in place
~/.claude/skills/frontend-architecture/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/frontend-architecture/
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a codex2Manually: put the files in place
.agents/skills/frontend-architecture/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a cursor2Manually: put the files in place
.cursor/skills/frontend-architecture/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace frontend-architecture2Manually: put the files in place
.github/skills/frontend-architecture/SKILL.md1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a gemini-cli2Platform CLI
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/frontend-architectureManually: put the files in place
.devin/skills/frontend-architecture/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about frontend-architecture
How do I install frontend-architecture in Claude?
Run npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a claude-code. The skill file then lives at ~/.claude/skills/frontend-architecture/SKILL.md.
What does frontend-architecture do?
It gives your agent conventions for component architecture, design patterns, state management, modules and build setup. The agent leans on them when proposing app structure.
Which platforms does the skill support?
Besides Claude it installs into Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, each with its own install command.
