Agent skill

Product Design And UX

by magnus919 in magnus919/agent-skills

Define user-facing product behavior from validated evidence and approved scope.

MITAuto-check passedFrontend & Design

Install Product Design And UX

skills CLI
$ npx skills add magnus919/agent-skills --skill product-design-and-ux -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install magnus919/agent-skills product-design-and-ux --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/product-design-and-ux .claude/skills/product-design-and-ux && rm -rf skills-src

Use ~/.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/

Facts

Skill name
product-design-and-ux
GitHub stars
115
Token cost
~2.2k tokens
SKILL.md length
780 words
Files
27 (incl. references)
Skills in repo
131
Repo updated
First seen
Licence
MIT

At a glance

Define user-facing product behavior from validated evidence and approved scope.

  • Works in 9 steps: Trace each outcome and design decision… → Establish information architecture from… → Define consequential labels,… → …
  • Information architecture
  • SKILL.md covers Entry Check, Workflow, Load On Demand and Guardrails, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Product Design And UX is an agent skill from magnus919/agent-skills. Define user-facing product behavior from validated evidence and approved scope. Use for information architecture, task flows, state and recovery models, interface contracts, usability-study plans, interaction-pattern tradeoffs, AI recommendations and generated outputs, uncertainty, human control, feedback, or engineering UX handoffs. Use after product discovery and product decisions; route WCAG/ARIA conformance work to web-accessibility and formal software specifications to spec-driven-development. Do not use…

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 28 other files, including reference files (for example `README.md`, `evals/business-app-rubric-challenges.md` and `evals/evals.json`). Compatibility notes: Works with any agent framework supporting the Agent Skills format; no design tool, frontend framework, or proprietary service required.

It sits in Frontend & Design, covering Accessibility, UX design and Spec-driven development. The repository describes itself as: Curated collection of AI agent skills for Hermes and other agent frameworks. The licence is MIT.

When your agent uses it

  • Information architecture
  • State and recovery models
  • Interface contracts
  • Usability-study plans

Example prompts

  • “/product-design-and-ux”

Requirements

  • Compatibility (from SKILL.md): Works with any agent framework supporting the Agent Skills format; no design tool, frontend framework, or proprietary service required.

Workflow steps

9 steps, taken from the first numbered list in SKILL.md.

  1. Trace each outcome and design decision to evidence with templates/outcomes-to-design.md. Optional personas or jobs must change a decision…
  2. Establish information architecture from goals, content objects, terminology, permissions, findability, and service context. Read…
  3. Define consequential labels, instructions, status, errors, and completion content; review the task's memory, choice, switching…
  4. Model important tasks across every participating role, including recipient-side work after a handoff. Stop at the intended user outcome…
  5. Inventory only states forced by the flow, data, permissions, connectivity, and risk. Record risky omissions. Use…
  6. Write framework-neutral contracts for content, controls, accessible interaction requirements, actions, transitions, persistence…
  7. Treat patterns as hypotheses. Compare alternatives, tradeoffs, evidence, and disconfirming conditions with…
  8. Plan or synthesize only authorized usability work. Read references/usability-testing-and-privacy.md; use templates/usability-study.md…
  9. Produce an engineering handoff with observable acceptance evidence, dependencies, owners, gates, and deployed-boundary verification. Read…

What it can do on your machine

Read from SKILL.md and the folder at commit 22b4723. 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.

  • Compatibility

    Works with any agent framework supporting the Agent Skills format; no design tool, frontend framework, or proprietary service required.

    From compatibility in the SKILL.md frontmatter.

Context cost

Product Design And UX loads about 2.2k tokens when it runs, and up to ~16k if it reads all its reference files. Until then it costs about 153 tokens; SKILL.md has 780 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~153
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~16k

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 magnus919/agent-skills at commit 22b4723, republished under its MIT licence (© magnus919). 780 words, ~2,151 tokens.

