CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

flutter-text-rendering

Diagnose and fix Flutter text display issues including text overflow, orphaned words, line breaking, truncation, multi-style spans, and text scaling. Use when text clips, leaves dangling single words, overflows containers, or requires rich inline spans; route typography tokens and visual hierarchy to flutter-ui-design and screen-level layout constraints to flutter-responsive-layout.

Quality

86%

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

78%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 skill body: failure-mechanism diagnosis first, prescriptive rules naming exact Flutter APIs, a gated single reference file, and an explicit verification matrix with widget-test assertions. The main gaps are the absence of any copy-paste code example for the most common fixes and minor re-explanation of Flutter layout mechanics Claude already knows.

Suggestions

Add one short copy-paste code block for the most common fix (e.g., a Row with Flexible + Text with maxLines and TextOverflow.ellipsis) to lift actionability to fully executable.

Trim mechanism explanations Claude already knows, such as the constraint walkthrough in Diagnose item 1, down to the diagnostic cue (e.g., 'RenderFlex overflowed beside siblings → constrain the competing branch').

Close the workflow loop in Verification with a re-verify step (e.g., 'if the overflow test still fails, re-check which branch owns the flex constraint').

DimensionReasoningScore

Conciseness

The body is dense and assumes Flutter competence (no padding about what Flutter or Text is), but a few phrases re-explain mechanics Claude already knows, e.g. "A non-flex Text can receive an unbounded constraint along a Flex main axis and choose an intrinsic size larger than the space available beside its siblings", which could be trimmed to just the diagnostic cue.

4 / 5

Actionability

Guidance names exact APIs and parameters (Flexible/Expanded/SizedBox, TextOverflow.ellipsis, \u00A0, TextPainter with "explicit maxWidth plus the ambient direction, locale, and TextScaler", TextScaler.linear(1.5)) making it highly actionable for an instruction-only skill, but there is no copy-paste code block, so it stops short of the fully executable top anchor.

4 / 5

Workflow Clarity

A clear Diagnose → Rules → Verification sequence is present ("Identify the failure mechanism before adjusting layout") with an explicit 5-scenario verification checklist and concrete widget-test assertions ("asserting no RenderFlex overflow, confirming intended line count"), but there is no fix-and-re-verify feedback loop, which the top anchor expects.

4 / 5

Progressive Disclosure

The body is a lean ~50-line overview with a single, clearly signaled, conditionally gated one-level-deep reference ("Read [text overflow and wrapping](references/text-overflow-and-wrapping.md) when fixing flex overflows, eliminating orphaned words..."), and that file exists in the bundle with no nested references, matching the top anchor.

5 / 5

Total

17

/

20

Passed

Description

87%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 with a clear what/when structure, concrete trigger phrases with good synonym coverage, and explicit routing to adjacent skills to avoid overlap. The only weakness is that the action vocabulary is limited to 'diagnose and fix' plus a list of conditions rather than several distinct named actions.

DimensionReasoningScore

Specificity

The description enumerates concrete issue types ("text overflow, orphaned words, line breaking, truncation, multi-style spans, and text scaling") but offers only two action verbs ("Diagnose and fix"), so coverage is specific with minor gaps rather than the multiple distinct concrete actions of a 5.

4 / 5

Completeness

It explicitly answers both 'what' ("Diagnose and fix Flutter text display issues including...") and 'when' with concrete trigger phrases ("Use when text clips, leaves dangling single words, overflows containers..."), exactly matching the top anchor.

5 / 5

Trigger Term Quality

"Use when text clips, leaves dangling single words, overflows containers, or requires rich inline spans" uses natural user phrasings with synonyms (overflow/clips, orphaned/dangling), but misses common variations like "text wraps", "ellipsis", or "font too big", matching the 'good keyword coverage; a few natural terms missing' anchor.

4 / 5

Distinctiveness Conflict Risk

It carves a clear Flutter-text-rendering niche and proactively routes adjacent concerns away ("route typography tokens and visual hierarchy to flutter-ui-design and screen-level layout constraints to flutter-responsive-layout"), minimizing conflict risk with sibling skills.

5 / 5

Total

18

/

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-text-rendering/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.