Patterson Design — Claude Code Marketplace

Trusted Expertise. Unrivaled Support. — the Patterson Companies design system, packaged as ten individually installable Claude Code plugins.

---

Table of contents

• Live site
• What this is
• Quick start
• Plugin catalog
• Anatomy of a plugin
• Repository layout
• Demos
• Dev environment (Codespaces & dev containers)
• Testing
• Maintenance
• Decisions
• Brand & licensing

Live site

design.patterson.sh — the design-system plugin marketplace: 10 Claude Code plugins for building on-brand Patterson Companies interfaces, decks, docs sites and storefronts.

What this is

Every part of the Patterson design system — the brand core, each template, each UI kit — is its own plugin. Install only what you need; each ships a skill (auto-invoked knowledge), slash commands (scaffold workflows), a subagent (a specialist Claude delegates to), and a self-contained ds/ snapshot of every file it needs.

Note

This repo is a fork of patterson-design-plugins, forked as its own independent history under patterson-agents/design-plugins. See Decisions for what changed and why.

Quick start

From a git host (this repo is private — see Brand & licensing):

# inside Claude Code
/plugin marketplace add patterson-agents/design-plugins
/plugin install patterson-brand@patterson-design      # the foundation
/plugin install patterson-deck@patterson-design       # …plus whatever you need

From a local checkout:

cd design-plugins
claude
/plugin marketplace add .
/plugin install patterson-deck@patterson-design

Then use it three ways:

/patterson-deck:new-deck Q3 dental equipment business review   ← slash command
/patterson-deck:deck-template                                   ← invoke the skill directly
"make me a Patterson deck about our vet supply chain"           ← skill + agent fire automatically

Plugin catalog

Preview	Plugin	What it is	Primary command
	patterson-brand Core	Tokens, fonts, logos, React component library, guideline specimens, framework adapters (Tailwind, UnoCSS, Theme UI, shadcn/ui).	/patterson-brand:design
	patterson-deck Template	16:9 company deck — cover, stats, comparison, quote, photo band, closing. Print-to-PDF ready.	/patterson-deck:new-deck
	patterson-executive-deck Template	Editorial executive briefing — takeaways, matrices, requirements, outputs.	/patterson-executive-deck:new-executive-deck
	patterson-corporate-page Template	Web page shell — sticky nav, navy hero, content band, footer. React, no build step.	/patterson-corporate-page:new-page
	patterson-file-manager Template	"Skill Studio" app shell for internal tools — top bar, sidebar tree, content grid.	/patterson-file-manager:new-app-shell
	patterson-docs Template	Docs-site UI kit (VitePress + Diátaxis style) plus a standalone docs page template.	/patterson-docs:new-docs
	patterson-corporate-website UI kit	Corporate-site screens — home hero, stats, capability tabs, newsroom, header, footer.	/patterson-corporate-website:new-corporate-site
	patterson-storefront UI kit	E-commerce shell with a Dental ↔ Veterinary brand toggle — search, flyout nav, products, rewards.	/patterson-storefront:new-storefront

Each plugin has its own README with a file tree, usage examples, and a terminal demo — click through the table.

Important

patterson-docs and patterson-file-manager load React and Babel from unpkg.com at runtime — they are genuine application templates, not static specimens, and that is a deliberate, documented exception to this marketplace's normal offline-first rule. See ADR 0004.

Why ten separate plugins instead of one?

Each plugin installs independently so a consumer only pays for what they use — a team building one internal tool shouldn't have to install the storefront UI kit to get the file-manager shell. patterson-brand is the one dependency the other nine lean on conceptually (tokens, fonts, logos), though every plugin's ds/ snapshot is fully self-contained on disk.

Anatomy of a plugin

The ds/ snapshot is the key idea — it mirrors the design-system source tree, so every relative reference inside the files works in this repo, in the plugin cache, and after being copied into a project:

Repository layout

