Skip to content

feat: add bitwarden-designer and bitwarden-design-tools plugins#125

Draft
withinfocus wants to merge 6 commits into
mainfrom
feat/bitwarden-designer-plugin
Draft

feat: add bitwarden-designer and bitwarden-design-tools plugins#125
withinfocus wants to merge 6 commits into
mainfrom
feat/bitwarden-designer-plugin

Conversation

@withinfocus
Copy link
Copy Markdown
Contributor

@withinfocus withinfocus commented May 22, 2026

🎟️ Tracking

No Jira ticket — this work is from me working directly with the design team to package their published practices into Claude Code plugins. The two seed skills came from the designer-agent-skills branch on bitwarden/clients (one commit ahead of main, authored by Sukhleen). The rest is grounded in the Product and Design Confluence space and the canonical Bitwarden brand sources at bitwarden.com/brand and github.com/bitwarden/brand.

📔 Objective

Adds two new v0.1.0 plugins to the marketplace, split per design-team feedback into a persona half and a toolkit half:

bitwarden-designer (persona)

The Bitwarden product designer agent. Holds the design team's Code of Conduct and the 30/60/90 critique framework, and dispatches into the bitwarden-design-tools toolkit for everything else.

In-plugin skills (judgment-heavy, exercised in the room):

  • design-review — Code of Conduct + 30/60/90 critique framework. Ported verbatim from the designer-agent-skills branch.
  • facilitating-design-critique — running or participating in the weekly team critique or a one-off Product Design Review. Grounded in the Weekly Design Critique & Etiquette quick guide and the Product Design Review Guidelines.

bitwarden-design-tools (toolkit)

No agent — skills only, like bitwarden-delivery-tools. Composed by the bitwarden-designer persona and usable standalone.

  • content-style-guide — Bitwarden's product content style guide for GUI copy (voice, tone, AP-style-with-exceptions grammar, sentence case in UI, no ampersands, accessibility-first language). Lean SKILL.md with detail split into references/grammar-mechanics.md and references/accessibility-rules.md.
  • using-figma — read and inspect Figma designs via the Dev Mode MCP server. Per-job-to-be-done read-tool selection, with Code Connect and write tools documented in their own subsections.
  • applying-bitwarden-brandingnew skill. Bitwarden brand standards: logo usage, color palette (full HEX/HSL/SCSS reference), typography (Inter), iconography (the shield), capitalization rules ("B" is capitalized, "W" is never capitalized). Grounded in bitwarden.com/brand and github.com/bitwarden/brand. Includes references/color-palette.md (full palette with print CMYK) and references/brand-assets.md (asset inventory with repo-relative paths).
  • preparing-design-handoff — Confluence handoff page, Figma Ready-for-Dev state, and Jira transitions. Full template field reference in references/handoff-template.md.
  • evolving-design-system-components — propose new patterns or modify existing components per the published governance process. Figma branching, property ordering, documentation conventions in references/figma-conventions.md.
  • navigating-design-jira-process — design tasks nested under engineering epics, the 30/60/90 iteration cadence, status transitions across the design and engineering boards, the one-off engineering story flow.

Why the split

Feedback on the original single-plugin PR was that judgment-heavy persona skills should live separately from reusable toolkit skills. The split mirrors the established pattern with bitwarden-shepherd + bitwarden-delivery-tools and bitwarden-tech-lead + bitwarden-delivery-tools. The persona is thin without the toolkit — both ship together — but the toolkit is usable standalone by designers, design-adjacent engineers, and PMs running a handoff.

Validation

  • ./scripts/validate-plugin-structure.sh — ✅ both plugins
  • ./scripts/validate-marketplace.sh — ✅
  • npm run lint (prettier + cspell) — ✅
  • New domain terms added to .cspell.json across the original and split work: askable, bwi, CMYK, ESL, EXIF, FigJam, Figma, inclusivity, Solutioning, unassigning, unassigns, ungroup, userflow, Userflows

Packages the two designer-agent-skills branch skills from bitwarden/clients
(content-style-guide, design-review) into a v0.1.0 plugin, rounds them out
with a using-figma skill for the Dev Mode MCP server, and adds four
Confluence-grounded skills for design-team processes — critique facilitation,
handoff preparation, Design System governance, and the Product and Design
Jira workflow.
@withinfocus withinfocus added the ai-review Request a Claude code review label May 22, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 22, 2026

Plugin Validation Summary

PR #125 — bitwarden-design-tools & bitwarden-designer

Overall result: PASS. No critical or major errors block merge. A small set of minor/major recommendations are listed below for the authors' consideration.


1. Plugin Structure Validation (plugin-validator)

bitwarden-design-tools — PASS

  • plugin.json complete: name, version (0.1.0, valid semver), description, author, homepage, repository, keywords.
  • Version 0.1.0 matches .claude-plugin/marketplace.json (line 93) and CHANGELOG.md ([0.1.0] - 2026-05-22).
  • 6 skills present, all with valid YAML frontmatter (name, description, when_to_use, allowed-tools).
  • All references/ files declared in CHANGELOG.md exist on disk.
  • CHANGELOG.md follows Keep a Changelog format; README.md present and comprehensive.
  • No stray artifacts (.DS_Store, node_modules, .env*) and no hardcoded credentials.

