CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

flutter-add-widget-preview

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.

Quality

79%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/flutter-add-widget-preview/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

88%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 body is highly actionable and well structured: complete executable examples, precise constraint guidance, and workflows with checklists and an error-recovery feedback loop. Its only weaknesses are slight length in the advanced examples and missed opportunity to offload them to a reference file.

DimensionReasoningScore

Conciseness

The body is dense with preview-specific knowledge (annotation targets, web-runtime limitations, cache paths) and avoids explaining Flutter basics, but the ~70 lines of advanced examples are minor trimmable length, fitting 'efficient with minor instances that could be trimmed'.

4 / 5

Actionability

Three complete executable Dart examples with imports, the exact command "flutter widget-preview start", a parameter-by-parameter API list, and a step-by-step creation checklist make the guidance fully copy-paste ready.

5 / 5

Workflow Clarity

The Workflows section provides a creation checklist, clearly sequenced conditional workflows (IDE vs CLI), and an explicit feedback loop with error recovery ("Review errors in the IDE/CLI console -> fix -> repeat").

5 / 5

Progressive Disclosure

The single-file body is well organized with a contents list and clear sections, but at ~185 lines with no bundle files, the advanced ThemedPreview/MultiPreview examples could plausibly live in a separate reference file; this is 'good structure with minor organization gaps' rather than an ideal split.

4 / 5

Total

18

/

20

Passed

Description

62%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 uses third person, answers both what and when, and anchors to a specific system. It is let down by thin action coverage and missing natural trigger terms (notably "Flutter"), which also broadens its conflict surface with general UI-development skills.

Suggestions

List more concrete actions, e.g., "Adds interactive widget previews via the previews.dart system, configures preview themes/brightness, and generates light/dark widget variants."

Add natural trigger terms users would actually say, such as "Flutter widgets", "widget preview", "previewer", and "hot restart" to the 'Use when' clause.

Tighten the when-clause to preview-specific triggers (e.g., "when the user asks to preview a Flutter widget or iterate on UI without running the full app") to reduce overlap with general component-building skills.

DimensionReasoningScore

Specificity

"Adds interactive widget previews to the project using the previews.dart system" names the domain and mechanism but only covers one concrete action, matching the anchor for 1-2 concrete actions rather than several specific ones.

3 / 5

Completeness

Both a clear 'what' ("Adds interactive widget previews... using the previews.dart system") and an explicit 'when' ("Use when creating new UI components or updating existing screens") are present, though the trigger scenarios are narrower than the anchor-5 comprehensive trigger phrases.

4 / 5

Trigger Term Quality

Relevant keywords like "widget previews", "UI components", and "screens" are present, but common variations a user would naturally say ("Flutter", "preview a widget", "previewer") are missing, fitting the 'some relevant keywords but missing variations' anchor.

3 / 5

Distinctiveness Conflict Risk

The previews.dart system is a clear niche, but the trigger "creating new UI components or updating existing screens" broadly overlaps with general Flutter UI-development skills, giving minor conflict risk.

4 / 5

Total

14

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

referenced_paths_exist

Referenced path issues: 1 missing

Warning

Total

14

/

16

Passed

Repository

flutter/agent-plugins

Path

skills/flutter-add-widget-preview/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.