Fe architecture

Skill sukirman1901/frontend-expert/skills/fe-architecture

Frontend structure — feature folders, state ownership, server/client boundary, when not to add a global store. Use for "arsitektur FE", folder structure, refactor large UI, state management choice, or modularizing an app.From its SKILL.md

Install

npx -y skills add sukirman1901/frontend-expert --skill fe-architecture

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

10 stars10 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.1 KB, as published. Nobody here has run it

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

Boundaries — feature folders over type-only dumps
State ladder — local → lifted → URL → server cache → context (theme/auth) → global store last
Server/client — fetch on server when the stack allows; mark client islands explicitly
Deps — UI primitives don’t import feature screens; features may use shared UI
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.