Product Design
mblode/agent-skillsDecides what an interface should do before UI is built or audited: interaction choice, action scope and consequence, reachable states, resilience, and accessibility as task completion. Works from a brief, spec, mockup, intent, or existing UI. Use when asked "is this the right interaction", "design the flow", "what control should this use", "what should this action affect", "which states should this have", "make this resilient", "what breaks here", "spec the right interaction", or "review this flow for product correctness". Decides which states exist; also owns a gesture that replaces a control...
At a glance
This skill is for Design.
git clone --depth 1 https://github.com/mblode/agent-skills
cp -r agent-skills/skills/product-design ~/.claude/skills/product-design
Setup, runtime and requirements describe mblode/agent-skills, the repo this skill ships in.
Also in mblode/agent-skills
View the repoGuides creation and improvement of best-practice agent skills following the open format specification. Covers frontmatter, progressive discl...
Sets up a repo so Claude Code, Codex, and Cursor all work in it, then audits, scores, and refactors the AGENTS.md and CLAUDE.md files agents...
Runs the npm release flow for an existing changesets package: create a changeset, fix lint/type/test/format failures, push, watch CI, merge...
Audits agentic applications for architecture and trust: tool parity, tool granularity, context injection, completion signals, approval gates...
Designs, deepens, and hardens TypeScript codebase architecture in three modes: folder structures, module contracts, and middleware pipelines...
Writes and edits short product and marketing copy, including landing pages, CTAs, onboarding strings, product descriptions, email subjects,...
Writes and audits technical documentation using the Diataxis framework and Stripe-style clarity. 48 rules across 9 categories covering voice...
Audits the smallest relevant developer-facing surface of a library, CLI, SDK, or npm package across API contracts, errors, CLI behavior, pub...
Provides architecture guidance for multi-tenant SaaS platforms on Cloudflare or Vercel. Covers platform choice, domain strategy, tenant iden...
Optimises SEO and technical foundations for Next.js App Router apps, covering sitemaps, robots, meta tags, structured data, canonical URLs,...
Builds and stress-tests implementation plans in two modes. Create mode scans code and docs, asks one question at a time with a recommended a...
Monitors an open PR, detects it from the current branch, polls for conflicts, CI failures, review comments, and merge readiness, fixes safe...
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...