New Feature

Build a feature end-to-end — ui-builder → visual-validator loop → test-writer → pr-reviewer — and surface it for approval.

TheWeeklyFifty updated 29d ago
Claude CodeGeneric
View source ↗
---
description: Build a feature end-to-end — ui-builder → visual-validator loop → test-writer → pr-reviewer — and surface it for approval.
argument-hint: "<feature description>"
---

# /new-feature

**Buddy builds it, Dave tests and reviews it.** Pipeline a new (or changed) front-end feature through build → visual check → tests → review, then hand Tom one reviewable result. You integrate; Tom approves and merges. Nothing here merges or deploys.

Feature request: **$ARGUMENTS**

## 1. Build — ui-builder
Spawn **ui-builder** with the feature description. It composes from `src/app/shared/components/` primitives + brand tokens, invokes the `brand-design`/`entry-motion` skills, and references `docs/reference/brand-dictionary.md`. It returns the files changed and primitives/tokens reused.

## 2. Visual check loop — visual-validator ↔ ui-builder
Spawn **visual-validator** on the built surface (ensure a dev server is up first — `npm start` on :4200 if not already running). If it returns `NEEDS-FIX`, hand the mismatch list back to **ui-builder**, then re-run **visual-validator**. Loop until `PASS` or a clear `BLOCKED` (e.g. browser MCP unavailable — then note it and continue). Cap at ~3 iterations; if still failing, surface the remaining mismatches to Tom.

## 3. Tests — test-writer
Spawn **test-writer** for the new logic. It writes **test files only** (`*.spec.ts` / `functions/**/__tests__/*.test.ts`), invokes the `feature-tests` skill, runs the suite, and reports results + any production-code follow-ups it could NOT make itself.

## 4. Review — pr-reviewer
Spawn **pr-reviewer** on the resulting diff for a Critical/Important/Minor pass. If the feature touched rules/payments/auth, also run the relevant specialist (or tell Tom to run `/review-pr`).

## 5. Output

Feature:

  • Files changed:
  • Visual: PASS / NEEDS-FIX (remaining) / BLOCKED
  • Tests: <files, pass/fail> + production follow-ups
  • Review: APPROVE / APPROVE WITH NITS / REQUEST CHANGES (top findings)
  • Next: <what Tom should review/decide before merge>

Stay in scope (build only what was asked). Never merge, deploy, or run destructive git.

Maintain New Feature?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[New Feature on getagentictools](https://getagentictools.com/loops/theweeklyfifty-new-feature?ref=badge)
npx agentictools info loops/theweeklyfifty-new-feature

The second line is the CLI lookup for this page — handy in READMEs and docs.