CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

flutter-ui-design

Design or visually transform Flutter interfaces with a deliberate art direction, distinctive product identity, coherent tokens, complete states, and rendered visual proof. Use for UI/UX design, redesign, reference-driven parity, or when a screen feels generic or unfinished; route widget architecture and responsive mechanics to their dedicated skills.

Quality

93%

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

The canonical home for this skill is thiennc-tesoglobal/flutter-skills

SKILL.md
Quality
Evals
Security

Quality

Content

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

An exemplary instruction-only skill body: it assumes Flutter competence, sequences preflight through design to verification with built-in critique/re-render loops, and splits depth into six conditionally-loaded reference files that all exist and go exactly one level deep. No padding, no missing validation, and easy navigation.

DimensionReasoningScore

Conciseness

Dense directive prose throughout ("Audit the result for framework-default residue", "Do not turn every content group into a card") with zero explanation of concepts Claude already knows; every rule, routing line, and rationale clause earns its place.

5 / 5

Actionability

Concrete, specific guidance throughout: exact inspectables ("pubspec.yaml", "ThemeData, ColorScheme, TextTheme, ThemeExtension"), an enumerated state list ("empty, loading, failure, offline, stale, disabled"), a four-way ambition classification, and an explicit verification matrix — fully actionable without code, as appropriate for an instruction-only skill.

5 / 5

Workflow Clarity

Sequenced Preflight (5 steps) and Design workflow (7 numbered steps) with explicit validation and feedback loops: "Render the same fixtures before and after… then perform another implementation pass for material issues" and "Do not stop after the first successful render… fix material visual gaps, and capture the accepted result."

5 / 5

Progressive Disclosure

A lean overview body with six one-level-deep references, each conditionally loaded with explicit trigger conditions ("Read art direction when the request is open-ended…"); all six referenced files exist in references/ and none nest further references.

5 / 5

Total

20

/

20

Passed

Description

83%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 strong description that clearly states both capability and trigger conditions for a well-scoped Flutter visual-design niche. It falls just short of the top anchors on specificity, trigger coverage, and distinctiveness because capability phrasing is quality-oriented rather than operational, a few colloquial triggers are missing, and only two sibling skills are explicitly routed away.

Suggestions

Convert quality phrases into concrete operations, e.g. "establish semantic ColorScheme/TextTheme tokens and light/dark ThemeData" to sharpen the what.

Add natural user phrasings such as "polish the UI", "style this screen", or "match this mockup/Dribbble reference" to the Use-for clause.

Name the remaining sibling skills in the routing clause (flutter-animation, flutter-visual-effects, flutter-accessibility) to further reduce overlap with visually-oriented skills.

DimensionReasoningScore

Specificity

Names the domain and several capabilities ("Design or visually transform Flutter interfaces with a deliberate art direction, distinctive product identity, coherent tokens, complete states, and rendered visual proof"), but the capabilities are qualities rather than concrete operations and body scope items like platform adaptation and hierarchy/composition are absent — minor gaps keep it below the comprehensive anchor 5.

4 / 5

Completeness

Explicitly answers both "what" ("Design or visually transform Flutter interfaces with…") and "when" with a concrete trigger clause ("Use for UI/UX design, redesign, reference-driven parity, or when a screen feels generic or unfinished"), matching the top anchor exactly.

5 / 5

Trigger Term Quality

Includes natural triggers users would say ("UI/UX design", "redesign", "when a screen feels generic or unfinished"), but misses common variations like "polish", "style", or "match this mockup", and "reference-driven parity" leans jargon — good coverage with a few natural terms missing.

4 / 5

Distinctiveness Conflict Risk

The Flutter-scoped niche plus explicit routing ("route widget architecture and responsive mechanics to their dedicated skills") reduces conflict, but visually overlapping siblings like flutter-animation, flutter-visual-effects, and flutter-accessibility are not disambiguated in the description itself — mostly distinct with minor overlap risk.

4 / 5

Total

17

/

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

thienqo/flutter-skills

Path

skills/flutter-ui-design/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.