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.

Quality

61%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/embedded-or-inline-css/SKILL.md

Quality

Content

53%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 content is a well-organized overview that delegates detail to a real reference file with clear navigation. It is somewhat held back by redundant conceptual explanation and directional rather than executable guidance in the body itself.

Suggestions

Drop the 'Inline CSS cannot be cached separately...' intro line and the redundant Quick Reference bullet; Claude already knows why inline CSS is discouraged.

Add one concrete inline example (a before/after snippet or a specific selector to flag) in the Check or Fix section so the body is actionable without opening the reference.

Make the Check -> Fix -> Explain -> Code Review flow explicit with numbered steps or a validation checkpoint after fixing.

Dimension	Reasoning	Score
Conciseness	The body is mostly brief, but the intro line ('Inline CSS cannot be cached separately, increases HTML payload, breaks separation of concerns...') explains a concept Claude already knows, and the Quick Reference bullet 'Inline CSS breaks caching and increases HTML size' restates it.	3 / 5
Actionability	Guidance like 'Move inline styles to external CSS files or CSS-in-JS' and 'Flag exact selectors, declarations, or breakpoints' is directional but lacks executable commands or concrete examples in the body (those live in references/rule.md).	3 / 5
Workflow Clarity	The Check/Fix/Explain/Code Review sections imply a loose sequence but there are no explicit checkpoints or validation steps; for a review skill the sequence is present but implicit.	3 / 5
Progressive Disclosure	The body acts as an overview and clearly signals a one-level-deep reference ('see references/rule.md'), which exists as a real bundle file; minor gaps are that some explanatory content could also live in the reference.	4 / 5
	Total	13 / 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.

The description clearly states both what to do and when to use it with relevant frontend trigger terms and a distinct niche. It could improve by listing more concrete actions and tying the trigger to explicit user phrases.

Dimension	Reasoning	Score
Specificity	The description names the domain ('stylesheets, component styles, and responsive behavior') and a couple concrete actions ('Check the rendered layout across breakpoints and interaction states before proposing a fix'), but the actions are generic review verbs rather than a comprehensive set.	3 / 5
Completeness	It has an explicit 'Use when...' clause (the when) and a clear what ('Check the rendered layout... before proposing a fix'), but the trigger phrasing is scoped to 'reviewing' rather than concrete user mentions.	4 / 5
Trigger Term Quality	It includes natural frontend terms a user would say ('stylesheets', 'component styles', 'responsive behavior', 'breakpoints', 'interaction states', 'inline CSS') with good coverage, though a few common synonyms are missing.	4 / 5
Distinctiveness Conflict Risk	The niche ('Avoid embedded and inline CSS') is fairly specific and distinct, with only minor overlap risk against general CSS/frontend review skills.	4 / 5
	Total	15 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/embedded-or-inline-css/SKILL.md
Commit: 30756a7

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

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.