mcpbeat Sign in

Content Style Guide Agent Skill

Bitwarden's product content style guide for end-user-facing GUI copy — voice, tone, AP-style-with-exceptions grammar, sentence case in UI, and accessibility-first language at a U.S. 7th-grade reading level.

3k tokens
context cost
the whole folder, loaded on every use
3
files
instructions only
0
copies elsewhere
how many repositories repackaged it
129
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/bitwarden/ai-plugins --skill content-style-guide

What comes with it

7 223 bytes besides the instruction
references/accessibility-rules.md
references/grammar-mechanics.md

The instruction itself

6 sections, as written by the author

Product Content Style Guide

This skill grounds GUI copy decisions in Bitwarden's product content style guide. Apply it to

end-user-facing strings only — button labels, error messages, toasts, modals, onboarding flows,

empty states, form labels, helper text, link text, and similar. Do not apply to design tokens,

code comments, internal/dev-facing strings, or marketing copy.

When in doubt about a specific case, ask before changing copy.

Voice and tone

Voice is constant. Tone flexes with context.

Product voice is approachable, encouraging, and transparent — consistent across platforms.

Tone conveys mood and depends on who you're talking to and what's happening. Security is serious

stuff. Users aren't looking for humor or fluff — they want to know their information is safe. So

Bitwarden's product tone is almost always serious and respectful.

Tone spectrums:

  • Casual ↔ formal
  • Enthusiastic ↔ matter-of-fact

Where common content types land on the tone map (axes: casual ↔ formal × matter-of-fact ↔ enthusiastic):

| Content type | Casual / Formal | Matter-of-fact / Enthusiastic |

| ---------------- | ----------------- | ----------------------------- |

| Success messages | Casual | Enthusiastic |

| Onboarding copy | Casual | Enthusiastic |

| Dialogs | Casual | Matter-of-fact |

| Empty states | Casual | Matter-of-fact (slightly) |

| Labels | Neutral | Matter-of-fact |

| Community | Formal | Enthusiastic |

| Confirmations | Formal | Matter-of-fact |

| Help articles | Formal (slightly) | Neutral |

| Warnings | Formal | Matter-of-fact |

| Error states | Formal | Matter-of-fact |

Examples

Error message — formal, matter-of-fact:

  • Good: An error occurred. Please try again.
  • Avoid: Uh oh! We goofed. Go ahead and refresh!

Onboarding message — casual, enthusiastic:

  • Good: Hey there! 👋 Welcome to Bitwarden. We'll show you around!
  • Avoid: This is your vault. Get started now.

Applying this skill

During explicit copy critique ("review this copy", "is this error message ok"):

  • Identify the content type (error, onboarding, button, etc.) and the expected tone using the

tone map above.

  • Check voice consistency (approachable, encouraging, transparent).
  • Walk grammar and mechanics rules relevant to the snippet — see

references/grammar-mechanics.md.

  • Walk accessibility rules relevant to the snippet — see references/accessibility-rules.md.
  • Return specific, actionable rewrites — not just "this is wrong."

Inside figma-to-angular runs (external skill in the clients repo, not bundled here):

When the Figma design includes copy strings, validate them against this guide before emitting

them into the Angular template. If a string clearly violates a rule (e.g., title-case button,

ampersand, "Click here" link), surface the issue and propose a compliant alternative — do not

silently rewrite. Ask the user which to use.

Inside design-review critiques:

If the stage is 60% or 90%, include content observations alongside visual feedback (90% is the

right stage for "nitty-gritty grammar, finalizing copy"). Skip content nitpicks at 30% — the

copy will change. Frame content feedback the same way as visual feedback: tied to user/product

goals, not personal taste.

Output format for copy critique

  • Content type and expected tone — name what this string is and where it should land on

the tone spectrum.

  • What's working — what to keep.
  • Issues — each tied to a specific rule from this guide (cite the section name, including

the references file if the rule lives there).

  • Proposed rewrite(s) — concrete alternatives the user can pick from.

Keep critique specific. "The button uses title case; sentence case per

references/grammar-mechanics.md (Capitalization)" beats "the capitalization is off."

Additional resources

The detailed rules live in two references files. Load them when the critique needs them — most

copy issues touch only one or two rules.

  • references/grammar-mechanics.md — Acronyms, ampersands, capitalization (sentence case,

product names, features, lowercase objects), dates and months, days of the week, e.g. / i.e.,

ellipsis, file sizes and formats, money, numbers, Oxford comma, times and time zones, versus.

  • references/accessibility-rules.md — Reading level and directness, scannable layouts,

non-English and ESL considerations, spelling out acronyms, avoiding "easy" and "simple"

framings, text styling, spatial language, alt text, meaningful link text, gender-neutral

pronouns.

Other skills for the same job

different authors, same section of the catalogue
Legacy Circuit Mockups
by github
vendor ×1

Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize electronic component placements, draw breadboard diagrams, mockup 6502 builds, generate retro computer schematics, or design vintage electronics projects. Supports 555 timers, W65C02S microprocessors, 28C256 EEPROMs, W65C22 VIA chips, 7400-series logic gates, LEDs, resistors, capacitors, switches, buttons, crystals, and wires.

37k tokens
Hyperframes Keyframes
by aiskillstore
×1

> Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

17k tokens
Anydesign
by uxKero
×1

Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.

728k tokens scripts
Brandkit
by lornshrimp
×1

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

4k tokens
Imagegen Frontend Mobile
by lornshrimp
×1

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

10k tokens
Perf Web Optimization
by christophacham
×1

Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).

4k tokens
Brandkit
by nexu-io

| Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

4k tokens
Gsap Performance
by nexu-io

| Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.

1k tokens

How to use it

Copy the folder

Take bitwarden/content-style-guide from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.