Download SKILL.mdSave it as .claude/skills/product-design-and-ux/SKILL.md (or your agent's skills folder). This skill also uses 26 other files; get the full folder from GitHub.
name
product-design-and-ux
description
Define user-facing product behavior from validated evidence and approved scope. Use for information architecture, task flows, state and recovery models, interface contracts, usability-study plans, interaction-pattern tradeoffs, AI recommendations and generated outputs, uncertainty, human control, feedback, or engineering UX handoffs. Use after product discovery and product decisions; route WCAG/ARIA conformance work to web-accessibility and formal software specifications to spec-driven-development. Do not use this skill for unrelated requests; route to the nearest named specialist.
compatibility
Works with any agent framework supporting the Agent Skills format; no design tool, frontend framework, or proprietary service required.
license
MIT

Product Design and UX

Turn validated evidence and chosen scope into observable behavior people can complete and recover from. Design the interaction, not the brand, pixels, CSS, component implementation, or a particular tool.

Entry Check

Confirm the approved scope, outcome, users or roles, evidence links, constraints, measurable experience goals, and open product decisions. Record missing inputs rather than inventing them.

Workflow

  1. Trace each outcome and design decision to evidence with templates/outcomes-to-design.md. Optional personas or jobs must change a decision and cite evidence; do not create decorative demographics.
  2. Establish information architecture from goals, content objects, terminology, permissions, findability, and service context. Read references/information-architecture.md.
  3. Define consequential labels, instructions, status, errors, and completion content; review the task's memory, choice, switching, interruption, and recovery demands. Use heuristics to generate testable questions, not verdicts. Read references/content-and-cognitive-demand.md.
  4. Model important tasks across every participating role, including recipient-side work after a handoff. Stop at the intended user outcome, not merely submission, delivery, or an intermediate status. Include decisions, alternatives, interruption, re-entry, cancellation, recovery, irreversible actions, side effects, permission changes, and completion evidence. Read references/task-flows-and-state-models.md and use templates/task-flow-state-model.md.
  5. Inventory only states forced by the flow, data, permissions, connectivity, and risk. Record risky omissions. Use templates/screen-state-inventory.md.
  6. Write framework-neutral contracts for content, controls, accessible interaction requirements, actions, transitions, persistence, permissions, responsive/reflow behavior, telemetry, and open decisions. Read references/interface-contracts-and-responsive-behavior.md and use templates/interface-contract.md.
  7. Treat patterns as hypotheses. Compare alternatives, tradeoffs, evidence, and disconfirming conditions with references/interaction-pattern-selection.md.
  8. Plan or synthesize only authorized usability work. Read references/usability-testing-and-privacy.md; use templates/usability-study.md. Never invent participants, consent, observations, quotes, or results.
  9. Produce an engineering handoff with observable acceptance evidence, dependencies, owners, gates, and deployed-boundary verification. Read references/engineering-handoff.md; use templates/engineering-handoff.md. Hand approved behavior to spec-driven-development.
Show full SKILL.md (344 more words)Show less

Load On Demand

NeedLoad
Scope boundary, traceability, or adjacent-skill routingreferences/boundaries-and-traceability.md
Goals, labels, navigation, findability, permissionsreferences/information-architecture.md
Plain-language content, heuristic review, cognitive demandreferences/content-and-cognitive-demand.md
Task paths, state applicability, recovery, side effectsreferences/task-flows-and-state-models.md
Interaction contract or inclusive responsive behaviorreferences/interface-contracts-and-responsive-behavior.md
Pattern alternatives and decision evidencereferences/interaction-pattern-selection.md
Usability protocol, synthesis, consent, or privacyreferences/usability-testing-and-privacy.md
Handoff, acceptance criteria, or deployed verificationreferences/engineering-handoff.md
AI uncertainty, grounding, human control, feedback, or model-change acceptancereferences/ai-interaction-and-uncertainty.md
A person delegates work to their own agent outside the product and returns across app boundariesreferences/external-agent-interactions.md; templates/external-agent-handoff.md
Methodology self-check with synthetic fixturesreferences/scenario-probes.md
Source authority, status, and examplesreferences/source-index.md

Guardrails

  • Accessibility is designed throughout, but WCAG/ARIA/native-semantics and testing depth remain with web-accessibility.
  • Specify behavior under relevant width, zoom/reflow, text expansion/localization, orientation, input modes, reduced motion, degraded connectivity, interruption, and re-entry. Do not use device breakpoints as the model.
  • Use synthetic fixtures such as sample-user@example.test and INV-DEMO-042; never request real credentials, payments, financial access, or secrets for an unsafe prototype.
  • A finding from usability work is bounded evidence, not accessibility conformance, population prevalence, analytics, or outcome proof.
  • AI output, confidence, explanation, citation, or user feedback is not proof of correctness by itself. Record the evidence boundary and route model-quality and statistical questions to the owning specialist.

Completion

Stop when every in-scope behavior has traceable evidence, an applicable state/recovery model, observable acceptance criteria, and either a resolved decision or an owner and resolution gate. Report limitations and untested risks rather than filling gaps with assumptions.

Embedded business-app example

When designing an agent inside an existing task surface, read the equipment-loan worked example. It fills the existing AI interaction, task-flow, and engineering-handoff contracts from recommendation through confirmed effects and recovery; treat its acceptance probes as synthetic design fixtures, not observed usability results.

For executable AI recommendations, re-check current permission, record revision, policy, inventory, and the approved action digest at execution. An approval-time check alone is insufficient. After an uncertain command outcome, query the persisted command ID before any retry; do not create a new reservation ID or repeat a confirmed side effect. Show partial effects separately.

© magnus919, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 26 other files (references) in product-design-and-ux of magnus919/agent-skills.

  • SKILL.md
  • README.md
  • evals/business-app-rubric-challenges.md
  • evals/evals.json
  • evals/openai-reference-inputs.json
  • references/ai-interaction-and-uncertainty.md
  • references/boundaries-and-traceability.md
  • references/content-and-cognitive-demand.md
  • references/embedded-business-agent.md
  • references/engineering-handoff.md
  • references/external-agent-interactions.md
  • references/information-architecture.md
  • references/interaction-pattern-selection.md
  • references/interface-contracts-and-responsive-behavior.md
  • references/scenario-probes.md
  • references/source-index.md
  • references/task-flows-and-state-models.md
  • references/usability-testing-and-privacy.md
  • templates
  • … and 8 more

Open the folder on GitHubat commit 22b4723

Compare with similar skills

Product Design And UX 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.

Product Design And UX compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Product Design And UX this skillmagnus919/agent-skills115—~2.2kAutomated safety check: PassMIT
Color Auditrome-os/rome748—~2.7kAutomated safety check: PassMIT
Dont Make Me Thinkluongnv89/skills131—~2.5kAutomated safety check: PassMIT
Super UI UX Designsyahiidkamil/Software-Engineer-AI-Agent-Atlas401—~9kAutomated safety check: PassNone
Design Critiquegetcrew44/crew44356—~691Automated safety check: PassMIT
Error Prevention and RecoveryOwl-Listener/inclusive-design-skills105—~739Automated safety check: PassMIT

Similar skills

  • Color Audit

    rome-os/rome

    Audit a design system's color palette against measurable color-science disciplines — WCAG/APCA contrast of declared token pairs, perceptual (OKLCH) ramp uniformity, color-blindness safety of…

    748 GitHub stars~2.7k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Dont Make Me Think

    luongnv89/skills

    Review UI usability using Steve Krug's principles and produce a scannable report.

    131 GitHub stars~2.5k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Super UI UX Design

    syahiidkamil/Software-Engineer-AI-Agent-Atlas

    Complete UI/UX design capability — a wiki-style knowledge map of design theory (UX laws, Nielsen heuristics, usability, visual hierarchy, typography, contrast/WCAG, design systems…

    401 GitHub stars~9k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed
  • Design Critique

    getcrew44/crew44

    Walks an agent through five review passes on a screen, flow or mockup, then returns ranked findings with a severity and a suggested fix for each one.

    356 GitHub stars~691 tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed
  • Error Prevention and Recovery

    Owl-Listener/inclusive-design-skills

    Designs forgiving forms and flows: prevent input errors, write messages that say what happened and what to do, and add undo, confirmation and recovery paths.

    105 GitHub stars~739 tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed
  • UI Automation Workflows

    conorluddy/xclaude-plugin

    Accessibility-first UI automation using IDB. An agent skill from conorluddy/xclaude-plugin.

    183 GitHub stars~2.2k tokensUpdated 29 days ago
    Frontend & DesignAuto-check passed

More from magnus919/agent-skills

All 131 skills in this repo
  • Artifact Pyramids

    magnus919/agent-skills

    Organize durable agent research outputs as summaries, analysis, and evidence dossiers.

    119 GitHub stars~2.7k tokensUpdated today
    Auto-check passed
  • Ascii City Engine

    magnus919/agent-skills

    Build portable, first-person colored ASCII city engines and small GIS-derived city packs.

    119 GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Color Management

    magnus919/agent-skills

    Manage color workflows with ICC profiles, working spaces, gamut mapping, and color science.

    119 GitHub stars~2.6k tokensUpdated today
    Auto-check: notes
  • Data Scientist

    magnus919/agent-skills

    A skill your agent uses for PhD-level expertise in data science, statistics, and machine learning: rigorous statistical analysis, experimental design, causal inference, advanced modeling, research…

    119 GitHub stars~4.1k tokensUpdated today
    Auto-check passed
  • Docker Compose

    magnus919/agent-skills

    Use Docker Compose to define, run, debug, and harden multi-container applications.

    119 GitHub stars~2k tokensUpdated today
    Auto-check: notes
  • Fpga Development

    magnus919/agent-skills

    Design, review, simulate, and verify FPGA logic using explicit RTL contracts, clock and reset models, CDC analysis, timing constraints, and reproducible implementation evidence.

    119 GitHub stars~2.7k tokensUpdated today
    Auto-check passed

Questions about Product Design And UX

What does Product Design And UX do?

Define user-facing product behavior from validated evidence and approved scope. Product Design And UX is an agent skill from magnus919/agent-skills. Define user-facing product behavior from validated evidence and approved scope.

When should I use Product Design And UX?

Product Design And UX fits situations like: information architecture; state and recovery models; interface contracts; usability-study plans.

How do I install Product Design And UX in Claude Code?

Run `npx skills add magnus919/agent-skills --skill product-design-and-ux -a claude-code`. Or copy the skill folder (product-design-and-ux in magnus919/agent-skills) into .claude/skills/product-design-and-ux in your project. Claude Code loads it when a task matches its description.

How do I install Product Design And UX in Codex?

Run `npx skills add magnus919/agent-skills --skill product-design-and-ux -a codex`. Or copy the skill folder (product-design-and-ux in magnus919/agent-skills) into .agents/skills/product-design-and-ux in your project. Codex loads it when a task matches its description.

Can I use Product Design And UX 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 magnus919/agent-skills --skill product-design-and-ux -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-design-and-ux, .gemini/skills/product-design-and-ux, .github/skills/product-design-and-ux and .opencode/skills/product-design-and-ux in your project.

What does Product Design And UX need to run?

SKILL.md names no scripts, command-line tools or credentials: Product Design And UX is instructions for the agent only. Compatibility (from SKILL.md): Works with any agent framework supporting the Agent Skills format; no design tool, frontend framework, or proprietary service required..

Does Product Design And UX 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 Product Design And UX 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 Product Design And UX use?

Product Design And UX is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Product Design And UX use?

About 2.2k tokens (SKILL.md is roughly 8.6k 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 14k tokens, read only when the agent opens those files.

What are the alternatives to Product Design And UX?

Skills that share tags, products or a category with Product Design And UX: Color Audit (rome-os/rome, 748 stars), Dont Make Me Think (luongnv89/skills, 131 stars), Super UI UX Design (syahiidkamil/Software-Engineer-AI-Agent-Atlas, 401 stars) and Design Critique (getcrew44/crew44, 356 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Product Design And UX?

magnus919 (a GitHub user) maintains it in magnus919/agent-skills, which has 115 GitHub stars. The repository holds 131 skills in this directory. The repository was last updated on October 10, 2026.

Source: magnus919/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.