recipe-front-plan

recipe-front-plan is a skill for Claude Code, Codex from shinpr/codex-workflows. It costs 16 tokens per session (842 once invoked), scanned A, original, MIT.

A frontend planning workflow that turns a design document into an implementation plan and test skeletons. Frontend means the part of a website or app users see and interact with.

In plain words
What is it for?
Use it to plan frontend features from design documents, select files, record approvals, generate test skeletons, and review the resulting work plan.
Why use it?
It organizes planning, review, routing, and handoffs before implementation, so the work has a defined order and basic tests are prepared.

Skill for Claude CodeCodex

Written for Claude Code and Codex: $ARGUMENTS substitution, but also agents/openai.yaml present. Also seen: mentions subagents; installed under .agents/ (shared by several agents).

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 skills/shinpr/codex-workflows/recipe-front-plan
Any agent
npx skills add shinpr/codex-workflows --skill recipe-front-plan
Clone the repo
git clone --depth 1 https://github.com/shinpr/codex-workflows

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for recipe-front-plan

README.md
[![agentmods](https://agentmods.dev/badge/skills/shinpr/codex-workflows/recipe-front-plan.svg)](https://agentmods.dev/skills/shinpr/codex-workflows/recipe-front-plan)
Your own site
<a href="https://agentmods.dev/skills/shinpr/codex-workflows/recipe-front-plan"><img src="https://agentmods.dev/badge/skills/shinpr/codex-workflows/recipe-front-plan.svg" alt="Measured on agentmods" height="20"></a>
Per session 16 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 842 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.1 $0.00016 $0.00842
Opus 5 $0.00008 $0.00421
Sonnet 5 $0.00003 $0.00168
Haiku 4.5 $0.00002 $0.00084

Measured 6d ago against content hash 80a9b0f63f45, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-05, from the pricing page.

Security

Grade A, and why

recipe-front-plan 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 6d ago.

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.

.agents/skills/recipe-front-plan/SKILL.md · 90 lines

How it starts

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

Context: Dedicated to the frontend planning phase.

Required Skills [LOAD BEFORE EXECUTION]

  1. [LOAD IF NOT ACTIVE] documentation-criteria -- Work Plan scope and template
  2. [LOAD IF NOT ACTIVE] implementation-approach -- implementation ordering and verification strategy
  3. [LOAD IF NOT ACTIVE] subagents-orchestration-guide -- agent coordination and workflow flow
  4. [LOAD IF NOT ACTIVE] llm-friendly-context -- planning handoffs and artifact contract

Spawn rule: every spawn_agent call uses fork_turns="none" so the subagent receives only the task message and explicitly provided context.

Orchestrator Definition

Core Identity: Coordinate the frontend planning workflow and complete lightweight routing, file selection, approval recording, and status updates directly.

Execution Plan: Reuse the active execution plan. When the workflow has multiple dependent actions and no plan exists, create one that tracks them through final verification.

Execution Method:

  • Test skeleton generation -> performed by acceptance-test-generator
  • Work plan creation -> performed by work-planner
  • Work plan review -> performed by document-reviewer

The orchestrator invokes these specialists and directly handles deterministic coordination and status changes.

Scope Boundaries

Included in this skill:

  • Design document selection
  • Test skeleton generation with acceptance-test-generator
  • Work plan creation with work-planner
  • Work plan review with document-reviewer
  • Plan approval obtainment

Responsibility Boundary: This skill completes with work plan approval.

Create frontend work plan with the following process:

Execution Process

Step 1: Design Document Selection

Check for existence of design documents in docs/design/.

  • Present options if multiple exist (can be specified with $ARGUMENTS)

[STOP -- BLOCKING] If no design documents exist, notify user and halt. CANNOT proceed without a design document.

Step 2: Test Skeleton Generation

Spawn acceptance-test-generator agent: "Generate test skeletons from Design Doc at [path]. [UI Spec at [ui-spec path] if exists.]" Verify generated artifact paths and pass them to Step 3; an empty selection is valid.

Read the full file on GitHub · 90 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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. 6d ago First seen · 90 lines · 16 tokens per session scan A 80a9b0f63f45

Subscribe to this mod's changes

recipe-front-plan is a skill published in the GitHub repository shinpr/codex-workflows (37 stars, last pushed 2d ago), licensed MIT. It adds 16 tokens to every session and 842 once invoked, about $0.0001 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-30.

Related

Other skills, from other repositories

chrome-cdp

Drive a headless Chrome over the Chrome DevTools Protocol (CDP) for browser QA — navigate, click, fill forms, read the DOM/accessibility tree, screenshot, and assert. Use whenever a task requires loading a web page and interacting with it like a user. Chrome is launched by a bash step (recipe below); this skill…

mattzcarey/shippie · 91 tokens

skill-creator

Create, install, or update skills in the workspace. Use when (1) installing a skill from a URL or remote source, (2) creating a new skill from scratch, (3) updating or restructuring existing skills. Always use this skill for any skill installation or creation task.

zhayujie/CowAgent · 61 tokens

metrics-instrumentation

Specification for instrumenting an opik-backend workflow with operational OpenTelemetry metrics — per-stage throughput/latency/error counters and native histograms, dimensioned per-customer (workspace). Use when a pipeline (scoring, ingestion, experiments, jobs) needs per-stage visibility. Covers metric emission only…

comet-ml/opik · 93 tokens

peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

the-open-agent/openagent · 17 tokens

new-app

Scaffold a new Atomic Agents project from scratch — create the directory, pyproject.toml, env file, first agent, and a runnable entry point. Use when the user asks to start a new atomic-agents project from scratch, says "scaffold" / "new project" / "start from zero", or runs /atomic-agents:new-app.

Eigenwise/atomic-agents · 76 tokens

oracle

Best practices for using the oracle CLI (prompt + file bundling, engines, sessions, and file attachment patterns).

the-open-agent/openagent · 25 tokens