skills.rest
JonnyCBB
JonnyCBBCOMMUNITY
Explore all skills by this author →
GitHub

diagram-standards

Standardize diagram design with WCAG 2.2 accessibility and colorblind-safe palettes.

1|Updated Dec 17, 2025
Search Tags:#accessibility#mermaid#visual-design#color-palette#colorblind-safe#legend#diagram-standards
One-click install
npx skills add https://github.com/JonnyCBB/claude-code-config --skill diagram-standards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-standards
Source: https://github.com/JonnyCBB/claude-code-config/tree/main/plugins/jbb-feature-dev/skills/diagram-standards
Command: npx skills add https://github.com/JonnyCBB/claude-code-config --skill diagram-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagram design across teams often lacks consistency and accessibility, making diagrams hard to read and reuse.

Core Features & Use Cases

  • Pattern Categories: Defines diagram types, color semantics, and accessibility patterns for consistency across docs.
  • Tool & Palette Guidance: Recommends tools (Mermaid, PlantUML) and color palettes aligned with WCAG 2.2.
  • Legend & Accessibility Rules: Provides legend templates and contrast guidance to ensure readability.
  • Quick Collaboration: Serves as a reference for designers, engineers, and writers to align on standards.

Quick Start

Create a project-specific diagram using the provided color palette and legend rules.

Frequently Asked Questions about diagram-standards

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create accessible diagrams that meet WCAG 2.2 standards?▼

Accessible diagrams meeting WCAG 2.2 standards require specific color contrast, clear legends, and colorblind-safe alternatives. This skill standardizes diagram design by enforcing these accessibility patterns and providing structured metadata to ensure consistent readability across technical documentation.

What is the best way to standardize diagram color palettes for technical documentation?▼

Standardizing diagram color palettes involves defining color semantics and applying WCAG 2.2-aligned palettes across use cases. This skill provides tool recommendations and palette guidance to ensure your technical diagrams maintain consistent and accessible visual design.

How do I add legend requirements to Mermaid diagrams for better readability?▼

Adding legend requirements to Mermaid diagrams involves applying structured legend templates and contrast guidance. This skill provides these rules to ensure your diagrams remain readable and accessible for all users across technical documentation.

Does this approach work for generating colorblind-safe alternatives in technical docs?▼

Generating colorblind-safe alternatives in technical docs requires enforcing specific color semantics and contrast rules. This skill provides accessibility patterns and colorblind-safe alternatives to ensure your diagrams are readable by users with visual impairments.

Can I use PlantUML with these diagram accessibility patterns?▼

PlantUML is recommended alongside Mermaid for applying these diagram accessibility patterns. The skill aligns tool guidance with WCAG 2.2 color palettes and legend templates, ensuring your PlantUML diagrams meet consistent accessibility standards.

Related Skills

Explore More Design & Creative Skills→
ivfariasivfarias
22

analyze-project-context

Detect project type, map structure, and generate AGENTS.md and constitution.md.

Community
Advanced
VictorSmaniottoVictorSmaniotto

diagram-generator

Generate Mermaid and PlantUML definitions for data models, workflows, and system architecture.

Community
Advanced
JetBrainsJetBrains
302

brand-guidelines

Apply Anthropic brand colors and typography to documents via frontmatter-driven rules.

Official
Basic
oborchersoborchers
28

accessibility-inclusive-design

Guide WCAG 2.2 AA compliance with color contrast and keyboard operability checks.

Community
Intermediate