Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
Execute materialized frontend task files in autonomous execution mode
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-build -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install shinpr/claude-code-workflows recipe-front-build --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/recipe-front-build .claude/skills/recipe-front-build && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "recipe-front-build" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-build into .claude/skills/recipe-front-build/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "recipe-front-build", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-buildType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-build -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install shinpr/claude-code-workflows recipe-front-build --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/recipe-front-build .agents/skills/recipe-front-build && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "recipe-front-build" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-build into .agents/skills/recipe-front-build/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "recipe-front-build", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-build -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install shinpr/claude-code-workflows recipe-front-build --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/recipe-front-build .cursor/skills/recipe-front-build && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "recipe-front-build" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-build into .cursor/skills/recipe-front-build/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "recipe-front-build", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/shinpr/claude-code-workflows.git --path skills/recipe-front-build--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-build -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install shinpr/claude-code-workflows recipe-front-build --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/recipe-front-build .gemini/skills/recipe-front-build && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "recipe-front-build" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-build into .gemini/skills/recipe-front-build/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "recipe-front-build", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install shinpr/claude-code-workflows recipe-front-buildInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-build -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/recipe-front-build .github/skills/recipe-front-build && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "recipe-front-build" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-build into .github/skills/recipe-front-build/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "recipe-front-build", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-build -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install shinpr/claude-code-workflows recipe-front-build --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/recipe-front-build .opencode/skills/recipe-front-build && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "recipe-front-build" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-build into .opencode/skills/recipe-front-build/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "recipe-front-build", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
recipe-front-buildExecute materialized frontend task files in autonomous execution mode
Recipe Front Build is an agent skill from shinpr/claude-code-workflows. Execute materialized frontend task files in autonomous execution mode
Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design. The repository describes itself as: Development workflows for Claude Code that keep broad exploration focused on the outcome you approved. The licence is MIT.
2 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit a4ecd62. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Recipe Front Build loads about 2.6k tokens when it runs. Until then it costs about 22 tokens; SKILL.md has 1,262 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from shinpr/claude-code-workflows at commit a4ecd62, republished under its MIT licence (© shinpr). 1,262 words, ~2,620 tokens.
.claude/skills/recipe-front-build/SKILL.md (or your agent's skills folder).Explicit User Instruction: The user explicitly instructs and authorizes every subagent call named in this recipe. Execute each applicable call when its prerequisites are met.
Execute Skill: llm-friendly-context before writing Agent prompts, handoffs, or generated artifacts. Execute Skill: subagents-orchestration-guide before making workflow decisions, invoking agents, or resolving findings.
Core Identity: "I am an orchestrator." (see subagents-orchestration-guide skill)
Local authority gate: Make this recipe's workflow decisions and validate each returned result directly; delegate semantic deliverable production to the named specialist.
Review Resolution Gate [MANDATORY]: Resolve every actionable deliverable-review finding through subagents-orchestration-guide Review Resolution before correction or progression.
Before the first finding disposition, read references/review-resolution.md from the loaded subagents-orchestration-guide skill.
Execution Protocol:
CRITICAL: Commit only after quality-fixer-frontend returns pass or verification_incomplete. A quality-fixer-frontend pass authorizes a commit at a defined commit point; it does not create one.
Work plan: $ARGUMENTS
Before any task processing, locate the work plan. Resolution rule:
$ARGUMENTS when present.{plan-name}-task-*.md naming contract and map each group to docs/plans/{plan-name}.md. Exclude layer-aware fullstack task sets.docs/plans/ when exactly one exists.Compute the Consumed Task Set for this run — the exact files this recipe owns, executes, and later deletes. Use the same restricted pattern as Work Plan Resolution:
docs/plans/tasks/ matching the single-layer pattern {plan-name}-task-*.md for the {plan-name} resolved by Work Plan Resolution. Layer-aware fullstack tasks are excludedEvery subsequent reference to "task files" in this recipe — Task Generation Decision Flow, Task Execution Cycle iteration, and Final Cleanup — uses this set, not the unrestricted docs/plans/tasks/*.md glob.
Analyze the Consumed Task Set and determine the action required:
| State | Criteria | Next Action |
|---|---|---|
| Tasks exist | Consumed Task Set is non-empty | User's execution instruction serves as batch approval → Enter autonomous execution immediately |
| No tasks + plan exists | Consumed Task Set is empty and the resolved work plan exists | User's execution instruction serves as batch approval → Run task-decomposer |
| Neither exists + Design Doc exists | No plan, no Consumed Task Set, but docs/design/*.md exists | Invoke work-planner to create a work plan, then run document-reviewer (dev-workflows-frontend:document-reviewer, doc_type: WorkPlan). Run Review Resolution through correction re-review, its parent requirement or authority exits, and convergence, using work-planner for rerouted corrections; then present the resolved plan for batch approval before task materialization |
| Neither exists | No plan, no Consumed Task Set, no Design Doc | Report missing prerequisites to user and stop |
When the Consumed Task Set is empty:
Invoke task-decomposer using Agent tool:
subagent_type: "dev-workflows-frontend:task-decomposer"description: "Materialize work plan tasks"prompt: "Read work plan at docs/plans/[plan-name].md and output individual single-commit task files in docs/plans/tasks/."Recompute the Consumed Task Set using the same restricted pattern from the Consumed Task Set section above. When it remains empty, apply Specialist Result Acceptance: validate the invocation and returned artifacts, correct recoverable input or naming errors, and rerun.
Flow: Task generation → Consumed Task Set recompute → Autonomous execution (in this order)
MANDATORY EXECUTION CYCLE (per task in the Consumed Task Set): execute → branch on executor result → quality-fix → commit
For EACH task in the Consumed Task Set, YOU MUST:
diffBase, pass task_file: [path], and receive the structured responsestatus: "escalation_needed" or "blocked" → Apply subagents-orchestration-guide Specialist Result AcceptancerequiresTestReview is true → Identify the changed integration/E2E test files in the current changes and invoke integration-test-reviewer with them as changedTestFiles, plus diffBase, taskFile, prompt-only claims, and mutationEvidencepass → Proceed to step 3blocked → Apply Specialist Result Acceptanceneeds_revision → Pass qualityIssues unchanged into the Review Resolution Gate; return to step 1 for rerouted corrections and derive convergence from correction re-review prior_feedback_reconciliationstatus: completed → Proceed to step 3task_file, upstream mutationEvidence, and qualityCommand when available (caller first, otherwise current task)stub_detected → Return to step 1 with quality-fixer-frontend's incompleteImplementations array unchanged as the canonical incompleteImplementations fieldblocked → Apply Specialist Result Acceptanceverification_incomplete → Retain the complete result for final retry and proceed to step 4pass → Proceed to step 4pass or verification_incomplete; append its verification trailers for the latterUse each subagent's semantic result and repository evidence through Specialist Result Acceptance; canonical status fields provide the normal routing shortcut. Proceed to the next task after step 4 and retain any verification limitation with its status kept proof-limited.
Verify task files exist per Pre-execution Checklist, then enter autonomous execution mode. When requirement changes are detected during execution, escalate to the user with the change summary before continuing.
Before invoking post-implementation reviewers, apply subagents-orchestration-guide's retained verification limitation retry with quality-fixer-frontend. Continue with the reviewers after clearing or retaining each result; include only repeated limitations in the completion report.
Resolve the Work Plan's readable Design Doc; missing input blocks review.
Emit these Agent calls in one assistant message, then await both:
governingDocuments, the actual files changed by completed tasks as implementationFiles, and the Work Plan pathgoverningDocumentsApply subagents-orchestration-guide's Post-Implementation Review status-routing and fix/re-run rules. Present the unified report; proceed to Final Cleanup after the complete review set reaches Review Resolution convergence.
Before the completion report, commit the post-review corrections applied at Review Resolution convergence when any remain uncommitted, applying subagents-orchestration-guide Commit Boundary Check, then delete the implementation task files this recipe consumed. Their work is then committed; docs/plans/ is ephemeral working state and is not retained between recipe runs:
docs/plans/{plan-name}.md) — the user decides whether to delete it after final reviewIf task-file deletion fails with a filesystem error, report the failure and continue to the completion report.
Final report must include:
© shinpr, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in skills/recipe-front-build of shinpr/claude-code-workflows.
Open the folder on GitHubat commit a4ecd62
Recipe Front Build next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Recipe Front Build this skillshinpr/claude-code-workflows | 694 | — | ~2.6k | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| Impeccablebestofjs/bestofjs | 3.1k | 26 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None |
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
shinpr/claude-code-workflows
Integration and E2E test design principles, ROI calculation, test skeleton specification, and review criteria.
shinpr/claude-code-workflows
Applies language-agnostic and backend technical decision criteria, anti-pattern detection, debugging, and quality gates.
shinpr/claude-code-workflows
Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates.
shinpr/claude-code-workflows
Implementation strategy selection framework. An agent skill from shinpr/claude-code-workflows.
shinpr/claude-code-workflows
Proposes repository-specific quality policy for implementation and review and, after confirmation, creates or updates docs/project-context/quality.yaml.
shinpr/claude-code-workflows
Guides subagent coordination through implementation workflows.
Categories
Execute materialized frontend task files in autonomous execution mode. Recipe Front Build is an agent skill from shinpr/claude-code-workflows.
Recipe Front Build fits situations like: frontend & Design work in your project.
Run `npx skills add shinpr/claude-code-workflows --skill recipe-front-build -a claude-code`. Or copy the skill folder (skills/recipe-front-build in shinpr/claude-code-workflows) into .claude/skills/recipe-front-build in your project. Claude Code loads it when a task matches its description.
Run `npx skills add shinpr/claude-code-workflows --skill recipe-front-build -a codex`. Or copy the skill folder (skills/recipe-front-build in shinpr/claude-code-workflows) into .agents/skills/recipe-front-build in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add shinpr/claude-code-workflows --skill recipe-front-build -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/recipe-front-build, .gemini/skills/recipe-front-build, .github/skills/recipe-front-build and .opencode/skills/recipe-front-build in your project.
SKILL.md names no scripts, command-line tools or credentials: Recipe Front Build is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Recipe Front Build is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.6k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Recipe Front Build: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
shinpr (a GitHub user) maintains it in shinpr/claude-code-workflows, which has 694 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 1, 2026.
Source: shinpr/claude-code-workflows on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.