Generate a visually beautiful HTML infographic showing high-level project overview for sprint demos. Use when preparing presentations, stakeholder updates, or visual project summaries.
70
54%
Does it follow best practices?
Impact
99%
1.57xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.github/skills/project-infographic/SKILL.mdQuality
Discovery
67%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 functional and covers both what and when clearly, which is its strongest aspect. However, it lacks specificity about what the infographic actually contains and could benefit from more natural trigger terms that users would use. The scope of 'presentations' and 'stakeholder updates' is somewhat broad and could cause conflicts with other skills.
Suggestions
Add specific concrete actions describing what the infographic includes, e.g., 'showing task completion rates, sprint velocity, team contributions, and milestone timelines'.
Expand trigger terms with common variations users might say, such as 'dashboard', 'sprint review', 'project status report', 'demo deck', or 'visual summary'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | It names the domain (HTML infographic for project overview) and one specific action (generate), but doesn't list multiple concrete actions like what the infographic contains (e.g., timeline, metrics, task breakdown, burndown charts). | 2 / 3 |
Completeness | Clearly answers both 'what' (generate a visually beautiful HTML infographic showing high-level project overview for sprint demos) and 'when' (use when preparing presentations, stakeholder updates, or visual project summaries) with explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes some relevant keywords like 'infographic', 'sprint demos', 'presentations', 'stakeholder updates', and 'project summaries', but misses common variations users might say such as 'dashboard', 'project status', 'sprint review', 'demo prep', or 'visual report'. | 2 / 3 |
Distinctiveness Conflict Risk | The combination of 'HTML infographic' and 'sprint demos' is fairly specific, but 'presentations' and 'stakeholder updates' are broad enough to potentially overlap with general presentation skills or other HTML generation skills. | 2 / 3 |
Total | 9 / 12 Passed |
Implementation
42%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill provides excellent actionability with concrete code examples, specific scan targets, and clear output structure, but is severely undermined by its verbosity. The extensive CSS and HTML boilerplate examples teach Claude things it already knows (how to write CSS hover effects, flexbox layouts, gradient backgrounds). The content would benefit greatly from splitting the detailed CSS/HTML patterns into a separate reference file and adding validation steps for the scan-and-generate workflow.
Suggestions
Move the detailed CSS design tokens, architecture CSS patterns, and example HTML structure into a separate reference file (e.g., INFOGRAPHIC_PATTERNS.md) and link to it from the main skill — this would cut the skill by ~60%.
Remove explanations of CSS concepts Claude already knows (hover effects, responsive breakpoints, flexbox/grid) and instead just specify the desired visual outcome (e.g., 'dark gradient hero, card-based layout, interactive hover states').
Add validation steps: verify that key source files exist before scanning, confirm extracted information with the user before generating, and suggest the user open the HTML to verify rendering.
Add a fallback workflow for when expected files (README.md, spec.md, tasks.md) are missing — e.g., ask the user for project details or scan alternative locations.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~250+ lines. It over-explains visual design concepts (CSS design tokens, hover effects, responsive patterns) that Claude already knows well. The massive CSS and HTML example blocks for the architecture diagram could be condensed to a brief description of the desired style, since Claude can generate polished CSS/HTML without being shown boilerplate patterns. | 1 / 3 |
Actionability | The skill provides highly concrete, executable guidance: specific file paths to scan, exact CSS code patterns, complete HTML structure examples, specific section requirements with clear content expectations, and explicit output file locations. Everything is copy-paste ready and leaves little ambiguity about what to produce. | 3 / 3 |
Workflow Clarity | The scan process (steps 1-4) is clearly sequenced, and the output sections are well-defined. However, there are no validation checkpoints — no step to verify the generated HTML renders correctly, no check that scanned information is accurate before generating, and no feedback loop for when expected files (README.md, spec.md, tasks.md) don't exist. | 2 / 3 |
Progressive Disclosure | This is a monolithic wall of content with no references to external files. The extensive CSS examples and HTML architecture patterns (~100+ lines) should be split into separate reference files. The skill tries to be both an overview and a complete reference in one document, making it hard to scan quickly. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
1e34e1c
Table of Contents
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.