frontend-build

A frontend implementation command that creates a build brief and scaffold file for a specific component or feature after design approval.

In plain words
What is it for?
Use it to prepare an approved scope such as an onboarding form for implementation. Pass --bypass only when necessary.
Why use it?
It prevents frontend work from starting without an approved design, while recording emergency bypasses for later review.

Command

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add commands/rajconnects/founder-stack/frontend-build
Clone the repo
git clone --depth 1 https://github.com/rajconnects/founder-stack
Per session 52 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 940 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00052 $0.00940
Opus 5 $0.00026 $0.00470
Sonnet 5 $0.00010 $0.00188
Haiku 4.5 $0.00005 $0.00094

Measured yesterday against content hash 4694f057a35e, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

frontend-build scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

workflow/commands/frontend-build.md · 42 lines

How it starts

The opening of the file, as written. The whole thing — 42 lines — stays where its author put it; the contents beside it link to each section on GitHub.

You are running the frontend specialist build step.

Arguments: $ARGUMENTS

Steps

  1. Resolve scope. Parse $ARGUMENTS. Scope is required — there is no auto. If empty, fail loudly: frontend-build requires an explicit scope. Example: /frontend-build OnboardingForm.

  2. Compute the scope slug. Lowercase, alphanumerics + dashes only. Same slugification as /ux-wireframe and /ux-mockup.

  3. Hard gate on design approval. Check for .claude/.design-approved-<scope-slug>.

    • If present: continue with approval_state = approved.
    • If missing AND --bypass is NOT set: fail with verdict BLOCKED_NO_DESIGN_APPROVAL. Print the exact remediation: "Run /ux-wireframe then /ux-mockup and approve. Or pass --bypass if this is an emergency (will be flagged in handoff)." Stop. Do not launch the agent.
    • If missing AND --bypass IS set: touch .claude/.design-bypass-<scope-slug> (consumed by /handoff and /design-gate). Print: "⚠ Design approval bypassed for . This will be surfaced in /handoff." Continue with approval_state = bypassed.
  4. Resolve config and inline. Read .claude/project.json once. Extract: design_system.components_spec, design_system.flow_spec, design_system.tokens, design_system.figma.file_key, design_system.figma.screens, stack.frontend, stack.frontend_root, test_roots.frontend, test_commands.frontend. If stack.frontend is null, fail: frontend-build only runs for frontend stacks (stack.frontend is null). If frontend_root is null, fail likewise.

  5. Launch frontend-engineer with a self-contained prompt containing: scope label and slug, the inlined config fields above, and approval_state. Do NOT ask the agent to re-read project.json. Do NOT ask the agent to write files — that is your job.

  6. Print the agent output verbatim. Including the brief sections (composition, optimization, scaffold body). Do not soften or reinterpret.

  7. Write the scaffold (or skip). Parse the agent output:

    • Extract the File path from the agent header.
    • Extract the scaffold body from the ## (c) Scaffold body code fence.
    • If file at the resolved path exists: print "File exists at <path> — emitting brief only. No scaffold written." Do not write. Do not ask. Continue cleanly.
    • If file does not exist: ask the operator: "Write scaffold to <path>? (yes/no)". On yes, Write the scaffold body to that path. On no, skip.
  8. Closing line. On success print: "Brief delivered. Implement against <test-path> (red tests). Run /design-gate <scope> before /handoff."

Read the full file on GitHub · 42 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 42 lines · 52 tokens per session scan A 4694f057a35e

Subscribe to this mod's changes

frontend-build is a command published in the GitHub repository rajconnects/founder-stack (2 stars, last pushed 1mo ago), licensed MIT. It adds 52 tokens to every session and 940 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.