CtrlK
BlogDocsLog inGet started
Tessl Logo

generative-ui

Design system and guidelines for Claude's built-in generative UI — the show_widget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. This skill provides the complete Anthropic "Imagine" design system so Claude produces high-quality widgets without needing to call read_me first. Use this skill whenever the user asks to visualize data, create an interactive chart, build a dashboard, render a diagram, draw a flowchart, show a mockup, create an interactive explainer, or produce any visual content beyond plain text or markdown. Triggers include: "show me", "visualize", "draw", "chart", "dashboard", "diagram", "flowchart", "widget", "interactive", "mockup", "illustrate", "explain how X works" (with visual), or any request for visual/interactive output. Also triggers when the user wants to display financial data visually, create comparison grids, or build tools with sliders, toggles, or live-updating displays.

75

Quality

93%

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

86%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 content is highly actionable with complete, executable templates and a well-structured progressive-disclosure layout backed by real reference files. The main lever is trimming the verbatim inline templates to improve token efficiency.

Suggestions

Move the full Chart.js and SVG template blocks into the corresponding reference files and keep only a minimal skeleton plus a pointer in SKILL.md to reduce inline token weight.

Add one explicit validation checkpoint (e.g. 'verify the widget renders without CSP/console errors before responding') to Step 3 or Step 7 to strengthen workflow feedback loops.

Add a short 'Common pitfalls' bullet (e.g. canvas cannot read CSS variables, fill defaults to black) at the top rather than buried in per-template rule lists, so the highest-impact gotchas surface first.

DimensionReasoningScore

Conciseness

The body is efficient and assumes Claude's competence (no basic-concept padding), but embeds two sizeable full template blocks verbatim; minor trimming or pulling one into a reference would tighten it to a 5.

4 / 5

Actionability

Provides fully executable, copy-paste-ready templates (Chart.js with onload pattern, SVG with pre-built classes, interactive explainer) plus concrete rules tables and CSS-variable lists, matching the fully-executable anchor.

5 / 5

Workflow Clarity

A clear 7-step sequenced process runs from picking the visual type through rendering and responding to the user; it is not a destructive/batch skill so the validation cap does not apply, but explicit checkpoints/error-handling notes are minor, keeping it just below 5.

4 / 5

Progressive Disclosure

The body is an overview with clearly signaled, one-level-deep references to three real bundle files (design_system.md, svg_and_diagrams.md, chart_js.md), each annotated with its scope — matching the well-organized one-level-deep anchor.

5 / 5

Total

18

/

20

Passed

Description

100%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 comprehensive and concrete, explicitly stating both the capability and a rich set of natural-language trigger phrases. It occupies a clear niche with low conflict risk. No improvements needed.

DimensionReasoningScore

Specificity

Lists multiple concrete, specific actions — 'visualize data, create an interactive chart, build a dashboard, render a diagram, draw a flowchart, show a mockup, create an interactive explainer' — giving comprehensive coverage, matching the score-5 anchor.

5 / 5

Completeness

Clearly answers 'what' (design system/guidelines for the show_widget tool) and 'when' ('Use this skill whenever the user asks to visualize data...') with concrete trigger phrases, matching the explicit-what-and-when anchor.

5 / 5

Trigger Term Quality

Explicit trigger list uses natural user phrasings — 'show me', 'visualize', 'draw', 'chart', 'dashboard', 'diagram', 'flowchart', 'widget', 'interactive', 'mockup', 'illustrate' — covering synonyms and variations users would actually say.

5 / 5

Distinctiveness Conflict Risk

Targets a specific niche (claude.ai show_widget generative UI) with distinct, visual-output-only triggers, giving minimal overlap risk with other skills.

5 / 5

Total

20

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
himself65/finance-skills
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.