Prd To UX
ragnar-pwninskjold/tech-snacks
A skill your agent uses when translating a PRD, feature spec, or raw product idea into screen-level prompts for web UX generators (Google Stitch, Figma AI, Pencil.dev, Claude Design, v0, or similar).
Write a behavior-focused product spec for a significant or ambiguous feature in this repository.
Install Write Product Spec
$ npx skills add Terry-Mao/AICodingFlow --skill write-product-spec -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Terry-Mao/AICodingFlow write-product-spec --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/Terry-Mao/AICodingFlow.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/write-product-spec .claude/skills/write-product-spec && 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 "write-product-spec" agent skill from https://github.com/Terry-Mao/AICodingFlow/tree/main/.agents/skills/write-product-spec into .claude/skills/write-product-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-product-spec", 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/Terry-Mao/AICodingFlow/tree/main/.agents/skills/write-product-specType 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 Terry-Mao/AICodingFlow --skill write-product-spec -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Terry-Mao/AICodingFlow write-product-spec --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Terry-Mao/AICodingFlow.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/write-product-spec .agents/skills/write-product-spec && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "write-product-spec" agent skill from https://github.com/Terry-Mao/AICodingFlow/tree/main/.agents/skills/write-product-spec into .agents/skills/write-product-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-product-spec", 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 Terry-Mao/AICodingFlow --skill write-product-spec -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Terry-Mao/AICodingFlow write-product-spec --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Terry-Mao/AICodingFlow.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/write-product-spec .cursor/skills/write-product-spec && 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 "write-product-spec" agent skill from https://github.com/Terry-Mao/AICodingFlow/tree/main/.agents/skills/write-product-spec into .cursor/skills/write-product-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-product-spec", 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/Terry-Mao/AICodingFlow.git --path .agents/skills/write-product-spec--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 Terry-Mao/AICodingFlow --skill write-product-spec -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Terry-Mao/AICodingFlow write-product-spec --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Terry-Mao/AICodingFlow.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/write-product-spec .gemini/skills/write-product-spec && 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 "write-product-spec" agent skill from https://github.com/Terry-Mao/AICodingFlow/tree/main/.agents/skills/write-product-spec into .gemini/skills/write-product-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-product-spec", 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 Terry-Mao/AICodingFlow write-product-specInstalls 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 Terry-Mao/AICodingFlow --skill write-product-spec -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Terry-Mao/AICodingFlow.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/write-product-spec .github/skills/write-product-spec && 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 "write-product-spec" agent skill from https://github.com/Terry-Mao/AICodingFlow/tree/main/.agents/skills/write-product-spec into .github/skills/write-product-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-product-spec", 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 Terry-Mao/AICodingFlow --skill write-product-spec -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Terry-Mao/AICodingFlow write-product-spec --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Terry-Mao/AICodingFlow.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/write-product-spec .opencode/skills/write-product-spec && 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 "write-product-spec" agent skill from https://github.com/Terry-Mao/AICodingFlow/tree/main/.agents/skills/write-product-spec into .opencode/skills/write-product-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-product-spec", 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.
Facts
- Skill name
write-product-spec- GitHub stars
- 167
- Token cost
- ~818 tokens
- SKILL.md length
- 436 words
- Files
- 1
- Skills in repo
- 30
- Repo updated
- First seen
- Licence
- MIT
At a glance
Write a behavior-focused product spec for a significant or ambiguous feature in this repository.
- Works in 9 steps: Summary — the feature and desired… → Problem — the user or product problem… → Goals — observable outcomes the change… → …
- Tasks that involve PRD writing
- SKILL.md covers Decide and prepare, Write the spec and Right-size and maintain
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Write Product Spec is an agent skill from Terry-Mao/AICodingFlow. Write a behavior-focused product spec for a significant or ambiguous feature in this repository.
Its SKILL.md is about 820 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 Product & Project Management, covering PRD writing. It works with Figma. The repository describes itself as: Setup a AI Coding Flow. The licence is MIT.
When your agent uses it
- Tasks that involve PRD writing
Example prompts
- “/write-product-spec”
Workflow steps
9 steps, taken from the first numbered list in SKILL.md.
- Summary — the feature and desired outcome in 1–3 sentences.
- Problem — the user or product problem when it is not already obvious.
- Goals — observable outcomes the change must achieve.
- Non-goals — adjacent work that is intentionally out of scope.
- Figma / design references — only for visual work; include the link or
- User experience — the main contract. Prefer numbered, testable behavior
- Success criteria — concrete outcomes a reviewer can observe; do not
- Validation — how the behavior will be checked with tests or manual
- Open questions — unresolved product decisions, preferably next to the
What it can do on your machine
Read from SKILL.md and the folder at commit 7703e16. It shows what the files ask for, not the result of running them.
Tool permissions
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.
Runs code
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.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Write Product Spec loads about 818 tokens when it runs. Until then it costs about 29 tokens; SKILL.md has 436 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.
Safety
Auto-check passed
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.
SKILL.md
The full file from Terry-Mao/AICodingFlow at commit 7703e16, republished under its MIT licence (© Terry-Mao). 436 words, ~818 tokens.
Download SKILL.mdSave it as
.claude/skills/write-product-spec/SKILL.md (or your agent's skills folder).- name
- write-product-spec
- description
- Write a behavior-focused product spec for a significant or ambiguous feature in this repository.
write-product-spec
Write the product contract an implementer and reviewer can use to agree on observable behavior. This is a local shared skill; wrappers may provide exact inputs and output paths that take precedence.
Decide and prepare
Use it when behavior, scope, risk, or user impact is substantial enough that a checked-in spec will reduce ambiguity. Skip it for small fixes, straightforward refactors, and narrow low-risk changes.
Specs normally live under specs/. Without an explicit wrapper or prompt path,
use specs/<topic>/product.md; preserve this repository's lowercase filenames
and issue-backed layout. Do not create an issue or other tracker item unless
the user explicitly asks.
Gather only the feature summary, affected users/consumers, desired behavior, edge cases, validation needs, and relevant issue context. Here, “user” may be an end user, maintainer, operator, API caller, contributor, or agent consuming the designed surface. Ask about missing product decisions instead of guessing.
For UI or interaction work, ask whether a Figma mock exists before drafting
behavior. Include its link, or explicitly write Figma: none provided; skip
this for non-visual features.
Write the spec
Keep the spec implementation-light. Required sections are:
- Summary — the feature and desired outcome in 1–3 sentences.
- Problem — the user or product problem when it is not already obvious.
- Goals — observable outcomes the change must achieve.
- Non-goals — adjacent work that is intentionally out of scope.
- Figma / design references — only for visual work; include the link or explicit absence.
- User experience — the main contract. Prefer numbered, testable behavior invariants covering defaults, inputs, state transitions, loading/empty/error states, cancellation, stale or missing data, permissions, races, and keyboard/accessibility expectations when relevant.
- Success criteria — concrete outcomes a reviewer can observe; do not duplicate the behavior section with generic quality claims.
- Validation — how the behavior will be checked with tests or manual evidence. Keep implementation-specific test design in the tech spec too.
- Open questions — unresolved product decisions, preferably next to the behavior they affect.
Show full SKILL.md (114 more words)Show less
The wrapper may require all sections above even when a standalone spec could
omit an empty optional section. Do not add implementation details, file plans,
or architecture here; those belong in write-tech-spec.
Right-size and maintain
Keep framing thin and spend detail on behavior. A small feature is often about 30–60 lines, a medium feature about 80–150 lines, and a complex feature may be longer when its edge cases earn the space. Length is a heuristic, not a target.
When implementation changes user-facing behavior, update the checked-in
product.md in the same change when practical. An optional DECISIONS.md can
record major product decisions for large features, but is not required.
Related skills: write-tech-spec, spec-driven-implementation, and
implement-specs.
© Terry-Mao, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/write-product-spec of Terry-Mao/AICodingFlow.
Open the folder on GitHubat commit 7703e16
Compare with similar skills
Write Product Spec 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 |
|---|---|---|---|---|---|---|
| Write Product Spec this skillTerry-Mao/AICodingFlow | 167 | — | ~818 | Automated safety check: Pass | MIT | |
| Prd To UXragnar-pwninskjold/tech-snacks | 137 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Experience Lwc Design Generateforcedotcom/sf-skills | 1.1k | — | ~4k | Automated safety check: Pass | Apache-2.0 | |
| Design Handoff Briefmohitagw15856/pm-claude-skills | 1.4k | — | ~1.3k | Automated safety check: Pass | MIT | |
| Figma Design Briefmohitagw15856/pm-claude-skills | 1.4k | — | ~1k | Automated safety check: Pass | MIT | |
| Figma Design Reviewmohitagw15856/pm-claude-skills | 1.4k | — | ~788 | Automated safety check: Pass | MIT |
Similar skills
Experience Lwc Design Generate
forcedotcom/sf-skills
A skill your agent uses when you need to create a brand new Lightning Web Component from a Figma design, a Product Requirements Document, or another design artifact — orchestrating the five-phase…
Design Handoff Brief
mohitagw15856/pm-claude-skills
Transform feature briefs into structured design briefs that give designers the context they need before opening Figma.
Figma Design Brief
mohitagw15856/pm-claude-skills
Write a structured design brief for a Figma design task from a product requirement or feature request.
Figma Design Review
mohitagw15856/pm-claude-skills
Runs a structured PM design review against product requirements.
Spec App Consistency Audit
leo-kuang-ai/spec-first
Audit mobile App PRD/Figma/local-source consistency across page routes, KMP/Clean Architecture, components, analytics, i18n, engineering quality, and industry lenses before runtime validation; use…
More from Terry-Mao/AICodingFlow
All 30 skills in this repoPR Walkthrough
Terry-Mao/AICodingFlow
Generate a local static interactive D3 walkthrough of a pull request.
Update PR Review
Terry-Mao/AICodingFlow
Improve repo-local PR review companion skills from human feedback on bot reviews.
Implement Issue
Terry-Mao/AICodingFlow
Implement a GitHub issue in this repository by applying the local shared implement-specs workflow with repository-specific issue, spec-context, and summary-file handling.
Implement Specs
Terry-Mao/AICodingFlow
Implement an approved feature from the repository's product and tech specs, keeping specs and code aligned in the same change as implementation evolves.
Review PR
Terry-Mao/AICodingFlow
Review a GitHub pull request from pinned prdescription.txt, prdiff.txt, and optional speccontext.md snapshots, then write and validate review.json.
Update Dedupe
Terry-Mao/AICodingFlow
Learn repo-local duplicate issue guidance from recent maintainer duplicate closures and propose updates to the dedupe companion skill.
Related
Works with
Categories
Questions about Write Product Spec
What does Write Product Spec do?
Write a behavior-focused product spec for a significant or ambiguous feature in this repository. Write Product Spec is an agent skill from Terry-Mao/AICodingFlow. Write a behavior-focused product spec for a significant or ambiguous feature in this repository.
When should I use Write Product Spec?
Write Product Spec fits situations like: tasks that involve PRD writing.
How do I install Write Product Spec in Claude Code?
Run `npx skills add Terry-Mao/AICodingFlow --skill write-product-spec -a claude-code`. Or copy the skill folder (.agents/skills/write-product-spec in Terry-Mao/AICodingFlow) into .claude/skills/write-product-spec in your project. Claude Code loads it when a task matches its description.
How do I install Write Product Spec in Codex?
Run `npx skills add Terry-Mao/AICodingFlow --skill write-product-spec -a codex`. Or copy the skill folder (.agents/skills/write-product-spec in Terry-Mao/AICodingFlow) into .agents/skills/write-product-spec in your project. Codex loads it when a task matches its description.
Can I use Write Product Spec in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Terry-Mao/AICodingFlow --skill write-product-spec -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/write-product-spec, .gemini/skills/write-product-spec, .github/skills/write-product-spec and .opencode/skills/write-product-spec in your project.
What does Write Product Spec need to run?
SKILL.md names no scripts, command-line tools or credentials: Write Product Spec is instructions for the agent only.
Does Write Product Spec access the network?
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.
Is Write Product Spec safe to install?
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.
What licence does Write Product Spec use?
Write Product Spec is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Write Product Spec use?
About 818 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Write Product Spec?
Skills that share tags, products or a category with Write Product Spec: Prd To UX (ragnar-pwninskjold/tech-snacks, 137 stars), Experience Lwc Design Generate (forcedotcom/sf-skills, 1.1k stars), Design Handoff Brief (mohitagw15856/pm-claude-skills, 1.4k stars) and Figma Design Brief (mohitagw15856/pm-claude-skills, 1.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Write Product Spec?
Terry-Mao (a GitHub user) maintains it in Terry-Mao/AICodingFlow, which has 167 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 3, 2026.
Source: Terry-Mao/AICodingFlow on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.