CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

63

Quality

75%

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

81%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 strong, well-structured body: executable examples covering basic, custom, and multi-preview cases, a copyable checklist, and an explicit error-recovery feedback loop. Remaining improvements are small — add previewer setup/prerequisite steps, move long advanced examples to reference files, and trim the redundant TOC.

DimensionReasoningScore

Conciseness

The body is efficient — bullet-form guidelines, three focused code examples, and no explanation of Flutter/Dart basics Claude already knows. Minor trims are possible: the Contents TOC adds little for a ~135-line single file, and the version pin 'Flutter 3.38+' is time-sensitive without a deprecated/versions note. Not a 5 due to those small over-efficiencies; not a 3 because there is no noticeable padding.

4 / 5

Actionability

All three Dart examples are complete and executable, and the CLI workflow gives a concrete command ('flutter widget-preview start') with specific IDE navigation steps. A minor gap keeps it from a 5: no setup/prerequisite instructions for enabling the previewer (e.g., configuration or first-run setup), so a user on an unconfigured project could not follow end-to-end.

4 / 5

Workflow Clarity

Creation is a copyable checklist; launch is a clearly sequenced conditional workflow (IDE vs. CLI); and the iteration section is an explicit feedback loop with error recovery: 'Review errors in the IDE/CLI console -> fix -> repeat', plus differentiated global vs. per-preview hot restart guidance. This matches the top anchor (checklists + explicit feedback loops) — nothing below fits since both checkpoints and sequencing are present.

5 / 5

Progressive Disclosure

No bundle files exist, so everything lives in one well-sectioned file with a TOC and clear headers. The structure is good, but the two advanced examples (runtime transformation, MultiPreview, ~40 lines each) could be split into reference files, and the in-file TOC duplicates the header navigation — minor organization gaps matching the 4 anchor rather than the 'appropriately split' 5 anchor.

4 / 5

Total

17

/

20

Passed

Description

70%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 solid description with both a concrete 'what' and an explicit 'Use when' clause in correct third-person voice. Its main weaknesses are thin action coverage (only one action listed) and trigger phrasing that is generic enough to overlap with general Flutter UI work.

Suggestions

List 2-3 concrete capabilities in the description, e.g. 'Applies @Preview annotations, configures preview parameters (name, group, size, theme), and launches the Widget Previewer' to lift specificity from one action to several.

Add more concrete trigger phrases and synonyms, e.g. 'Use when the user mentions widget previews, @Preview annotations, or wants to visually test Flutter widgets' — also include the word 'Flutter' so the skill triggers on it.

Sharpen the 'when' clause to specific triggering contexts instead of the broad 'creating new UI components or updating existing screens', which risks firing on general Flutter UI work unrelated to previews.

DimensionReasoningScore

Specificity

The description names the domain ('interactive widget previews') and one concrete action ('Adds... to the project using the previews.dart system') but lists no additional specific actions like configuring preview parameters or running the previewer, matching the '1-2 concrete actions, not comprehensive' anchor. It is not a 4 because only a single action verb is offered, and not a 2 because the stated action is concrete and domain-specific.

3 / 5

Completeness

It answers both parts: 'what' ('Adds interactive widget previews to the project using the previews.dart system') and 'when' (explicit 'Use when creating new UI components or updating existing screens'). Not a 5 because the 'when' clause is generic and lacks concrete trigger phrases (e.g., 'when the user mentions widget previews'); not a 3 because the 'Use when' clause is explicit, not merely implied.

4 / 5

Trigger Term Quality

Natural phrases users would say are present: 'widget previews', 'previews.dart', 'creating new UI components', 'updating existing screens'. A few natural terms are missing — notably the word 'Flutter' itself and common variations like 'preview' as a standalone verb — so it falls just short of comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

'previews.dart' and 'interactive widget previews' carve a distinct niche with minimal conflict risk, but the broad trigger 'creating new UI components or updating existing screens' overlaps with general Flutter UI-development skills, keeping it below the 'clear niche with distinct triggers' anchor.

4 / 5

Total

15

/

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