No issues at any severity.

bitwarden-designer — PASS

  • plugin.json complete; version 0.1.0 matches marketplace entry (line 87), CHANGELOG.md, and AGENT.md.
  • Agent (agents/AGENT.md) frontmatter valid: name bitwarden-designer (lowercase-hyphen, 19 chars), four <example> blocks with <commentary>, model opus, color cyan, substantial system prompt.
  • 2 skills present, both with valid frontmatter including when_to_use and properly scoped allowed-tools.
  • README.md and CHANGELOG.md present and well-formed.
  • No hardcoded credentials.

Minor (1):

  • plugins/bitwarden-designer/.claude-plugin/plugin.json:18agents field points to a single file (./agents/AGENT.md). Auto-discovery convention is a directory (or omitting the field). Non-blocking; functions correctly. Remediation: optionally remove the agents line and rely on auto-discovery of ./agents/ for consistency with other plugins in the marketplace.

2. Skill Review (skill-reviewer)

bitwarden-design-tools skills

All six skills have valid frontmatter, healthy word counts (791–1,334), and progressive disclosure into references/. All referenced files exist.

Major (2):

  • plugins/bitwarden-design-tools/skills/evolving-design-system-components/SKILL.md — body references Figma MCP tools search_design_system and get_libraries from the using-figma skill, but allowed-tools does not include those Figma tools. Remediation: either add the required Figma tools to allowed-tools, or state explicitly in the body that Figma access must dispatch into using-figma via the Skill tool.
  • plugins/bitwarden-design-tools/skills/preparing-design-handoff/SKILL.md — same ambiguity: body references get_metadata, get_variable_defs, and search_design_system, but allowed-tools lists only Skill and Atlassian MCP tools. Remediation: same — either grant the Figma tools or make the dispatch-through-using-figma model explicit.

Minor (4):

  • applying-bitwarden-branding/SKILL.md — trigger phrases live in when_to_use rather than description. Consider folding 1–2 trigger phrases into description to strengthen discovery matching.
  • content-style-guide/SKILL.md — shortest skill (791 words); fine, but could clarify whether referenced sibling skills are bundled or external (it does this well for figma-to-angular but not for design-review).
  • using-figma/SKILL.md — claims a read-centric center of gravity but allowed-tools includes write tools. Consider splitting write tools into a sibling skill to keep read-only blast radius minimal. Not blocking.
  • Cross-cutting: align allowed-tools declarations across the two Figma-consuming skills above using a single explicit policy.

bitwarden-designer skills

Both skills pass; well-crafted with strong cross-skill disambiguation in when_to_use.

Minor (2):

  • plugins/bitwarden-designer/skills/design-review/SKILL.md — word count ~970, just under the 1,000-word target floor. Lines 14–16 contain an awkwardly broken sentence ("Critique the product, not the / designer..."). Remediation: reflow the line break; optionally add an examples/ directory with a sample 30%/60%/90% critique.
  • plugins/bitwarden-designer/skills/facilitating-design-critique/SKILL.md — no issues worth flagging.

3. Security Validation (reviewing-claude-config)

Result: PASS. No critical or major security issues.

  • No settings.json or settings.local.json files in scope.
  • No hardcoded credentials, API keys, tokens, passwords, or bearer tokens in any reviewed file.
  • All matches for security-sensitive keywords are false positives: the word "tokens" refers to Figma design tokens, and "Password Manager"/"Secrets Manager" are Bitwarden product names.
  • All SKILL.md files are appropriately sized (largest is 167 lines / ~1,334 words) — no oversized files.
  • All YAML frontmatter parses cleanly.
  • All referenced files in references/ directories exist on disk — no broken references.
  • No allowed-tools declarations grant overly broad access; Atlassian MCP tool grants are namespaced and scoped to the specific operations each skill needs.

Summary

Severity Count Plugin/Skill Must fix?
Critical 0
Major 2 evolving-design-system-components, preparing-design-handoff (allowed-tools ambiguity) Should fix
Minor 7 See above Optional

The PR is ready to merge. The two major findings are documentation/declaration ambiguities, not functional defects — recommend addressing them in this PR or a quick follow-up to keep allowed-tools honest about which Figma operations each skill performs directly versus by dispatching to using-figma.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 22, 2026

🤖 Bitwarden Claude Code Review

Overall Assessment: APPROVE

This is the fourth-pass review. Commit b2b26a8 adds when_to_use and allowed-tools frontmatter to all eight new skills across bitwarden-designer (2 skills) and bitwarden-design-tools (6 skills), restructures each description field to a single lean sentence with trigger phrases moved into when_to_use, and scopes allowed-tools per skill (Skill-only for self-contained skills; Confluence subset for facilitating-design-critique; full bitwarden-atlassian-tools surface for handoff/governance/Jira-workflow skills; full Figma Dev Mode MCP surface for using-figma). The pattern matches the established bitwarden-shepherd skill frontmatter convention verbatim, and the per-skill tool scoping aligns with each skill's actual content. No new findings.

