CtrlK
BlogDocsLog inGet started
Tessl Logo

embedded-or-inline-css

Use when reviewing stylesheets, component styles, and responsive behavior related to Avoid embedded and inline CSS. Check the rendered layout across breakpoints and interaction states before proposing a fix.

56

Quality

63%

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/embedded-or-inline-css/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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 well-structured with an excellent progressive-disclosure split to references/rule.md, and its Check/Fix/Explain/Code Review framing gives a usable review workflow. However, it repeats the same rationale and exceptions across four sections and defers all concrete violation patterns to the reference, leaving the top-level guidance abstract and without the verification step its own description promises.

Suggestions

Deduplicate: state the caching/payload rationale and the critical-CSS/dynamic-styles exceptions once (e.g., in Quick Reference) and cut their repetition from Check, Fix, and Explain.

Inline one concrete violation pattern (a style="" attribute or <style> block) and its external-CSS fix so the top-level guidance is actionable without opening the reference.

Add the verification checkpoint the description promises — e.g., a step after Fix to re-check the rendered layout across breakpoints and interaction states before finalizing.

DimensionReasoningScore

Conciseness

The body is short, but the same content repeats: the caching/payload rationale appears in the intro, the Quick Reference ('Inline CSS breaks caching and increases HTML size'), and the Explain section, while the critical-CSS exception is restated in Quick Reference, Check, Fix, and Explain. This matches anchor 3 ('mostly efficient but includes some unnecessary explanation or could be tightened'); it is not anchor 2 because there is no padding or explanation of concepts Claude doesn't know.

3 / 5

Actionability

The guidance is directive but abstract — 'Move inline and embedded CSS to external stylesheets' and 'Flag exact selectors, declarations, or breakpoints' — with no concrete violation patterns (style="" attributes, <style> blocks) or a worked example in the body itself; those exist only in references/rule.md. This sits at anchor 3 rather than 4 because an instruction-only skill should still carry its key specifics inline, and above anchor 2 because the check/fix direction is concrete enough to act on.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections give a recognizable sequence for a simple review skill, but there are no validation checkpoints: the description promises 'Check the rendered layout across breakpoints and interaction states before proposing a fix', yet the body never includes that verification step after a fix. Anchor 3 ('steps listed but validation gaps') fits; the simple-skill exemption to 5 does not apply because the promised rendered-layout check is absent.

3 / 5

Progressive Disclosure

A ~45-line overview that defers 'full implementation details, code examples, and framework-specific guidance' to a single, clearly signaled, one-level-deep reference (references/rule.md), which exists and contains exactly that material. This matches anchor 5: clear overview, well-signaled one-level-deep reference, appropriate split, easy navigation.

5 / 5

Total

14

/

20

Passed

Description

70%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 solid description with an explicit trigger clause, third-person voice, and good natural keywords for the CSS review domain. Its main weaknesses are generic action verbs (reviewing, checking) instead of enumerated capabilities, and a what-clause that leans on the rule title rather than stating what the skill does.

Suggestions

State the core capability explicitly, e.g. 'Flags inline style attributes, <style> blocks, and embedded stylesheets and moves them to external CSS files, keeping only critical above-the-fold CSS inline.'

Add missing synonyms users would naturally say, such as 'style tags', 'style attributes', 'critical CSS', or 'CSS in HTML', to strengthen trigger coverage.

DimensionReasoningScore

Specificity

The description names the domain ('embedded and inline CSS', stylesheets, component styles) and a couple of concrete actions ('Check the rendered layout across breakpoints and interaction states', 'reviewing'), but the actions remain generic reviewing/checking rather than the several specific actions of anchor 4. It does not reach anchor 2 because it is well beyond a bare domain mention.

3 / 5

Completeness

It has an explicit 'Use when' trigger clause and a what ('Check the rendered layout across breakpoints and interaction states before proposing a fix'), satisfying anchor 4. Not anchor 5 because the what is thin relative to the when — the actual capability (flagging externalizing inline/embedded styles) is only implied by the rule title.

4 / 5

Trigger Term Quality

Good natural keyword coverage: 'stylesheets', 'component styles', 'responsive behavior', 'inline CSS', 'breakpoints', 'interaction states', 'rendered layout' — phrases users would naturally say. Not anchor 5 because common synonyms like '<style> tags', 'style attributes', 'critical CSS', or 'CSS in HTML' are absent.

4 / 5

Distinctiveness Conflict Risk

The inline/embedded CSS review niche is mostly distinct with clear CSS-specific triggers, though it could overlap with general CSS linting or code-review skills. It avoids anchor 3 because the trigger terms (inline CSS, breakpoints, interaction states) are specific enough to disambiguate from sibling skills.

4 / 5

Total

15

/

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.