| name | verify-recipe |
| description | Step 6 (final) of the create-recipe chain. Runs pnpm typecheck, pnpm --filter @styleframe/theme test, and pnpm lint to verify the recipe is correct. Reports failures with file:line references and suggested fix locations. Does NOT attempt auto-fix. Standalone-capable — runs against any existing recipe without prior artifacts. Writes .context/recipe-<name>/verification.md. |
Verify Recipe
Step 6 of the Styleframe recipe creation chain. Run the repo-level quality checks and surface any failures that the previous steps may have introduced.
Persona
You are a QA-focused engineer. You run the verification commands, parse the output, and report failures with exact file paths, line numbers, and short suggestions. You do not fix issues — the user (or a targeted re-run of implement-recipe / showcase-recipe / document-recipe) handles fixes.
Inputs
.context/recipe-<component-name>/implementation.md (optional — tells you exactly which files to scope fix suggestions to)- The live repo state (
theme/src/recipes/<name>/, apps/storybook/..., apps/docs/...)
Standalone mode: this skill can run without any .context/ artifacts. If invoked alone (/verify-recipe), ask which recipe to verify, then locate files under theme/src/recipes/<name>/.
Outputs
.context/recipe-<component-name>/verification.md — typecheck / test / lint pass-fail, plus any failure details.
Workflow
Step 1: Identify the recipe
If invoked as part of the chain, read implementation.md to know which files were created.
If invoked standalone, ask the user for the recipe name, then ls theme/src/recipes/<name>/ to confirm it exists.
Step 2: Run checks
Run the following three commands from the project root. Run them sequentially so failures are reported one at a time. Use Bash with appropriate timeouts.
Typecheck
pnpm typecheck
Parse output. Capture:
- Exit status (0 = pass).
- For each error: file:line, error code, message.
- Scope errors to files touched by this recipe when possible; note cross-package errors separately.
Theme tests
pnpm --filter @styleframe/theme test
Parse output. Capture:
- Total suites, total tests, passed, failed.
- For each failed test: test name, expected vs actual, file:line.
- If the recipe has no test file (rare, but valid — badge and button are exceptions), note that the recipe exists without tests.
Lint
pnpm lint
Parse output. Capture:
- Exit status.
- For each issue: file:line, rule, message.
Step 3: Storybook build (required)
pnpm --filter @styleframe/storybook build
Run the production build, not just the dev server. This is the only check that
exercises real token resolution in a fresh Styleframe instance — typecheck and theme
tests pass even when a recipe references an undefined variable. A setup callback that
references an undeclared spacing multiplier (e.g. a raw selector using @0.125) throws
here with Variable "0.125" is not defined; the fix lives in /implement-recipe (use
calc(@spacing * 0.125) instead — see that skill's Step 12). Capture exit status and any
Variable "..." is not defined errors with the originating recipe file.
(Optional) Storybook render spot-check
If the user wants a visual check, offer to start Storybook (pnpm storybook) — but this is
manual; the assistant cannot verify rendering automatically. Prompt the user to open the
story and confirm it looks correct.
Step 4: Write verification.md
Use the schema below. Include every failure with a file:line reference and a one-line suggestion pointing to the sub-skill most likely responsible:
- TypeScript errors in
theme/src/recipes/<name>/ → /implement-recipe
- Test failures in
theme/src/recipes/<name>/ → /implement-recipe
- Lint errors in
apps/storybook/** → /showcase-recipe
- Lint errors in
apps/docs/** → /document-recipe
- Broken story IDs referenced in docs →
/document-recipe or /showcase-recipe
Step 5: Summarize to the user
Report:
- Pass/fail for each of the three checks.
- Total failures.
- Suggested next step (if all pass: "recipe is ready"; if failures: "fix issues in then re-run
/verify-recipe").
Do NOT attempt to fix issues automatically.
verification.md schema
# Verification: <Name>
## Typecheck: <pass | fail>
<!-- If fail, list: file:line — error code — message — suggested sub-skill -->
## Test (theme): <pass | fail> (<passed>/<total>)
<!-- If fail, list: test name — file:line — expected vs actual — suggested sub-skill -->
<!-- If no tests exist: note "Recipe has no test file — confirmed intentional opt-out" -->
## Lint: <pass | fail>
<!-- If fail, list: file:line — rule — message — suggested sub-skill -->
## Storybook build: <pass | fail>
<!-- If fail, list: recipe file — "Variable ... is not defined" — suggested sub-skill (/implement-recipe) -->
## Storybook render spot-check: <pass | not run | manual-deferred>
## Summary
- Total failures: <N>
- Suggested next step: <e.g., re-run /implement-recipe after fixing use<Name>Recipe.ts:42>
Validation checklist
Constraints
- No auto-fix. This skill reports failures; it does not modify any source.
- Do not skip checks. All three must run — skipping one masks issues.
- No
--no-verify or similar bypasses. If a hook or check fails, report it.
- Do not rerun an entire chain after fixes. The user (or a targeted sub-skill) handles fixes and then re-runs
/verify-recipe alone.
Done
If all three checks pass, the recipe is ready. If the user is running the chain from /create-recipe, this is the final step.
