CtrlK
BlogDocsLog inGet started
Tessl Logo

project-infographic

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

1.57x
Quality

54%

Does it follow best practices?

Impact

99%

1.57x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.github/skills/project-infographic/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

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'.

DimensionReasoningScore

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.

DimensionReasoningScore

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.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
0xrabbidfly/eric-cartman
Reviewed

Table of Contents

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.