create-workflow-diagram

Create FigJam/Miro-style workflow diagrams as high-quality PNG images from plain-text workflow descriptions. Renders beautiful HTML diagrams with connected nodes, arrows, and labels, then screenshots them for sharing.

Quality

55%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/design/capabilities/create-workflow-diagram/SKILL.md

Quality

Content

48%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The skill is highly actionable with concrete HTML/CSS and Playwright commands, but it is verbose and inlines a full template plus style details that should be split into referenced files. Missing validation checkpoints for the screenshot export and absent bundle files further lower the score.

Suggestions

Move the full HTML/CSS template and style presets into separate referenced files (e.g., templates/diagram.html, STYLE_PRESETS.md) and keep SKILL.md a lean overview.

Add a validation checkpoint in Phase 4 confirming the PNG exists, dimensions match the spec, and file size is under 5MB before delivering to the user.

Provide the referenced screenshot-diagram.js and STYLE_PRESETS.md as actual bundle files so the references resolve.

Dimension	Reasoning	Score
Conciseness	The 600+ line body inlines a full HTML/CSS template, layout algorithms, arrow-drawing JS, icon tables, and node-sizing tables that largely restate what Claude already knows about HTML/CSS positioning, making it noticeably padded.	2 / 5
Actionability	Provides executable HTML/CSS snippets, concrete layout formulas, a Playwright screenshot command, and npm install steps, with only minor gaps (e.g., the referenced screenshot-diagram.js is not provided as a bundle file).	4 / 5
Workflow Clarity	The phases are sequenced, but Phase 4's screenshot step lacks validation/verification of the generated PNG (e.g., confirming file exists, size under 5MB, dimensions correct), and no error-recovery feedback loop is defined.	3 / 5
Progressive Disclosure	Large blocks that belong in separate files (full HTML template, complete style presets) are inlined in SKILL.md, and references to STYLE_PRESETS.md and screenshot-diagram.js are not provided as actual bundle files, leaving structure minimal.	2 / 5
	Total	11 / 20 Passed

Description

61%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is specific and distinctive about producing styled workflow diagrams as PNGs, but it omits an explicit 'when to use' trigger clause, which limits its completeness. Tightening the trigger guidance and adding common synonyms would raise it.

Suggestions

Add an explicit 'Use when...' clause stating the trigger conditions (e.g., 'Use when the user wants a workflow or process diagram from a plain-text description').

Include common synonyms users would say, such as 'flowchart' or 'process diagram', to improve trigger term coverage.

Name concrete output deliverables more precisely (e.g., 'PNG file saved to exports/') rather than 'screenshots them for sharing'.

Dimension	Reasoning	Score
Specificity	Lists several concrete actions (renders HTML diagrams, connected nodes, arrows, labels, screenshots) with output format, though 'screenshots them for sharing' is slightly generic.	4 / 5
Completeness	It clearly states 'what' the skill does, but there is no explicit 'Use when...' clause or equivalent trigger guidance describing when Claude should invoke it, which caps completeness at 3 per the rubric.	3 / 5
Trigger Term Quality	Natural terms like 'workflow diagrams', 'PNG images', 'plain-text workflow descriptions' are present, but it lacks synonyms users might say ('flowchart', 'process diagram') and explicit trigger phrases.	4 / 5
Distinctiveness Conflict Risk	The FigJam/Miro-style workflow-to-PNG niche is fairly distinct with specific trigger terms, with only minor overlap risk against general diagram or HTML generation skills.	4 / 5
	Total	15 / 20 Passed

Validation

93%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (619 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: gooseworks-ai/goose-skills
Path: skills/design/capabilities/create-workflow-diagram/SKILL.md
Commit: 2523432

Reviewed: 7 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.