CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

generative-ui

Design system and templates for interactive HTML/SVG visuals in Claude and Codex, using an available inline renderer or a standalone HTML file. Use this skill whenever the user wants visual or interactive output rather than plain text or markdown: charts and dashboards, diagrams, flowcharts and architecture drawings, mockups, comparison grids, illustrations, interactive explainers ("explain how X works" with a visual), or tools with sliders, toggles, and live-updating displays — including financial data shown visually and requests phrased as "show me", "visualize", "draw", or "chart this".

70

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

82%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.

A highly actionable, well-structured skill body: complete executable templates, an exact tool schema, and clearly sequenced steps with most checkpoints present. The main gaps are minor — some provenance/philosophy prose to trim and content duplicated between the body and the reference files.

Suggestions

Cut the provenance sentences ("Extracted from Claude's actual visualize:read_me guidelines" / "without needing the read_me setup call") — they add no instruction for the reader.

Deduplicate the Chart.js setup and SVG viewBox rules between the body and references: keep one minimal working example in SKILL.md and move the repeated detail (load-order fallback, viewBox checklist) wholly into the reference files.

Add an explicit validation step after rendering (e.g. confirm the widget renders without console errors / re-check the dark-mode mental test) to close the workflow loop on the primary show_widget path.

DimensionReasoningScore

Conciseness

The body is dense with host-specific rules and templates, but contains trimmable non-instructional prose such as the provenance explanation "the actual Anthropic 'Imagine — Visual Creation Suite' design rules, extracted so you can produce high-quality widgets directly without needing the read_me setup call" and soft philosophy copy like "Seamless: Users shouldn't notice where the host UI ends and your widget begins".

4 / 5

Actionability

Fully executable guidance throughout: complete copy-paste Chart.js and SVG templates, exact show_widget JSON with a parameter table, an explicit CDN allowlist, enumerated CSS variables, and per-format rules ("viewBox 0 0 680 H", "height ONLY on the wrapper div").

5 / 5

Workflow Clarity

Steps 1–7 are clearly sequenced with useful checkpoints (host-tool detection with "do not invent a show_widget call", dark-mode mental test, `if (window.Chart) initChart();` fallback, "Verify the saved output in a browser when available"), but the primary show_widget render path lacks an explicit post-render validation loop.

4 / 5

Progressive Disclosure

Three real one-level-deep reference files, each with a one-line purpose and a clear "Read the relevant reference file when you need…" pointer, but there is notable duplication between the body and the references — the Chart.js setup pattern appears in Step 4 and again in chart_js.md, and the viewBox/safe-area rules appear in Step 5 and again in svg_and_diagrams.md.

4 / 5

Total

17

/

20

Passed

Description

87%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.

A strong description with explicit what/when structure and excellent natural trigger phrases. Its main weakness is distinctiveness: the broad visual catch-all (charts, dashboards, "visualize") would compete with a dedicated charting or dataviz skill for the same requests.

Suggestions

Narrow the chart/dashboard trigger claim (e.g. "interactive HTML chart widgets rendered inline") so a dedicated dataviz skill still wins plain chart requests.

Drop "including financial data shown visually" — it is covered by the existing chart/dashboard examples and adds an over-broad trigger without new information.

DimensionReasoningScore

Specificity

The description enumerates many concrete artifact types ("charts and dashboards, diagrams, flowcharts and architecture drawings, mockups, comparison grids, illustrations, interactive explainers"), giving broad concrete coverage, but the lead action "design system and templates" is more abstract than the multiple concrete verbs of a top score.

4 / 5

Completeness

Explicitly answers both what ("Design system and templates for interactive HTML/SVG visuals in Claude and Codex, using an available inline renderer or a standalone HTML file") and when ("Use this skill whenever the user wants visual or interactive output rather than plain text or markdown") with concrete trigger phrases.

5 / 5

Trigger Term Quality

Includes natural user phrasings with synonyms: "show me", "visualize", "draw", "chart this", "explain how X works", plus "tools with sliders, toggles, and live-updating displays" — comprehensive coverage of natural trigger terms.

5 / 5

Distinctiveness Conflict Risk

The catch-all framing "visual or interactive output rather than plain text" plus triggers like "charts and dashboards", "visualize", and "chart this" create real overlap risk with any dedicated charting/dataviz skill, though the inline-widget/Claude-Codex niche is more specific than a generic skill.

3 / 5

Total

17

/

20

Passed

Validation

100%

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

himself65/finance-skills

Path

plugins/ui-tools/skills/generative-ui/SKILL.md

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.