Builder Methods Skills plugin
Four Builder Methods skills: PRD with milestone prompts, skill builder, React and Tailwind design system, favicon set
- 154 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The design system skill edits CSS, layout and project instruction files
- The skills create files in the project, and the PRD is written to _build_plan
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/builder-methods-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The design system skill edits CSS, layout and project instruction files
- The skills create files in the project, and the PRD is written to _build_plan
This is third-party code. Review the repository files before installing.
What it does
Builder Methods Skills is a plugin by Brian Casel (Builder Methods) with four skills in the Agent Skills format. They work with any agent that reads such skills, and Claude Code and Cowork can install them through the plugin marketplace. bm-prd-creator turns a raw idea into a structured PRD: it detects the stack from project files, then writes prd.md or prd.html plus milestone prompts to hand to a coding agent. bm-skill-builder interviews you about a repeatable process, builds a skill from it (description, name, inputs, run-time questions, step plan) and verifies it with a real run. bm-design-system scaffolds a React and Tailwind v4 project with an /admin/design-system reference page, shadcn-style components and a managed block of instructions in AGENTS.md or CLAUDE.md. bm-favicon-creator turns a Lucide icon or your SVG into favicon.ico, icon.svg, icon.png and apple-touch-icon.png in public and wires the tags into the layout. The author lists what the skills read and write. They contain no telemetry and make no calls to Builder Methods servers.
Who it is for. Developers and product founders building an app with a coding agent on React and Tailwind.
Good fit when
- An app idea has to become a PRD and a sequence of prompts for the agent
- A process you repeat is worth packaging as a skill
- A React project on Tailwind v4 needs a design system and a component reference page
- The project lacks a favicon set and its layout needs the tags
Not a fit when
- The design system is for another stack: the skill targets React and Tailwind v4 only
- You need a PRD pushed to Jira or Notion: the skill writes files into _build_plan
- The skill must not touch AGENTS.md or CLAUDE.md: bm-design-system edits them and removes conflicting instructions
Example request
Use bm-prd-creator to turn my idea for a client portal into a PRD with milestone promptsLimitations
The design system edits CSS, the router, the layout, AGENTS.md and CLAUDE.md and prints an npm install command for missing Radix and class-variance-authority packages. The generated prd.html loads Tailwind, the Inter font and Lucide icons from external addresses when opened. The skill builder runs the new skill once to verify it. The bm-design-system skill removes or rewrites instructions in AGENTS.md and CLAUDE.md that conflict with the design system and asks when unsure, so commit that change separately.
How to disable. In Claude Code remove the plugin with /plugin; for other agents delete the bm-* folders from ~/.agents/skills or the project .agents/skills. Files created in _build_plan and components stay in the project.
FAQ
Which skills are in bm-skills?
Four: bm-prd-creator, bm-skill-builder, bm-design-system and bm-favicon-creator. The old separate bm-prd-creator, bm-design-system and bm-favicon-creator plugins were merged into one, so uninstall them before installing bm-skills.
What does bm-prd-creator create?
The files _build_plan/prd.md and prd.html plus _build_plan/milestones/N-name folders with a prompt.md for each milestone. It then adds a short _build_plan section to AGENTS.md or CLAUDE.md.
Do the skills send data to the author?
No. The README states there is no telemetry, analytics or calls to Builder Methods. External addresses are opened only in a browser when viewing generated pages.
What does the design system change in a project?
It creates the /admin/design-system page, the components/design-system and components/ui folders, lib/theme.ts and a stylesheet, edits entry CSS, the router (for Vite and react-router) and the layout head, and adds a block to AGENTS.md or CLAUDE.md. Migrating existing UI happens only with your consent.
Where do skills go in a manual install?
Into ~/.agents/skills for all projects or the project .agents/skills. Claude Code reads that folder through a symlink, and the agentcanon repository shows how.
Discussion
No questions or reviews yet.
Related
PluginsEleven skills take an agent from an idea to verified code through a PRD and RFCs kept as files in the repository
A skills library for Claude Code, Cursor and Codex: team code review, TDD, stacked PRs and repository readiness scoring
Two skills for Codex and Claude Code: prd keeps a living implementation checklist and review audits designs from the user's side
Three skills for Claude Code, Cursor and OpenCode: an interview-driven PRD, task slices and a design doc before any code
Five skills for daily development: requirement interviews, AGENTS.md rules, PR review triage and single-file HTML design.
Builder Skills
Skills for agents
A set of small skills from Builder.io for agent work habits: visual plans and diff recaps, docs-first checks, cross-agent review and clean status updates
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Builder Methods Skills (this card) | no | 154 | |
| create-prd | no | 376 | PRD creation alone, without the other skills |
| extract-design-system | no | 288 | extracts a design system from an existing site |
| oil-skill-creator | no | 102 | a skill creator only |
README in short
The README lays out three install options (copy folders, ask the agent, plugin marketplace), four skills with example prompts and a section on what each skill accesses: what it reads, writes, fetches and installs.