Code Review Details

No new findings. The prior heading-drift thread remains resolved, and the fourth-pass frontmatter restructure is internally consistent with the canonical shepherd pattern. Version bumps are not required because both plugins are at their initial 0.1.0 release within this PR.

- Sync plugin.json description with marketplace.json (Figma phrase)
- Refactor content-style-guide for progressive disclosure: split into
  references/grammar-mechanics.md and references/accessibility-rules.md
- Replace checkmark/cross glyphs with Good:/Avoid: text markers
- Annotate external figma-to-angular references as (external — not bundled)
- using-figma: extract Code Connect and write tools out of the wide
  jobs-to-be-done table into named subsections; reframe the intro as
  read-primary with write capabilities noted but de-emphasized.
- content-style-guide: add (external, not bundled) qualifier to the
  figma-to-angular references in description and body for consistency.
- design-review: add Composing with other skills section noting
  content-style-guide composition at 60%/90% and using-figma when a
  Figma URL is in play.
- facilitating-design-critique: replace awkward \_\_ escape sequences
  with [blank] placeholders.
- navigating-design-jira-process: add meta-note explaining that the
  mixed Jira status casing throughout the skill mirrors the actual
  Jira labels and should be copied verbatim.
- preparing-design-handoff: remove 'move this to Ready for Dev' from
  triggers to resolve dispatch overlap with navigating-design-jira-process,
  which now owns that specific phrase.
…anding

Per feedback, separates judgment-heavy persona skills from reusable
toolkit skills:

bitwarden-designer (persona, has the agent):
- design-review (kept)
- facilitating-design-critique (kept)
- AGENT.md updated to dispatch cross-plugin into bitwarden-design-tools

bitwarden-design-tools (no agent, like bitwarden-delivery-tools):
- using-figma (moved from designer)
- content-style-guide (moved from designer)
- preparing-design-handoff (moved from designer)
- evolving-design-system-components (moved from designer)
- navigating-design-jira-process (moved from designer)
- applying-bitwarden-branding (NEW) — Bitwarden brand standards (logo,
  color palette, typography, capitalization), grounded in bitwarden.com/brand
  and github.com/bitwarden/brand. Includes full color-palette and brand-assets
  references.

Both plugins ship as v0.1.0. Marketplace and root README updated with the
new entry. .cspell.json picks up the CMYK term used in the palette
reference.
@withinfocus withinfocus changed the title feat: add bitwarden-designer plugin for design team workflows feat: add bitwarden-designer and bitwarden-design-tools plugins May 22, 2026
Comment thread plugins/bitwarden-designer/skills/design-review/SKILL.md Outdated
- Update 'Composing with other skills in this plugin' to 'Composing with
  other skills' across 6 SKILL.md files; the post-split skill compositions
  span both plugins now, so 'in this plugin' became inaccurate.
- Rewrite content-style-guide description to lead with the canonical
  'This skill should be used when...' form per the skill-development
  guidance.
- Rewrite design-review description to lead with the canonical
  'This skill should be used when...' form and add a canonical-source
  note pointing at the designer-agent-skills branch where the Code of
  Conduct and 30/60/90 framework were authored.
- Trim using-figma description, dropping the long boundary explanation
  (the SKILL.md body covers it; the description now stays under ~600
  chars and leads with triggers).
- Align design-tools marketplace.json description with plugin.json by
  adding 'reference' to 'Content style guide reference'.

Skipped: removing the 'skills:' frontmatter block and the 'agents' field
in plugin.json — both flagged as non-standard, but all 5 agent-bearing
plugins in this marketplace use 'skills:' frontmatter and all 7 use the
'agents' field. They're the established Bitwarden convention.
Match the bitwarden-shepherd frontmatter pattern across all 8 skills in
this PR. Each skill now has:

- A tight one-sentence description (no trigger phrases).
- when_to_use with 'Use when [context]. Triggers — "phrase", "phrase".
  Not for [adjacent thing] (use `other-skill`).' format.
- allowed-tools scoped to what the skill actually needs.

Tool scoping:

- design-review, content-style-guide, applying-bitwarden-branding:
  Skill only — self-contained, compose other skills.
- facilitating-design-critique: Skill + the four Confluence MCP tools
  needed to fetch the Weekly Critique & Etiquette and Product Design
  Review Guidelines pages.
- preparing-design-handoff, evolving-design-system-components,
  navigating-design-jira-process: Skill + the full bitwarden-atlassian-tools
  MCP surface (Jira + Confluence), matching shepherd skills that fetch
  Confluence-canonical content and may reference Jira tickets.
- using-figma: Skill + the full Figma Dev Mode MCP tool surface
  (get_design_context, get_metadata, get_screenshot, get_variable_defs,
  get_libraries, search_design_system, get_figjam, whoami, the five
  Code Connect tools, and the five write tools).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ai-review Request a Claude code review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant