# frontend-architecture

A skill for planning frontend structure: layers, patterns, state management and module boundaries. Useful once an app outgrows a flat folder of components.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 722 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/frontend-architecture/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/frontend-architecture

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/frontend-architecture/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/frontend-architecture/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/frontend-architecture/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/frontend-architecture/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace frontend-architecture
```

2. **Manually: put the files in place**
- File: `.github/skills/frontend-architecture/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/frontend-architecture
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/frontend-architecture/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/frontend-architecture/SKILL.md

## When to use it
- 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
- 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

## Similar
- [design-systems-frontend-architecture](https://affpapa.org/en/nevibecode/skills/design-systems-frontend-architecture.md) — skill · 635 installs
- [react-component-architecture](https://affpapa.org/en/nevibecode/skills/react-component-architecture.md) — skill · 674 installs
- [frontend-designer](https://affpapa.org/en/nevibecode/skills/frontend-designer.md) — skill · 335 installs
- [software-patterns](https://affpapa.org/en/nevibecode/skills/software-patterns.md) — skill · 373 installs
- [renaissance-architecture](https://affpapa.org/en/nevibecode/skills/renaissance-architecture.md) — skill · 3300 installs
- [21st-ui-build](https://affpapa.org/en/nevibecode/skills/21st-ui-build.md) — skill · 1400 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 31 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md