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

62%

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

57%

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 well-structured, concise overview that correctly offloads detailed examples to a real one-level-deep reference, but it duplicates a caching point, lacks in-body executable examples, and has no explicit post-fix validation checkpoint.

Suggestions

Remove the duplicate caching/HTML-size bullet in Quick Reference (already stated in the intro line) to tighten conciseness.

Add one small inline code snippet showing the core fix (e.g. an inline style converted to an external class) so the body is actionable without forcing a reference load.

Add an explicit validation step after 'Fix' such as 'Re-check the rendered layout at affected breakpoints to confirm the moved styles still apply', giving the workflow a clear feedback loop.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean with short bulleted sections, but the caching/HTML-size point is stated twice (intro line and the 'Inline CSS breaks caching and increases HTML size' bullet), and the '## Explain' section tells Claude to explain rather than delivering the explanation, so it is not fully tight.	2 / 3
Actionability	Concrete high-level guidance is present ('Move inline and embedded CSS to external stylesheets, keeping only critical above-the-fold CSS inline'), but the body itself contains no executable code or concrete selectors; all examples are deferred to references/rule.md, leaving key details missing in-skill.	2 / 3
Workflow Clarity	A loose sequence exists (Check, Fix, Explain, Code Review) and the 'Check'/'Code Review' sections give verification direction, but there is no explicit post-fix validation checkpoint (e.g. re-verify the rendered layout after moving styles), so checkpoints are implicit.	2 / 3
Progressive Disclosure	SKILL.md is a concise overview with well-organized sections and a clearly signaled one-level-deep pointer ('see references/rule.md'), and references/rule.md exists and holds the detailed examples, matching the anchor-3 structure.	3 / 3
	Total	9 / 12 Passed

Description

67%

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 'Use when' trigger and answers both what and when, but its action verbs are generic and the awkward title insertion plus broad stylesheet-review trigger weaken specificity and distinctiveness.

Suggestions

Lead with a concrete third-person action statement (e.g. 'Flags and removes embedded/inline CSS, moving it to external stylesheets or CSS-in-JS') before the 'Use when' clause to sharpen specificity.

Replace the inserted-title phrasing 'related to Avoid embedded and inline CSS' with natural trigger terms a user would say, such as 'inline styles', 'style attributes', '<style> tags', and 'external stylesheets'.

Narrow the 'when' clause to the inline/embedded CSS problem specifically so it does not overlap with generic stylesheet or responsive-layout review skills.

Dimension	Reasoning	Score
Specificity	Names the domain ('embedded and inline CSS', 'stylesheets, component styles') and a couple of actions ('reviewing', 'Check the rendered layout'), but the verbs are generic review/check variants rather than a list of distinct concrete operations like the anchor-3 example.	2 / 3
Completeness	Both 'what' (review/check stylesheets and rendered layout) and 'when' are answered with an explicit 'Use when reviewing...' trigger clause, matching the anchor-3 example.	3 / 3
Trigger Term Quality	Relevant natural terms appear ('inline CSS', 'embedded', 'stylesheets', 'breakpoints', 'responsive behavior'), but the phrase 'related to Avoid embedded and inline CSS' reads as an inserted title rather than natural speech, and common variations like 'external stylesheet', 'style attribute', or '<style> tag' are absent.	2 / 3
Distinctiveness Conflict Risk	The inline/embedded CSS niche is somewhat specific, but the broad trigger 'reviewing stylesheets, component styles, and responsive behavior' could plausibly fire for other CSS/frontend review skills in the same checklist collection.	2 / 3
	Total	9 / 12 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: 48405aa

Reviewed: about 9 hours 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.