Skip to content

skilldrop·docs·How-to

Use the Experience design pack

Install the Experience design pack, run its first task, and follow a typical session step by step.

The experience around a product: the structure people navigate, the content and interface words they read, the components they use, and the service behind it all.

Reach for it when: You're designing or fixing the experience around a product or service: how it's organised, what it says, how its components behave, and what happens behind the scenes.

1. Install it

npx skilldrop-cli install --pack experience-design                 # Claude Code, your user folder
npx skilldrop-cli install --pack experience-design --project       # Claude Code, this repo
npx skilldrop-cli install --pack experience-design --ide cursor    # or kiro, codex, antigravity, copilot
npx skilldrop-cli install --pack experience-design --local         # this repo, hidden from git

In Claude Code you can also add the marketplace once (/plugin marketplace add sananthanarayan/skilldrop) and run /plugin install experience-design@skilldrop.

It brings core with it, so the shared skills are there too.

2. Run the first task: restructure a menu users get lost in, and get the test that proves the new one works

Before you start:

Paste this into your agent:

Our help centre menu has grown to 15 items and customers can't find refunds or delivery tracking. Current menu: Getting Started, Account, Orders, Shipping, Delivery, Returns, Refunds, Payments, Gift Cards, Promotions, Membership, Privacy, Terms, Contact Us, Community. Design the information architecture and the tree test to validate it.

How to tell it worked: information-architecture returns an inventory with a keep/merge/cut status for every item, a sitemap tree and a Mermaid diagram that match, a label rationale table, findability risks for refunds and tracking, and tree-test tasks that don't use the menu's words.

If nothing happens: If you get a journey map instead, ask for it by name ("use information-architecture"). If labels look invented, give it your search terms or support ticket themes and ask it to tag every label's evidence.

3. A typical session

Bring:

A session takes about 1–3 hours for one product area.

  1. information-architecture: Hand over the content or feature list and the users' top tasks. You get: A sitemap and nav model with a label rationale table, findability risks, and a tree-test plan. You decide: Run the tree test before building, or accept the structure as a hypothesis.
  2. content-design: Pick a key page from the sitemap and give it the current text or the facts it must contain. You get: User-need statements, the questions in priority order, a plain-language draft with a before/after readability check, and a cut list.
  3. ux-writing: Give it the flow's screens or steps and your voice. You get: A string table with budgets and variants for every button, label, error and empty state, plus a terminology list.
  4. design-system-spec: Name a component the flow needs and your token set. You get: A component spec with anatomy, every state by token, keyboard and ARIA behaviour cited to WCAG 2.2, and open questions for engineering.
  5. service-blueprint: Describe one customer scenario and what you know about the teams and systems behind it. You get: A blueprint table and Mermaid diagram with fail points, waits, pains traced to causes, and 2–3 ranked fixes. You decide: Which fix becomes committed work.
  6. doc-critique: Run it on any of the specs before you share them. You get: A verdict and severity-tagged findings with a fix for each.

You end with: A tested-or-testable structure, the content and strings for a key page and flow, a buildable component spec, and a service blueprint with the fixes ranked.

Next

Edit this page on GitHub · View source