By tjboudreaux
6 Visualization Skills for Claude Code - Mermaid diagrams, ASCII architecture, workflows, state machines, cheatsheets, and retro templates
npx claudepluginhub tjboudreaux/cc-visualization-skills --plugin visualization-skillsMermaid diagram syntax for flowcharts, sequence diagrams, ER diagrams, state machines, and other visualizations that render in GitHub/GitLab markdown.
Express product, service, or data architectures through layered ASCII diagrams suitable for terminals, PRs, and ADRs.
Build portable ASCII command panels summarizing CLI workflows (e.g., GitHub CLI, deployment scripts) for quick reference.
Facilitate retrospectives and experiment readouts using ASCII grids, timelines, and heatmaps for rapid comprehension.
Model user journeys, retention loops, or process states with ASCII state machines and storyboards.
Communicate multi-step workflows using consistent ASCII flowcharts and timelines that paste cleanly into PRs, issues, and chats.
6 Visualization Skills for Claude Code. Mermaid diagrams, ASCII architecture maps, workflow blueprints, state machines, CLI cheatsheets, and retrospective templates.
| Skill | Description |
|---|---|
tools-mermaid | Mermaid diagram syntax for flowcharts, sequence diagrams, ER diagrams, state machines, Gantt charts, and more |
tools-visual-ascii-arch | Layered ASCII architecture diagrams for terminals, PRs, and ADRs |
tools-visual-workflows | Multi-step workflow flowcharts and timelines |
tools-visual-state-machines | User journey and process state machine storyboards |
tools-visual-cheatsheets | Portable ASCII CLI command reference panels |
tools-visual-retro | Retrospective and experiment readout templates |
/plugin install tjboudreaux/cc-visualization-skills
Add to .factory/settings.json:
{
"enabledPlugins": {
"visualization-skills@cc-visualization-skills": true
}
}
> Create a Mermaid sequence diagram for this API flow
> Draw an ASCII architecture diagram of the system
> Build a CLI cheatsheet for our deployment commands
> Create a state machine for the user onboarding flow
MIT
Team-oriented workflow plugin with role agents, 27 specialist agents, ECC-inspired commands, layered rules, and hooks skeleton.
Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 15 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Nuxt, Jetpack Compose). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Tools to maintain and improve CLAUDE.md files - audit quality, capture session learnings, and keep project memory current.
Upstash Context7 MCP server for up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your LLM context.