What is PFC
Features own capabilities. Pages compose them.
Page-Feature Composition is a frontend architecture that stops an app turning into spaghetti as it grows. It works in Angular, React, Vue or Svelte, and coding agents get it right.
01
It starts with one component.
A UserCard, written for the admin panel. Small, clean, done.
02
Then it's needed somewhere else.
The dashboard wants the same card. Then a dialog. Then a sidebar. Each one a little different.
The cost
- Copies drift apart
- Each screen bends the card its own way
03
Every new place costs a prop.
Routes, actions, variants, overrides. Each call site configures the card by hand, and soon nobody dares to touch it. That is prop hell.
The cost
- Change one screen, break three
- Copy-paste cards everywhere
- Fear of touching anything
04
A feature is self-sufficient.
It owns one whole business capability, like user management. Its container, components, state and API service live inside one folder, and it needs nothing from another feature to work. A small application of its own.
Why it pays off
- Build and test it in isolation
- One person or one agent owns it
- Drop it on any page, unchanged
05
The page orchestrates.
A conductor doesn't play the violin. The page places features on screen, handles navigation and passes data between them. No business logic, no API calls, ideally under fifty lines.
Why it pays off
- Readable at a glance
- New layouts without touching features
- One feature, many pages
06
The page is the mediator.
A feature can import another feature, and in real code it happens. It's the anti-pattern PFC exists to avoid: the two get welded together. So the page mediates: one feature emits, the page holds the value, the other receives it as an input.
Why it pays off
- Features stay independent
- Data flow traceable in one file
- Replace a feature without a ripple
07
One public door.
Components, state and services stay private. A feature exports its container through index.ts, and nothing else.
Why it pays off
- Refactor the inside freely
- Pages can't lean on internals
- Swap the state library behind the door
08
Before and after.
Before: one component welded to every view it serves, where a change in one place breaks three others. After: self-sufficient features, and a page that orchestrates them.
09
Rules a machine can check.
Who may import whom is a plain rule, so a script checks it on every build and an anti-pattern import fails before review. A coding agent gets the same answer every time.
Why it pays off
- Architecture that survives deadlines
- Agents load one folder, not the app
- Violations caught before review
10
Agents, on rails.
In the AI world the mess grows fastest: an agent without rules edits whatever it can reach. The PFC skills give every agent the same map. One feature, one door, and a build that checks the boundaries. Two step in on their own, two run when you ask.
Why it pays off
- Each agent loads one folder, not the app
- Parallel agents, no collisions
- Boundary breaks fail the build, not the review
npx skills add irekBudzowski/PFC_Page-Feature-Composition11
Learn more.
The full guide has the code, the four composition patterns, migration step by step and the questions every team asks.
Written by Ireneusz Budzowski