mshadmanrahman

Generate Visual Plan — Design skill for Claude Code

Design community

Generate a visual HTML implementation plan — detailed feature specification with state machines, code snippets, and edge cases.

How to install Generate Visual Plan

Installs to ~/.claude/commands/mshadmanrahman-pm-operating-system-generate-visual-plan.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/mshadmanrahman/pm-operating-system/HEAD/.claude/commands/generate-visual-plan.md -o ~/.claude/commands/mshadmanrahman-pm-operating-system-generate-visual-plan.md

Restart Claude Code, or start a new session, for it to be picked up.

What Generate Visual Plan does

description: Generate a visual HTML implementation plan — detailed feature specification with state machines, code snippets, and edge cases

Load the visual-explainer skill, then generate a comprehensive visual implementation plan for `$@` as a self-contained HTML page.

Follow the visual-explainer skill workflow. Read the reference template, CSS patterns, and mermaid theming references before generating. Use an editorial or blueprint aesthetic, but vary fonts and palette from previous di

Alternatives in Design

Add Oas Support — Add support for a new OpenAPI Specification version to Swagger UI 29k ★
Plannotator — Interactive plan review UI for Claude Code with visual annotation, offline sharing, and Obsidian/Bear integrat 3.3k ★
Mockup — Create a visual UX mockup for a requested feature or screen 1.6k ★