sairammahadevan

PM Toolkit - Excalidraw - "Messy Thoughts" to "Visual Spec" in 30 seconds.

Design & Mediav1.0.0
By sairammahadevanUpdated 2026-05-11thought-to-excalidraw@clawhub_sairammahadevan/thought-to-excalidraw
Image GenerationVisual Assets

According to AlphaMoat, as of 2026-09, PM Toolkit - Excalidraw - "Messy Thoughts" to "Visual Spec" in 30 seconds. has 4,939 downloads and 10 stars — ranked #1,872 of 5,078 AI skills overall, and #185 of 512 in Design & Media.

Installs
356
Downloads
4.9K
Stars
10
Overall Rank
#1,872
Top 37% overall · Top 37% in Design & Media
PlatformInstallsDownloadsStarsComments
ClawHub ↗1404.2K51
SkillHub ↗3564.9K10—

Platforms count differently and update at different times.

What this skill does

It extracts a title, problem and goals, requirements, implementation and user-journey steps into JSON, then lays out Why, What and How columns with a horizontal journey. Colors distinguish sections and text is bound to containers. Use a dedicated output folder, delete only the temporary input created for this diagram and review the result with product and engineering stakeholders before treating it as a specification.

Profile published 2026-10-27

What you can do with it

  • Structure product notes as an editable visual specification

When to use it

  • When product reasoning and a journey need a shared diagram

Example prompts

Generated from the skill’s documentation as examples; not results of actual runs.

Extract the stated problem, requirements, implementation and journey without adding assumptions, then prepare a diagram for stakeholder review.

Monthly Trend

Downloads4.9K
3.0K4.1K5.1K2026-03 · Downloads 3.2K2026-05 · Downloads 3.6K2026-06 · Downloads 3.7K2026-07 · Downloads 4.2K2026-08 · Downloads 4.4K2026-09 · Downloads 4.9K26-0326-09
Stars10
47102026-03 · Stars 42026-05 · Stars 92026-06 · Stars 52026-07 · Stars 102026-08 · Stars 102026-09 · Stars 1026-0326-09

The counting method changed in 2026-09: skills with the same name are now counted separately by author, and the full catalog is covered. Dashed lines show months before the change; they are not compared with later months, and no growth is computed across the change.

MonthDownloadsMoMStars
2026-094.9K—10
2026-084.4K+5.0%10
2026-074.2K+12.3%10
2026-063.7K+3.9%5
2026-053.6K—9
2026-033.2K—4

SKILL.md (original)

The author’s original file, shown as plain text without edits or review by AlphaMoat. Links are not clickable; check commands before running them. Fetched 2026-10-23.

2.7 KB · ClawHub v1.0.0
---
name: pm-visualizer
description: Visualizes Product Manager thoughts (Why, What, How, User Journey) into an editable Excalidraw diagram. Use when the user asks to "visualize specs", "create a PM diagram", or "map out product thoughts".
---

# PM Visualizer Skill

This skill converts unstructured Product Manager thoughts into a structured Excalidraw visualization.

## Features
Show all (62 lines)
- **Smart Layout**: Automatically columns "Why, What, How" and creates a horizontal flow for "User Journey".
- **Color Coding**: Visual distinction between problem (Why - Yellow), solution (What - Green), implementation (How - Blue), and flow (Journey - Red/Pink).
- **Grouped Elements**: Text is properly bound to containers so they move together.

## Workflow

1.  **Analyze Request**: Extract the following sections from the user's prompt or context:
    *   **Title**: The feature or product name.
    *   **Why**: The problem statement, business goals, or "Why are we building this?".
    *   **What**: The solution requirements, features, or "What is it?".
    *   **How**: Technical implementation details, API strategy, or "How will we build it?".
    *   **Journey**: A sequential list of steps for the user journey or process flow.

2.  **Prepare Data**: Create a JSON file (e.g., `temp_visual_data.json`) with this structure:
    ```json
    {
      "title": "Feature Name",
      "why": ["Reason 1", "Reason 2"],
      "what": ["Feature 1", "Feature 2"],
      "how": ["Tech 1", "Tech 2"],
      "journey": ["Step 1", "Step 2", "Step 3"]
    }
    ```

3.  **Generate Diagram**: Run the python script to generate the `.excalidraw` file.
    ```bash
    python3 skills/pm-visualizer/scripts/layout_diagram.py temp_visual_data.json ~/Downloads/Documents/PM_Visuals/Output_Name.excalidraw
    ```
    *Ensure the output directory exists first.*

4.  **Cleanup**: Delete the temporary JSON input file.

5.  **Report**: Inform the user the file is ready at the output path.

## Example

**User:** "Visualize a new 'Login with Google' feature. Why? Reduce friction. What? Google button on login page. How? OAuth2. Journey: User clicks button -> Google Popup -> Redirect to Dashboard."

**Codex Action:**
1.  Create `login_spec.json`:
    ```json
    {
      "title": "Login with Google",
      "why": ["Reduce friction", "Increase conversion"],
      "what": ["Google Sign-in Button", "Profile Sync"],
      "how": ["OAuth 2.0 Flow", "Google Identity SDK"],
      "journey": ["User clicks 'Sign in with Google'", "Google permissions popup appears", "User approves access", "System verifies token", "User redirected to Dashboard"]
    }
    ```
2.  `mkdir -p ~/Downloads/Documents/PM_Visuals`
3.  `python3 skills/pm-visualizer/scripts/layout_diagram.py login_spec.json ~/Downloads/Documents/PM_Visuals/Login_Spec.excalidraw`

Popular in Design & Media

Data month: 2026-09 · Downloads, stars and installs are aggregated monthly from public skill registries (ClawHub, SkillHub). See methodology.