feat: add bitwarden-designer and bitwarden-design-tools plugins#125
feat: add bitwarden-designer and bitwarden-design-tools plugins#125withinfocus wants to merge 6 commits into
Conversation
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.
Plugin Validation SummaryPR #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)
|
| 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.
🤖 Bitwarden Claude Code ReviewOverall Assessment: APPROVE This is the fourth-pass review. Commit Code Review DetailsNo 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 |
- 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.
- 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).
🎟️ 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-skillsbranch onbitwarden/clients(one commit ahead ofmain, 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-toolstoolkit 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 thedesigner-agent-skillsbranch.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 thebitwarden-designerpersona 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 intoreferences/grammar-mechanics.mdandreferences/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-branding— new 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. Includesreferences/color-palette.md(full palette with print CMYK) andreferences/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 inreferences/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 inreferences/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-toolsandbitwarden-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) — ✅.cspell.jsonacross the original and split work:askable,bwi,CMYK,ESL,EXIF,FigJam,Figma,inclusivity,Solutioning,unassigning,unassigns,ungroup,userflow,Userflows