contact-widget

Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./design-templates/contact-widget/SKILL.md

Quality

Content

75%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 well-structured, concrete, generation-oriented skill body: precise design tokens, a complete input contract, and an unambiguous workflow with strong default-behavior guardrails. Its weaknesses are mild — repeated no-backend assertions, no output-verification step, and an optional backend section that could be externalized.

Suggestions

State the 'no backend / no auto-injected scripts' rule once (in the Workflow) and trim the duplicate assertions in the Backend integration intro and closing line.

Add a lightweight verification step, e.g. open the generated file from disk and confirm it renders with no network calls beyond the Google Fonts CSS.

Consider moving the Tier 2/Tier 3 backend integration catalog to a references file, keeping only a one-line pointer in SKILL.md.

Dimension	Reasoning	Score
Conciseness	The body is lean and directive — exact design tokens, a compact input table, and no explanations of concepts Claude already knows. Minor over-statement remains: the 'no backend by default' point is made three times (workflow step 4, the Backend integration intro, and the closing 'Do not auto-inject' line), so it is efficient with a little trimmable repetition rather than fully lean (anchor 4, not 5).	4 / 5
Actionability	Guidance is highly concrete: exact colors ('#1e293b / #64748b / #f1f5f9'), radius, shadow values, a full input table with defaults, and copy-paste-ready snippets ('window.location.href = "mailto:..."', the fetch('/api/contact') example). It is not a 5 because no actual example HTML/output skeleton is provided — the executor must synthesize the whole widget from the spec.	4 / 5
Workflow Clarity	The 4-step Workflow section is clearly sequenced with explicit constraints (inline values as literals, no template placeholders, no third-party script tags, panel open on first paint). This is not a destructive or batch operation, so no validation cap applies, but there is also no verify-the-output checkpoint (e.g. confirm the file renders with zero network calls), keeping it at anchor 4 rather than 5.	4 / 5
Progressive Disclosure	There are no bundle files (references/, scripts/, assets/ all absent) and the body makes no reference to external files, so there is nothing misleading. The body is well-sectioned (produces / design / inputs / workflow / backend) and mostly appropriately sized at ~78 lines, but the optional Backend integration tier list is the kind of secondary detail that could live in a separate reference file, leaving minor organization room — anchor 4.	4 / 5
	Total	16 / 20 Passed

Description

66%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 specific, well-scoped description that names the artifact type, its concrete components, and its delivery constraints. Its main weakness is the absence of any 'use when' guidance in the description text, leaving the trigger context implicit.

Suggestions

Add an explicit trigger clause, e.g. 'Use when the user asks for a chat widget, contact widget, or floating chat UI for their site.'

Mention the remaining features (offline contact form, mobile responsiveness) to round out coverage.

Include one or two common synonyms users might say ('chat bubble', 'support widget', 'live chat') in the description text itself, not just the triggers field.

Dimension	Reasoning	Score
Specificity	The description lists several concrete components — 'welcome screen, social links, meeting button, and message input' plus 'Single HTML file, zero dependencies' — giving it strong, specific coverage. It stops just short of comprehensive: secondary features (offline form, mobile responsiveness) are omitted, so anchor 4 ('several specific actions; minor gaps') fits better than 5.	4 / 5
Completeness	The 'what' is clearly and concretely answered, but there is no 'Use when...' clause or equivalent trigger guidance in the description itself, which caps completeness at 3 per the judging guidelines. It is a solid 3 (clear what, 'when' only weakly implied by the widget phrasing), not a 4, because no usage context is stated at all.	3 / 5
Trigger Term Quality	Natural phrases users would actually say are present — 'floating chat widget', 'chat widget', 'contact widget', 'message input', 'social links'. Coverage is good but misses common variations like 'chat bubble', 'support widget', 'live chat', or 'messaging widget', matching anchor 4 rather than the comprehensive synonym/extension coverage of anchor 5.	4 / 5
Distinctiveness Conflict Risk	'Self-contained floating chat widget ... Single HTML file, zero dependencies' carves out a clear niche (embedded site chat widget UI) that is unlikely to trigger for unrelated skills. Minor overlap risk remains with other generic UI/web-component generation skills, so anchor 4 rather than 5.	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
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: nexu-io/open-design
Path: design-templates/contact-widget/SKILL.md
Commit: 1b47e60

Reviewed: 3 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.