# Fe Architecture

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-sukirman1901-frontend-expert-fe-architecture`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sukirman1901](https://agentstack.voostack.com/s/sukirman1901)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** https://github.com/sukirman1901/frontend-expert/tree/main/skills/fe-architecture
- **Website:** https://github.com/sukirman1901/frontend-expert

## Install

```sh
agentstack add skill-sukirman1901-frontend-expert-fe-architecture
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# FE Architecture

## Overview

Keep UI **modular and owned**. Prefer local state and server cache over inventing a global store.

## When to use

- Greenfield folder layout
- Refactors of tangled components
- Debates: Redux vs context vs query vs URL

## When to skip

- Single-file prototype the user wants kept flat
- Pure visual polish with no structure ask

## MUST (agent decisions)

| Decision | Default |
|----------|---------|
| **Folders** | Feature cohesion (`features/x/`) over dumping everything in `components/` |
| **Remote data** | Query/loader (`data-fetching`) — not a global store of server entities |
| **URL state** | Shareable filters/tabs in the URL |
| **Global store** | **Last resort** — only after local → lift → URL → server cache → context |
| **File size** | Split presentational files >~200 lines; colocated tests when testing |

## Workflow

1. **Boundaries** — feature folders over type-only dumps
2. **State ladder** — local → lifted → URL → server cache → context (theme/auth) → global store **last**
3. **Server/client** — fetch on server when the stack allows; mark client islands explicitly
4. **Deps** — UI primitives don’t import feature screens; features may use shared UI
5. **Size** — split files >200 lines; colocated tests

## Agent boundaries

- **May decide:** Feature vs route folder names; query lib; whether auth lives in context/session
- **Must not:** Add Redux/Zustand “by default”; put every form field in a global store; create circular feature imports

## Checklist

- [ ] Feature ownership clear
- [ ] No unnecessary global store
- [ ] Server state not duplicated in client stores without reason
- [ ] Shared UI stays presentational
- [ ] State ladder documented in handoff when non-trivial

## Depth

`references/fe-architecture.md` + existing `references/architecture.md`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** [sukirman1901/frontend-expert](https://github.com/sukirman1901/frontend-expert)
- **License:** MIT
- **Homepage:** https://github.com/sukirman1901/frontend-expert

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sukirman1901-frontend-expert-fe-architecture
- Seller: https://agentstack.voostack.com/s/sukirman1901
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.