CtrlK
BlogDocsLog inGet started
Tessl Logo

css-at-property

Use when implementing animated gradients, complex CSS transitions that involve custom property values, or building a typed design token system where custom property misuse should produce visible errors.

60

Quality

71%

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/css-at-property/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 skill body is a well-structured, lean overview with clean progressive disclosure to a real reference file. It is held back by a slightly padded conceptual intro, no inline executable example, and the absence of an explicit validation checkpoint in the review workflow.

Suggestions

Trim the introductory paragraph that re-explains untyped custom properties; assume Claude's existing CSS knowledge and lead with the directive content.

Add a small inline @property example in the Fix section so the body is copy-paste ready without forcing a jump to the reference.

Insert an explicit verification step into the Code Review workflow (e.g., confirm registration validity and animation interpolation in DevTools) so the feedback loop is visible in the body.

DimensionReasoningScore

Conciseness

The body is mostly efficient with short directive sections, but the opening paragraph re-explains that custom properties are untyped string substitutions — a concept Claude already knows — adding mild padding.

2 / 3

Actionability

Fix/Code Review give specific field-level directives (syntax descriptor, initial-value, inherits) and point to the real references/rule.md for executable code, but the body itself carries no worked inline example.

2 / 3

Workflow Clarity

The Check → Fix → Explain → Code Review sequence is clearly ordered, but there is no inline validation or feedback loop; verification lives only in the reference, leaving checkpoints implicit.

2 / 3

Progressive Disclosure

The body is a concise overview that signals a single one-level-deep reference (references/rule.md, a verified real file), with details appropriately split out and easy to navigate.

3 / 3

Total

9

/

12

Passed

Description

85%

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 strong, with explicit "Use when" trigger guidance and several concrete, distinct capabilities that give it a clear niche. Its only weakness is trigger-term coverage, which misses common phrasings like "@property" and "CSS variables" that a user might naturally say.

DimensionReasoningScore

Specificity

The description names multiple concrete actions — "implementing animated gradients", "complex CSS transitions that involve custom property values", and "building a typed design token system where custom property misuse should produce visible errors" — matching the multi-action anchor.

3 / 3

Completeness

It opens with an explicit "Use when..." trigger clause and simultaneously states what the skill does, satisfying both the 'when' and 'what' requirements at the top anchor.

3 / 3

Trigger Term Quality

It includes relevant natural terms like "animated gradients" and "typed design token system", but omits common variations such as "@property" or "CSS variables animation" that users would likely say.

2 / 3

Distinctiveness Conflict Risk

The scope is tightly bound to @property registration for animation and typed tokens — a clear niche with distinct triggers unlikely to conflict with general CSS skills.

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