design-plugins/
├── .claude-plugin/
│   └── marketplace.json          # the catalog Claude Code reads
├── plugins/                      # 9 self-contained plugins (see table above)
│   └── <name>/
│       ├── .claude-plugin/plugin.json
│       ├── skills/<skill>/SKILL.md
│       ├── commands/*.md         # slash commands
│       ├── agents/*.md           # subagents
│       ├── ds/                   # design-system snapshot (tokens, fonts, logos, artifact)
│       └── README.md
├── docs/
│   ├── screenshots/              # 9 plugin preview PNGs (used above)
│   ├── diagrams/                 # architecture SVGs
│   └── decisions/                # ADRs
├── demos/                        # HTML demo gallery + VHS terminal-demo tapes
├── tests/                        # zero-dependency validation suite (run-tests.sh)
├── .devcontainer/                # node:24 + Claude Code + OpenCode + Copilot CLI + gh
├── .vscode/                      # settings, tasks, launch, extension picks
├── .github/                      # copilot-instructions.md + CI + agentic workflows
├── devcontainer-template/        # publishable Dev Container Template (patterson-agents)
├── dotfiles/                     # agent aliases + idempotent install.sh
└── README.md                     # you are here

Publishing this to GitHub or handing it to a developer? Start from CLAUDE_CODE_HANDOFF.md — a paste-ready Claude Code prompt that walks through publishing, validation, the Codespaces path, and the snapshot-sync maintenance loop.

Demos

_{The demo gallery — every plugin's live artifact, one browsable page.}

• demos/index.html — a browsable gallery of every plugin's live artifact (open locally, or npx serve and visit /demos/).
• demos/vhs/ — one VHS tape per plugin scripting a real terminal session (install → slash command). Render the GIFs with:

brew install vhs        # or: go install github.com/charmbracelet/vhs@latest
vhs demos/vhs/patterson-deck.tape     # writes demos/vhs/gif/patterson-deck.gif
for t in demos/vhs/*.tape; do vhs "$t"; done   # render all

Each plugin README embeds its GIF once rendered.

Dev environment (Codespaces & dev containers)

Open the repo in GitHub Codespaces or VS Code Dev Containers and the whole agent toolchain is preinstalled: Claude Code (claude), OpenCode (opencode), GitHub Copilot CLI (copilot) and gh.

Piece	What it does
.devcontainer/	node:24-family image + gh & Claude Code features; setup.sh installs Copilot CLI + OpenCode during prebuild
.vscode/	marketplace.json schema validation, docs live-preview, claude plugin validate . as the default test task
.github/copilot-instructions.md	repo conventions Copilot loads automatically
.github/workflows/	GHCR image prebuild, Dev Container Template publishing, and gh-aw agentic workflows
devcontainer-template/	spec-compliant template (patterson-agents) — devcontainer templates apply -t ghcr.io/patterson-agents/design-system/patterson-agents:latest
dotfiles/	cc/oc/cop aliases, mpadd to register this checkout as a marketplace — Codespaces-dotfiles ready

Two repo-settings clicks after pushing: enable Codespaces prebuilds (Settings → Codespaces) and tick Template repository (Settings → General) so "Use this template → Open in a codespace" works.

Testing

A zero-dependency validation suite — POSIX sh + node one-liners, no package.json:

sh tests/run-tests.sh

What it checks

• .claude-plugin/marketplace.json parses and every plugins[].source path exists and starts with ./
• every plugin's .claude-plugin/plugin.json parses and has a non-empty name and version
• no text-transform: uppercase anywhere in plugins/**.css (sentence case is mandatory — see the brand rules below)
• a short forbidden-string denylist is absent from the tree outside prose docs
• the .pat-docs component class is defined in the shared CSS layer

Maintenance

This marketplace is generated from the design-system project. When tokens, assets, or a template change at the source:

1. Re-copy the affected files into every plugin's ds/ snapshot (they are plain copies — same paths).
2. Bump the plugin version in plugins/<name>/.claude-plugin/plugin.json and in .claude-plugin/marketplace.json.
3. Validate:

claude plugin validate .
sh tests/run-tests.sh

Rules that keep it working: only plugin.json lives inside .claude-plugin/; never flatten or move files inside ds/; keep ds/tokens/, ds/styles.css and ds/components/ byte-identical across all eight plugins that carry them.

Warning

ds/ snapshots are intentionally duplicated across the plugins that carry them so each plugin stays self-contained. A shared file changes once, then gets re-copied into every plugin that references it — there is no symlinked source.

Decisions

Architecture Decision Records live in docs/decisions/:

ADR	Status	Decision
0004	Proposed	Whether patterson-docs and patterson-file-manager keep loading React/Babel from unpkg.com, vendor it locally, or lose the application behavior that makes them worth having

Brand & licensing

Patterson logos and brand imagery are proprietary; Proxima Nova is licensed from Adobe Fonts (kit uth1qfm) and is never bundled — Adobe's Terms of Use bar re-hosting Typekit payloads. Distribute this marketplace privately (internal git host or private GitHub repo).

Caution

No emoji in any brand surface — this is a B2B healthcare distribution brand. This rule applies to plugin output (decks, pages, docs sites) as well as to this README; badges and GFM alerts are fine, emoji characters are not.