Recipe · Scaffold a frontend app

Goal: from zero, end up with a fresh shadcn-based React monorepo with apps/web wired up to the right @engineering11/* frontend SDKs.

Time: ~10 minutes interactive · Owner: E11 Bootstrapper · Workflow: e11-bootstrap-wizard → e11-scaffold-frontend-app

Prerequisites

• Foundry installed in a control project. (See installation.)
• @engineering11/alloy installed in the same control project.
• A path in mind for the new monorepo.

Walkthrough

You: @e11-bootstrapper NF

Bootstrapper: Starting bootstrap wizard, scaffold_type=frontend-app.

  Step 1 — Project identity
  Project name? (default: based on cwd)

You: platform-web

Bootstrapper: Output root? (default: ../platform-web)

You: [accept default]

Bootstrapper: Step 2 — SDK selection
  Querying matrix:unit via skill:e11-knowledge ...
  Filtering for flavor=frontend or flavor=both.

  Always-included for frontend (per matrix):
    configuration-client, security-client, logging-client

  Pick additional frontend SDKs (toggle):
    [ ] auth-client       [ ] user-client       [ ] access-client
    [ ] notifications-client [ ] messaging-client  [ ] files-client
    [ ] search-client     [ ] more...

You: auth-client, user-client, access-client

Bootstrapper: Resolving implies edges:
    auth-client   implies user-client, access-client  ✓
    access-client implies user-client                  ✓

  Final SDK set (6):
    configuration-client, security-client, logging-client,
    auth-client, user-client, access-client

  Step 3 — Summary
    output_root: /Users/you/work/platform-web
    scaffold_type: frontend-app
    SDKs (6, frontend-flavored)
    Workflow: e11-scaffold-frontend-app

  Confirm to scaffold? [C]

You: C

Bootstrapper: Handing off to e11-scaffold-frontend-app workflow.
  [writes monorepo at /Users/you/work/platform-web/]
  [runs pnpm install]
  [runs pnpm build]

  ✓ Scaffold complete.
  apps/web ready. Start the dev server with:
    cd /Users/you/work/platform-web && pnpm dev

What you get

The scaffolded monorepo:

.
├── apps/
│   └── web/                  # The main React app, wired with E11 SDKs
│       ├── src/
│       │   ├── app/
│       │   ├── components/
│       │   └── lib/          # auth, access, user provider setup
│       ├── package.json
│       └── ...
├── packages/                 # shared internal packages (lib code, etc.)
├── components.json           # shadcn config
├── pnpm-workspace.yaml
└── package.json

apps/web is wired to the selected frontend SDKs — @engineering11/auth-client, @engineering11/user-client, @engineering11/access-client etc. are imported and providers are set up in apps/web/src/lib/.

shadcn primitives can be added with the standard CLI:

pnpm dlx shadcn@latest add button input dialog

Designing your screens

Once the app builds, the natural next step is [CU] Create UX:

@ux-designer CU

UX: Enumerating frontend SDKs via list:sdks ...
    Reading prd.md for screens ...
    Classifying each component as Tier A (E11 SDK), Tier B (shadcn), Tier C (custom) ...

See UX Designer agent for the full Tier A/B/C sourcing rules.

When you'd pick a different path

• You need a backend, not a frontend → [NB] (Start a new backend repo).
• You need a publishable frontend SDK package → [NS] (Add a new SDK).
• You already have a monorepo and just need a new app inside it → manual scaffold (Foundry doesn't currently scaffold individual apps into an existing monorepo).

Gotchas

• shadcn primitives are not pre-installed. The scaffold wires up SDKs but expects you to add UI primitives with pnpm dlx shadcn@latest add <component> as you need them. This is intentional — shadcn primitives are project-owned source, not dependencies.
• apps/web is the default app slot. That naming is convention across the E11 frontend monorepos. Don't rename it unless you have a specific reason.
• Frontend SDK names typically end in -client. The matrix surfaces these correctly; if you see a non--client package in the list, it's likely a fullstack SDK with both flavor: backend and flavor: frontend parts.
• Empty output_root only. Same rule as the backend scaffold — won't overwrite an existing directory.

Source

Agent: e11-bootstrapper/SKILL.md · workflow: e11-scaffold-frontend-app/SKILL.md · SDK matrix: matrix:unit (meta/unit-matrix.yaml)

See also: Phase 5 — Scaffold · UX Designer agent.