stoodiohq/figma-diagram-design
skills/figma-diagram-design/SKILL.md
Apply professional color theming to Figma diagrams (flowcharts, decision trees, sequence diagrams, state diagrams, gantt charts). Use this skill whenever creating diagrams with the Figma:generate_diagram tool. Automatically assigns distinct colors to top-level branches, with child nodes inheriting their parent branch's color family for clear visual hierarchy.
tools
Updated Apr 15, 2026
$ install --global
skillsauthnpx skillsauth add stoodiohq/agent-skills figma-diagram-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 8:45 PM1.8s1 file scanned
SKILL.md
- name:
- figma-diagram-design
- version:
- 1.1.0
- description:
- Apply professional color theming to Figma diagrams (flowcharts, decision trees, sequence diagrams, state diagrams, gantt charts). Use this skill whenever creating diagrams with the Figma:generate_diagram tool. Automatically assigns distinct colors to top-level branches, with child nodes inheriting their parent branch's color family for clear visual hierarchy.
Figma Diagram Design
Apply hierarchy-based color theming to diagrams. Each top-level branch gets a distinct color; all descendants inherit that color, creating instant visual grouping.
Color Application Rules
- Identify top-level branches — nodes directly connected to the root/start
- Assign distinct colors — one color per top-level branch from the palette
- Inherit downward — all child nodes match their ancestor's branch color
- Root stays neutral — use the neutral color for entry points and shared nodes
Mermaid Styling Syntax
Define classes and apply them to nodes:
flowchart LR
classDef branch1 fill:#E8F4FD,stroke:#1E88E5,color:#1565C0
classDef branch2 fill:#F3E5F5,stroke:#8E24AA,color:#6A1B9A
classDef branch3 fill:#E8F5E9,stroke:#43A047,color:#2E7D32
classDef neutral fill:#F5F5F5,stroke:#757575,color:#424242
Start["Start"]:::neutral
A["Branch A"]:::branch1
A1["A Child"]:::branch1
B["Branch B"]:::branch2
B1["B Child"]:::branch2
Start --> A --> A1
Start --> B --> B1
Curated Palettes
Modern Professional (Default)
| Branch | Fill | Stroke | Text | |--------|------|--------|------| | 1 - Blue | #E8F4FD | #1E88E5 | #1565C0 | | 2 - Purple | #F3E5F5 | #8E24AA | #6A1B9A | | 3 - Green | #E8F5E9 | #43A047 | #2E7D32 | | 4 - Orange | #FFF3E0 | #FB8C00 | #E65100 | | 5 - Teal | #E0F2F1 | #00897B | #00695C | | 6 - Red | #FFEBEE | #E53935 | #C62828 | | Neutral | #F5F5F5 | #757575 | #424242 |
Soft Pastel
| Branch | Fill | Stroke | Text | |--------|------|--------|------| | 1 - Rose | #FCE4EC | #F06292 | #C2185B | | 2 - Sky | #E1F5FE | #4FC3F7 | #0277BD | | 3 - Mint | #E0F7FA | #4DD0E1 | #00838F | | 4 - Peach | #FFF8E1 | #FFD54F | #F57F17 | | 5 - Lavender | #EDE7F6 | #B39DDB | #5E35B1 | | 6 - Sage | #F1F8E9 | #AED581 | #558B2F | | Neutral | #FAFAFA | #BDBDBD | #616161 |
Bold Vibrant
| Branch | Fill | Stroke | Text | |--------|------|--------|------| | 1 - Electric Blue | #BBDEFB | #2196F3 | #0D47A1 | | 2 - Hot Pink | #F8BBD9 | #E91E63 | #880E4F | | 3 - Lime | #DCEDC8 | #8BC34A | #33691E | | 4 - Amber | #FFECB3 | #FFC107 | #FF6F00 | | 5 - Deep Purple | #D1C4E9 | #673AB7 | #311B92 | | 6 - Cyan | #B2EBF2 | #00BCD4 | #006064 | | Neutral | #ECEFF1 | #607D8B | #37474F |
Workflow
- Parse the diagram structure to identify hierarchy
- Count top-level branches and select palette
- Generate classDef statements for each branch + neutral
- Apply classes to all nodes based on their branch ancestry
- Ensure root/shared nodes use neutral styling
Presenting Diagram URLs
Terminal display can corrupt long Figma URLs when copied. Follow these rules:
URL Presentation Rules
- Provide the diagram ID separately — on its own line
- Use short URL form — omit
https://to reduce length - Never use markdown links —
[text](url)can cause double-prefix issues - Avoid query parameters — they add unnecessary length
Recommended Format
**Diagram ID:** b201b3c8-b2ab-4ed9-a3bc-7e09703db246
**Access your diagram at:**
figma.com/online-whiteboard/create-diagram/ + the ID above
If User Reports 404 Error
- Check for
%0Aor%20in their URL (indicates line break corruption) - Provide the diagram ID separately
- Have them manually construct the short URL
Notes
- For diagrams with >6 branches, cycle through the palette or select a subset
- Gantt charts: color by task group/section rather than hierarchy
- Sequence diagrams: color by participant/actor
- State diagrams: color by state category or region
Related Skills
openclaw/taskflow
tools
VerifiedTrustedCommunity
Use when work should span one or more detached tasks but still behave like one job with a single owner context. TaskFlow is the durable flow substrate under authoring layers like Lobster, ACPX, plugins, or plain code. Keep conditional logic in the caller; use TaskFlow for flow identity, child-task linkage, waiting state, revision-checked mutations, and user-facing emergence.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/extensions/lobster
tools
VerifiedTrustedCommunity
# Lobster Lobster executes multi-step workflows with approval checkpoints. Use it when: - User wants a repeatable automation (triage, monitor, sync) - Actions need human approval before executing (send, post, delete) - Multiple tool calls should run as one deterministic operation ## When to use Lobster | User intent | Use Lobster? | | ------------------------------------------------------ | --------------------------
357,764SKILL.mdUpdated Apr 10, 2026
steipete/extensions/lobster
tools
VerifiedTrustedCommunity
# Lobster Lobster executes multi-step workflows with approval checkpoints. Use it when: - User wants a repeatable automation (triage, monitor, sync) - Actions need human approval before executing (send, post, delete) - Multiple tool calls should run as one deterministic operation ## When to use Lobster | User intent | Use Lobster? | | ------------------------------------------------------ | --------------------------
357,588SKILL.mdUpdated Apr 13, 2026
steipete/xurl
tools
VerifiedTrustedCommunity
A CLI tool for making authenticated requests to the X (Twitter) API. Use this skill when you need to post tweets, reply, quote, search, read posts, manage followers, send DMs, upload media, or interact with any X API v2 endpoint.
356,423SKILL.mdUpdated Apr 13, 2026