Web Design
xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词(任意组合),先产出一份标准化 DESIGN.md 设计规范,用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端:Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…
A skill your agent uses when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens, competitive teardown, analytics, experiments, discovery…
$ npx skills add alirezarezvani/claude-skills --skill product-skills -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install alirezarezvani/claude-skills product-skills --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/alirezarezvani/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/product-team/skills/product-skills .claude/skills/product-skills && 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 "product-skills" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/product-team/skills/product-skills into .claude/skills/product-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-skills", 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/alirezarezvani/claude-skills/tree/main/product-team/skills/product-skillsType 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 alirezarezvani/claude-skills --skill product-skills -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install alirezarezvani/claude-skills product-skills --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/product-team/skills/product-skills .agents/skills/product-skills && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "product-skills" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/product-team/skills/product-skills into .agents/skills/product-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-skills", 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 alirezarezvani/claude-skills --skill product-skills -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install alirezarezvani/claude-skills product-skills --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/product-team/skills/product-skills .cursor/skills/product-skills && 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 "product-skills" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/product-team/skills/product-skills into .cursor/skills/product-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-skills", 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/alirezarezvani/claude-skills.git --path product-team/skills/product-skills--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 alirezarezvani/claude-skills --skill product-skills -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install alirezarezvani/claude-skills product-skills --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/product-team/skills/product-skills .gemini/skills/product-skills && 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 "product-skills" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/product-team/skills/product-skills into .gemini/skills/product-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-skills", 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 alirezarezvani/claude-skills product-skillsInstalls 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 alirezarezvani/claude-skills --skill product-skills -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/product-team/skills/product-skills .github/skills/product-skills && 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 "product-skills" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/product-team/skills/product-skills into .github/skills/product-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-skills", 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 alirezarezvani/claude-skills --skill product-skills -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install alirezarezvani/claude-skills product-skills --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/product-team/skills/product-skills .opencode/skills/product-skills && 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 "product-skills" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/product-team/skills/product-skills into .opencode/skills/product-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-skills", 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.
product-skillsA skill your agent uses when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens, competitive teardown, analytics, experiments, discovery…
Product Skills is an agent skill from alirezarezvani/claude-skills. Use when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens, competitive teardown, analytics, experiments, discovery, roadmaps, spec-to-repo, landing pages, SaaS scaffolding) or the 4 standalone product-team plugins (user stories, Apple HIG, code-to-PRD, research summarizer). Triggers on 'help me prioritize', 'plan a product experiment', 'we ship features nobody uses', 'run the discovery loop', 'is our OST sound'. Forks context to route to one sub-skill via…
Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files, including scripts, reference files and assets (for example `assets/sample_discovery_log.json`, `assets/sample_ost.json` and `references/ai_product_evals.md`).
It sits in Frontend & Design, covering OKRs and executive reporting, PRD writing and Landing pages. The repository describes itself as: 380 Claude Code skills & agent skills & plugins (30+ Agents, 70+ custom commands, 380+ skills, customizable references, scripts)for Claude Code, Codex, Gemini CLI, Cursor, and 8… The licence is MIT.
5 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 19392f7. 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.
Ships 3 files in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3From 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.
Product Skills loads about 2.6k tokens when it runs, and up to ~5.5k if it reads all its reference files. Until then it costs about 240 tokens; SKILL.md has 1,028 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); the scripts in this folder are not scanned.
The full file from alirezarezvani/claude-skills at commit 19392f7, republished under its MIT licence (© alirezarezvani). 1,028 words, ~2,599 tokens.
.claude/skills/product-skills/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.This orchestrator does two jobs. Routing: fork context, classify a product inquiry
with scripts/product_goal_router.py across all 16 product-team lanes (12 bundled + 4
standalone plugins), run exactly one, return a digest. Looping: run product work as
bounded agentic loops with machine-checkable gates — the continuous-discovery loop
(weekly cadence scored by discovery_cadence_tracker.py, tree structure enforced by
ost_linter.py) and goal-scale runs through the repo-wide agent-harness.
| Symptom | Sub-skill |
|---|---|
| "Prioritize features / RICE / PRD" | product-manager-toolkit |
| "OKRs, strategy cascade" | product-strategist |
| "Personas, usability, research synthesis" | ux-researcher-designer |
| "Design tokens, WCAG contrast" | ui-design-system |
| "Competitor matrix, teardown" | competitive-teardown |
| "Retention, cohorts, funnels, KPIs" | product-analytics |
| "A/B test, sample size, hypothesis" | experiment-designer |
| "Discovery, assumptions, opportunity trees" | product-discovery |
| "Roadmap comms, release notes, changelog" | roadmap-communicator |
| "Spec → runnable repo" | spec-to-repo |
| "Landing page (Next.js/Tailwind)" | landing-page-generator |
| "SaaS boilerplate" | saas-scaffolder |
| "User stories, sprint capacity" | agile-product-owner (standalone) |
| "Apple HIG audit" | apple-hig-expert (standalone) |
| "PRD from an existing codebase" | code-to-prd (standalone) |
| "Summarize papers/articles" | research-summarizer (standalone) |
python3 scripts/product_goal_router.py --text "<the goal>" --output jsonExit 0 → route_to names the skill (with skill_path, including the standalone
plugins): load its SKILL.md and follow its workflow. Exit 2 → ask ONE clarifying question
naming the listed candidates, with a recommended answer. Exit 3 → no signal: ask the user
to restate the goal with the deliverable named. Never guess silently; never silently
chain — digest first, confirm, then chain.
Modern discovery is a weekly habit, not a project phase (Torres). Run it as a bounded loop with two machine gates:
discovery_log.json (interviews, assumption tests; shape in
assets/sample_discovery_log.json) and score the cadence:python3 scripts/discovery_cadence_tracker.py --input discovery_log.jsonnext_loop_action.next_loop_action IS the choice: book the touchpoint,
re-anchor the guide on the outcome, or test the top untested assumption (route to
product-discovery's assumption_mapper for prioritization).python3 scripts/ost_linter.py --input ost.json # exit 2 = NEEDS-REWORK, fix before citing the treeexperiment-designer (build the
A/B gate) or product-manager-toolkit (PRD); DORMANT for 4+ weeks → escalate to the
product lead by name — do not quietly let discovery die.For build-scale goals ("turn this validated spec into a repo and verify it"), compile through the repo-wide harness instead:
python3 engineering/agent-harness/skills/agent-harness/scripts/goal_compiler.py \
--goal "<goal>" --manifest engineering/agent-harness/skills/agent-harness/assets/harnesses/product-team.json \
--out .agent-harness/plan.jsonThe domain's three strongest close-out gates plug in as task verifications:
../spec-to-repo/scripts/validate_project.py (exit 0), code-to-prd's golden
expected_outputs/, and research-summarizer's citation-count check.
ost_linter.py
exits 0; no insight is asserted from a single participant (anecdote, not insight).../experiment-designer/scripts/sample_size_calculator.py, never gut feel; report the
MDE with the verdict.One per turn, recommended answer, canon citation. Never run a sub-skill or start a loop until the lane-defining decision is locked:
--sample so the shape is visible first.project-management.engineering/agent-harness; this orchestrator is
the product-domain adapter (router + discovery gates).marketing/landing builds from-scratch marketing pages;
landing-page-generator here scaffolds product Next.js/TSX pages.| Mode | Artifact |
|---|---|
| Route | Sub-skill's own artifact + ≤ 200-word digest with one canon-cited challenge |
| Discovery loop | discovery_log.json + cadence report + linted ost.json |
| Harness run | .agent-harness/plan.json + state.json + close handoff |
engineering/agent-harness · Loop vocabulary: loop-library© alirezarezvani, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 8 other files (scripts, references, assets) in product-team/skills/product-skills of alirezarezvani/claude-skills.
Open the folder on GitHubat commit 19392f7
Product Skills 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 |
|---|---|---|---|---|---|---|
| Product Skills this skillalirezarezvani/claude-skills | 28k | — | ~2.6k | Automated safety check: Pass | MIT | |
| Web Designxiaopu-ai/web-design | 783 | — | ~3k | Automated safety check: Pass | MIT | |
| Improve Websitewondelai/skills | 2.4k | — | ~5.1k | Automated safety check: Pass | MIT | |
| Sveltekit WebappLeoYeAI/openclaw-master-skills | 2.2k | — | ~5.2k | Automated safety check: Notes | MIT | |
| Premium SaaS DesignHermeticOrmus/LibreUIUX-Claude-Code | 112 | — | ~3.3k | Automated safety check: Pass | MIT | |
| Design Critiquemohitagw15856/pm-claude-skills | 1.4k | — | ~1.5k | Automated safety check: Pass | MIT |
xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词(任意组合),先产出一份标准化 DESIGN.md 设计规范,用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端:Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…
wondelai/skills
Guided journey from a live website that underperforms to a prioritized, evidence-backed backlog of conversion, usability, message, and speed fixes - each shipped as a testable experiment.
LeoYeAI/openclaw-master-skills
Scaffold and configure a production-ready SvelteKit PWA with opinionated defaults.
HermeticOrmus/LibreUIUX-Claude-Code
The Define, Build, Review, Refine loop and seven context artifacts (brief, content, mood boards, section specs, style guide, PRD, tasks) for building a premium SaaS marketing site with AI.
mohitagw15856/pm-claude-skills
Give structured, constructive feedback on any design using UX frameworks.
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…
alirezarezvani/claude-skills
Writes INVEST-checked user stories with acceptance criteria, splits epics, plans sprints from velocity and ranks the backlog with a weighted score.
alirezarezvani/claude-skills
OKR cascade toolkit for product leaders: generates aligned company-to-team OKRs from five strategy types and scores how well they line up.
alirezarezvani/claude-skills
App Store Optimization (ASO) toolkit for researching keywords, analyzing competitor rankings, generating metadata suggestions, and improving app visibility on Apple App Store and Google Play Store.
alirezarezvani/claude-skills
Design AWS architectures for startups using serverless patterns and IaC templates.
alirezarezvani/claude-skills
Calculates attribution, funnel and ROI figures for marketing campaigns with three Python scripts that need only the standard library.
alirezarezvani/claude-skills
Reverse-engineers a frontend, backend or fullstack codebase into a product requirements document with per-page docs, an enum dictionary and an API inventory.
A skill your agent uses when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens, competitive teardown, analytics, experiments, discovery…. Product Skills is an agent skill from alirezarezvani/claude-skills. Use when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens, competitive teardown, analytics, experiments, discovery, roadmaps, spec-to-repo, landing pages, SaaS scaffolding) or the 4 standalone product-team plugins (user stories, Apple HIG, code-to-PRD, research summarizer).
Product Skills fits situations like: coordinating product work across the 12 bundled product sub-skills (RICE; competitive teardown; saaS scaffolding); the 4 standalone product-team plugins (user stories.
Run `npx skills add alirezarezvani/claude-skills --skill product-skills -a claude-code`. Or copy the skill folder (product-team/skills/product-skills in alirezarezvani/claude-skills) into .claude/skills/product-skills in your project. Claude Code loads it when a task matches its description.
Run `npx skills add alirezarezvani/claude-skills --skill product-skills -a codex`. Or copy the skill folder (product-team/skills/product-skills in alirezarezvani/claude-skills) into .agents/skills/product-skills 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 alirezarezvani/claude-skills --skill product-skills -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/product-skills, .gemini/skills/product-skills, .github/skills/product-skills and .opencode/skills/product-skills in your project.
Going by SKILL.md and its folder, Product Skills needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3.
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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Product Skills is published under the MIT licence (declared in SKILL.md). 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. Its references folder adds about 2.9k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Product Skills: Web Design (xiaopu-ai/web-design, 783 stars), Improve Website (wondelai/skills, 2.4k stars), Sveltekit Webapp (LeoYeAI/openclaw-master-skills, 2.2k stars) and Premium SaaS Design (HermeticOrmus/LibreUIUX-Claude-Code, 112 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
alirezarezvani (a GitHub user) maintains it in alirezarezvani/claude-skills, which has 27,938 GitHub stars. The repository holds 342 skills in this directory. The repository was last updated on August 30, 2026.
Source: alirezarezvani/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.