soft-visualslisted
Generates soft, flat, pastel visuals — the Whimsical-style look — as self-contained inline SVG: flowcharts, architecture diagrams, wireframes (desktop and mobile), mindmaps, org charts, sequence diagrams, Gantt timelines, kanban boards, and user journey maps. Rounded cards with translucent hue fills, one even stroke weight, rounded elbow connectors, no shadows. Output is a single .html file with a built-in dark/light toggle, and every <svg> can be pasted straight into a workshop-slides deck. Use this skill whenever the user wants to draw, diagram, map, mock up, chart, or visualise something. Triggers on phrases like "draw a diagram", "diagram this", "make a flowchart", "chart this flow", "architecture diagram", "system diagram", "visualise this", "wireframe this", "mock up a screen", "UI mockup", "mindmap", "mind map this", "org chart", "team structure", "sequence diagram", "show the request flow", "timeline", "gantt chart", "roadmap view", "kanban board", "user journey map", "whimsical style diagram", "sketc
tammai/tammai-tools · ★ 0 · Web & Frontend · score 60
Install: claude install-skill tammai/tammai-tools
# Soft Visuals
Generates diagrams, wireframes, and board layouts as inline SVG in a soft, flat, pastel
style. Output is a single self-contained `.html` file the user opens in any browser —
dark/light toggle built in, no server, no image files.
## Nine visual types
| Type | Use for | Signature elements |
|---|---|---|
| **Flowchart** | Processes, decisions, CI pipelines | `pill` start/end, `card` steps, `diamond` decisions with labelled edges |
| **Architecture** | Systems, services, data flow | `group` boundaries, `cylinder` datastores, `cloud` third parties, `actor` users |
| **Wireframe** | Screen layouts, UI structure | Device frame, placeholder bars, one accent action |
| **Mindmap** | Hierarchies, brainstorms, topic breakdowns | Accent centre, hue-per-branch, curved stems, text-on-rule leaves |
| **Org chart** | Team structure, reporting lines, sitemaps | Rounded bus edges with **no arrowheads**, one hue per level |
| **Sequence diagram** | Request flows, protocols, service interactions | Participant headers, dashed lifelines, activation bars, mint dashed returns |
| **Timeline / Gantt** | Schedules, roadmaps, phased plans | Column time axis, bars sized in column units, `today` marker |
| **Kanban board** | Work state, sprint boards, pipelines | `--dg-surface` columns, neutral cards on `--brand-bg`, hue in the tags |
| **User journey map** | Experience across stages, research synthesis | Stage columns × lens rows, mood faces in the *Feeling* row |
If the request span