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.
npx skills add PracticalSwan/agent-skills --skill step-by-step-web-project-buildergit clone --depth 1 https://github.com/PracticalSwan/agent-skillsWrote 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.
[](https://agentmods.dev/skills/practicalswan/agent-skills/step-by-step-web-project-builder)<a href="https://agentmods.dev/skills/practicalswan/agent-skills/step-by-step-web-project-builder"><img src="https://agentmods.dev/badge/skills/practicalswan/agent-skills/step-by-step-web-project-builder/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/practicalswan/agent-skills/step-by-step-web-project-builder"><img src="https://agentmods.dev/badge/skills/practicalswan/agent-skills/step-by-step-web-project-builder.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00031 | $0.00896 |
| Opus 5 | $0.00015 | $0.00448 |
| Sonnet 5 | $0.00006 | $0.00179 |
| Haiku 4.5 | $0.00003 | $0.00090 |
Grade A, and why
step-by-step-web-project-builder 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 4d 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.
How it starts
The opening of the file, as written. The whole thing — 73 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Step-by-Step Web Project Builder
When building a web app for learning purposes, follow these instructions:
- Learning Plan First: Write a compact learning plan in the user's requested medium or the current workspace. Outline the key concepts that will be covered (e.g., components, state management, API calls, routing).
- Stack Selection: Use beginner-friendly stacks (e.g., Vite + ReactJS + Tailwind for frontend; Node/Express for backend if needed).
- Phased Development: Generate code in small, logical phases:
- Phase 1: Setup & Configuration
- Phase 2: Basic UI & Skeleton
- Phase 3: Interactivity & Logic
- Phase 4: Data Fetching / External APIs
- Phase 5: Polish & Deployment-ready
- Pause and Explain: After each phase, pause for user review. Explain exactly what changed and why.
- Annotated Code: Include comments in the code explaining key lines and logic.
- Encourage Practice: Suggest manual edits for the user to try for practice (e.g., "Implement dark mode yourself using this hint...").
- Verification: Test in the browser and report results, including screenshots if available.
- Project Summary: At the end of the build, provide a summary of what was learned and suggest next project ideas to level up (e.g., moving from a todo app to a full CRUD app with authentication).
Cross-Client Portability
This skill is written to stay usable across GitHub Copilot, Claude Code, and Codex.
- GitHub Copilot: keep the folder in a Copilot-visible skill path or wrap the workflow in project instructions when folder discovery is unavailable.
- Claude Code: keep the folder in a local skills directory or a compatible plugin source.
- Codex: install or sync the folder into
$CODEX_HOME/skills/step-by-step-web-project-builderand restart Codex after major changes.
MCP Availability And Fallback
Preferred MCP Server: None required
- Fallback prompt: "Use the Step-by-Step Web Project Builder skill without MCP. Rely on its local instructions, bundled resources, standard shell or editor tools, and direct verification. Show the evidence used before concluding."
- Do not claim an MCP operation was used when the active host does not expose it.
- Treat local files, tests, rendered outputs, logs, or screenshots as the fallback evidence path.
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.
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.
- 4d ago Changed a79258c38e9f
- 6d ago Changed 344c6943acea
- 9d ago First seen · 73 lines · 31 tokens per session scan A af7a641a1f3f
step-by-step-web-project-builder is a skill published in the GitHub repository PracticalSwan/agent-skills (14 stars, last pushed 4d ago), licensed MIT. It adds 31 tokens to every session and 896 once invoked, about $0.0002 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-09-03.
Other skills, from other repositories
astral3d
Use when building industrial 3D visualization and editing applications — large model rendering, STEP/B-Rep viewing, measurement, markup. Astral3D: industrial 3D visualization and editing framework.
angular-developer
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices on reactivity (signals, linkedSignal, resource, httpResource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component…
angular-new-app
Creates a new Angular app using the Angular CLI. This skill should be used whenever a user wants to create a new Angular application and contains important guidelines for how to effectively create a modern Angular application.
ai-model-web
A guide for calling AI models directly from browser-based web applications through the CloudBase JavaScript SDK.
auth-web-cloudbase
CloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked. Provides concise and practical Web authentication solutions with multiple login methods and complete user management.
web-development
Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.