CtrlK
BlogDocsLog inGet started
Tessl Logo

logical-properties

Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS logical properties for i18n and RTL support. Check the rendered layout across breakpoints and interaction states before proposing a fix.

57

Quality

66%

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/logical-properties/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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 a lean, well-structured overview with a clear Check/Fix workflow and an appropriately placed one-level-deep reference carrying the full property mapping and code examples. Its main weakness is redundancy: the intro rationale and part of the Quick Reference duplicate content already in references/rule.md, and the Fix step defers all concrete conversion detail to the reference.

DimensionReasoningScore

Conciseness

The body is short, but the opening paragraph ('Physical CSS properties (margin-left, padding-right) are hardcoded to screen directions...') explains a concept Claude already knows and is duplicated verbatim in references/rule.md's 'Why It Matters'; the Quick Reference bullets also restate the mapping table that lives in the reference. This matches anchor 3 ('mostly efficient but includes some unnecessary explanation or could be tightened'); not 4 because the duplicated rationale paragraph and overlapping bullets are clear trim candidates.

3 / 5

Actionability

The Check section lists exact properties to hunt for ('margin-left, margin-right, padding-left, padding-right, border-left, border-right, left, right (as positioning)') and Quick Reference gives the concrete replacement pattern (inline-start/inline-end, block-start/block-end), with the full mapping table and executable code examples one reference away in references/rule.md. This is anchor 4 ('mostly executable guidance; concrete code or commands with minor gaps'); not 5 because the body's Fix section itself ('Convert physical direction properties to their CSS logical property equivalents') is a direction rather than a concrete conversion recipe.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections give a clear, ordered workflow for a single-purpose skill, and verification guidance exists ('Check the rendered layout across breakpoints and interaction states before proposing a fix' in the description; a Verification section in references/rule.md). This matches anchor 4 ('clear sequence with most checkpoints present; minor validation gaps'); not 5 because the body's Fix step lacks an inline verify-after-converting checkpoint and there is no explicit fix→verify feedback loop in the body itself.

4 / 5

Progressive Disclosure

The body is under 50 lines with well-organized sections, and the single reference (references/rule.md — verified to exist) holds the detailed mapping table, code examples, and verification steps, clearly signaled by 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md'. The reference is one level deep, the split is appropriate, and navigation is trivial — a clean match for anchor 5.

5 / 5

Total

16

/

20

Passed

Description

61%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 has a clear, explicit trigger clause and good natural keywords for the CSS/RTL domain, but the 'what' is garbled into an embedded rule title, leaving the skill's actual capabilities (check, fix, explain, review) unstated. It reads as a trigger-first sentence with the rule name awkwardly spliced in rather than a composed capability summary.

Suggestions

State the 'what' explicitly with capability verbs before the trigger, e.g. 'Finds physical direction properties (margin-left, padding-right, left) in stylesheets and converts them to logical equivalents (margin-inline-start, padding-inline-end, inset-inline-start) for RTL/i18n support. Use when reviewing CSS, component styles, or responsive behavior for internationalization or right-to-left layouts.'

Fix the garbled clause 'related to Use CSS logical properties for i18n and RTL support' — the duplicated 'Use' makes the sentence read as a spliced rule title rather than a description of capabilities.

Add common trigger synonyms such as 'right-to-left', 'internationalization', 'RTL layouts', and '.css files' so users phrasing the need differently still match the skill.

DimensionReasoningScore

Specificity

The description names the domain ("reviewing stylesheets, component styles, and responsive behavior") and one concrete action ("Check the rendered layout across breakpoints and interaction states before proposing a fix"), but does not comprehensively state what the skill does (no mention of finding/converting physical properties or explaining logical properties). This matches anchor 3 ('names domain and 1-2 concrete actions, but not comprehensive'); it is not 4 because it lists only a couple of actions, and not 2 because the targets and the check step are concrete rather than generic.

3 / 5

Completeness

The 'when' is explicit ("Use when reviewing stylesheets, component styles, and responsive behavior related to...") but the 'what' is only weakly implied: the embedded rule title "Use CSS logical properties for i18n and RTL support" reads as a topic label, not a statement of capabilities, and the one action given ("Check the rendered layout...") is a process note rather than a description of what the skill does. It is between anchors 2 and 4: more 'what' than anchor 2's trigger-only example, but the garbled 'related to Use...' clause and missing capability verbs keep it below anchor 4.

3 / 5

Trigger Term Quality

Natural trigger terms are present: "stylesheets", "component styles", "responsive behavior", "i18n and RTL support", "CSS logical properties", "breakpoints", "interaction states" — the phrases a user reviewing CSS would actually say. It falls short of anchor 5 because common variations like "right-to-left", "internationalization", "RTL layout", or file mentions (.css) are missing; it is above anchor 3 because coverage goes beyond a few relevant keywords.

4 / 5

Distinctiveness Conflict Risk

The niche is specific — CSS logical properties for i18n/RTL in stylesheets — with distinct triggers unlikely to fire for unrelated skills. Minor overlap remains with generic CSS-lint, responsive-design, or i18n skills, matching anchor 4 ('mostly distinct; minor overlap risk with closely related skills'); not 5 because it does not fully separate from adjacent frontend-checklist styling skills.

4 / 5

Total

14

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
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.