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.

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

Quality

Content

57%

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-organized with a clean one-level reference, but it spends tokens explaining CSS/RTL basics Claude knows and gives abstract Fix guidance without a concrete property-to-logical-property mapping or executable examples. The Check/Fix/Code Review sections function as modes rather than a validated workflow.

Suggestions

Replace the conceptual intro with (or move it to references/rule.md and) a concrete mapping table of physical -> logical properties (e.g. margin-left -> margin-inline-start) so the Fix is copy-paste ready.

Tighten the intro to drop explanations of margin-left/RTL basics that Claude already knows, keeping only rule-specific guidance.

Make the Check -> Fix -> Code Review flow an explicit sequenced workflow with a verification step (e.g. re-check the rendered layout across LTR/RTL and breakpoints after applying changes).

DimensionReasoningScore

Conciseness

The body is short and sectioned, but the intro paragraph explains concepts Claude already knows ('Physical CSS properties... are hardcoded to screen directions', '[dir=rtl] selectors'), matching 'mostly efficient but includes some unnecessary explanation'.

2 / 3

Actionability

The Check section lists concrete properties to find (margin-left, padding-right, etc.) and Quick Reference gives some equivalents, but the Fix section is abstract ('Convert physical direction properties to their CSS logical property equivalents') with no executable mapping table or code, so guidance is incomplete.

2 / 3

Workflow Clarity

Check/Fix/Explain/Code Review read as loose modes rather than a sequenced workflow with validation checkpoints, matching 'steps listed but validation gaps; sequence present but checkpoints missing or implicit'.

2 / 3

Progressive Disclosure

A simple, well-sectioned body under 50 lines signals one clearly-named one-level-deep reference ('see references/rule.md', verified to exist), matching the clear-overview-with-well-signaled-references anchor.

3 / 3

Total

9

/

12

Passed

Description

92%

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 an explicit trigger, third-person voice, and concrete review actions with good natural keywords. It is weakened by an awkward 'related to Use CSS logical properties' phrasing and an overly broad CSS-review framing that could overlap with general stylesheet skills.

Suggestions

Fix the broken 'related to Use CSS logical properties' wording so the description reads as a clean sentence rather than a pasted rule title.

Tighten the broad 'reviewing stylesheets, component styles, and responsive behavior' framing to center the RTL/i18n logical-properties niche and reduce overlap with generic CSS review skills.

DimensionReasoningScore

Specificity

Names multiple concrete actions — 'reviewing stylesheets, component styles, and responsive behavior' and 'Check the rendered layout across breakpoints and interaction states before proposing a fix' — matching the 'lists multiple specific concrete actions' anchor.

3 / 3

Completeness

Explicitly answers both what (review stylesheets/layout, propose fixes) and when via an explicit 'Use when reviewing...' trigger clause, hitting the top anchor.

3 / 3

Trigger Term Quality

Natural terms a frontend user would say are well covered: 'stylesheets', 'component styles', 'responsive behavior', 'i18n', 'RTL', 'breakpoints', and 'interaction states'.

3 / 3

Distinctiveness Conflict Risk

The i18n/RTL logical-properties niche is distinctive, but the broad opening 'reviewing stylesheets, component styles, and responsive behavior' overlaps with general CSS/responsive review skills, so it is only somewhat specific.

2 / 3

Total

11

/

12

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.

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