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.

64

Quality

78%

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.

The content is well-structured, actionable, and respectful of Claude's competence, with executable Dart examples and clear workflows for creating and interacting with previews. Its main weakness is that validation/verification steps in the feedback loop are implicit rather than explicit pass/fail checkpoints.

Suggestions

Make the feedback loop's validation explicit, e.g. 'After modifying, confirm the previewer shows no errors in the console before iterating; if errors appear, fix and re-render.'

Tighten the 'Handling Limitations' bullets by removing explanatory phrasing and leading with the constraint and the concrete remedy.

DimensionReasoningScore

Conciseness

The body is mostly efficient with well-organized bullet guidelines and focused code examples, though the 'Preview Guidelines' and 'Handling Limitations' sections include a few explanatory clauses that could be trimmed slightly.

4 / 5

Actionability

Provides fully executable, copy-paste-ready Dart examples covering the common cases (basic preview, custom transform, MultiPreview), plus concrete commands like `flutter widget-preview start` and specific annotation parameters.

5 / 5

Workflow Clarity

Sequences are clearly laid out via a checklist for creating previews and step-numbered IDE/CLI/feedback-loop workflows, but validation/verification checkpoints are implicit (e.g. 'Review errors -> fix -> repeat') rather than an explicit pass/fail gate.

4 / 5

Progressive Disclosure

Good structure with a Contents nav, clearly delineated sections, and inlined examples appropriate to scope; there are no bundle files to reference, so content is correctly self-contained, with only minor organization gaps.

4 / 5

Total

17

/

20

Passed

Description

75%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 specific, action-oriented, and clearly pairs a 'what' statement with an explicit 'Use when' trigger, satisfying the core completeness requirement. It is concise and written in third person, though the trigger clause could be broadened with more natural synonyms.

Suggestions

Broaden the 'Use when' clause with more natural trigger phrases users might say, e.g. 'Use when creating or updating Flutter widgets, screens, or UI components that need live previews.'

Mention 'previews.dart' or 'Widget Previewer' explicitly as keywords so users referencing the system by name trigger the skill.

DimensionReasoningScore

Specificity

Lists several concrete actions ('Adds interactive widget previews', 'creating new UI components', 'updating existing screens', 'ensure consistent design and interactive testing'), with only minor gaps in coverage of the previews.dart system's full scope.

4 / 5

Completeness

Explicitly answers both 'what' ('Adds interactive widget previews to the project using the previews.dart system') and 'when' ('Use when creating new UI components or updating existing screens'), with the 'when' clause present but somewhat narrow in its trigger phrasing.

4 / 5

Trigger Term Quality

Includes natural user-facing terms like 'UI components', 'screens', 'widget previews', and 'interactive testing', though it omits common synonyms like 'widget previewer' or 'previews.dart' as a phrase a user might say.

4 / 5

Distinctiveness Conflict Risk

The previews.dart/widget-preview niche is fairly distinct with clear triggers tied to UI component creation, with only minor overlap risk against general Flutter UI skills.

4 / 5

Total

16

/

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.

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