naming-conventions

Use when reviewing stylesheets, component styles, and responsive behavior related to Use consistent CSS naming conventions. 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/naming-conventions/SKILL.md

Quality

Content

65%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 good progressive disclosure to a real reference file and concrete BEM-rename guidance, but it lacks a verification step for the batch class-rename operation and carries redundant content duplicated from both the reference file and the frontmatter description.

Suggestions

Add a verification step to the Fix workflow, e.g. "After renaming, search the codebase for the old class names to catch orphaned selectors/JS hooks and confirm the rendered layout is unchanged across breakpoints."

Remove or trim the opening "why it matters" paragraph, which is duplicated verbatim in references/rule.md's "Why It Matters" section.

Replace the Code Review section, which repeats the description almost word-for-word, with distinct review-level guidance (e.g., what specific naming violations to flag and how to report them).

Dimension	Reasoning	Score
Conciseness	The body is brief and sectioned, but the opening "Without a naming convention, class names become a guessing game..." paragraph is motivational explanation duplicated verbatim in references/rule.md's "Why It Matters", and the Code Review section restates the frontmatter description almost word-for-word.	3 / 5
Actionability	Concrete, specific guidance for an instruction-only skill: "Rename classes to follow BEM methodology: Block, Block__Element, Block--Modifier pattern", kebab-case enforcement, and concrete audit questions in Check. Minor gap: no before/after rename example inline (examples live in the reference file).	4 / 5
Workflow Clarity	The Check → Fix section order implies a rough sequence, but the steps are not explicitly ordered and there is no verification step after renaming (e.g., searching for orphaned old class names or confirming the rendered layout still matches). Per the rubric, a batch operation like renaming classes across a stylesheet without validation is capped at 3.	3 / 5
Progressive Disclosure	The body is a short, well-sectioned overview (~45 lines) with a clearly signaled, one-level-deep reference that exists on disk ("see `references/rule.md`" for implementation details and code examples), and the 132-line rule.md appropriately holds the bulk material.	5 / 5
	Total	15 / 20 Passed

Description

57%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 has a clear explicit trigger clause and reasonable domain keywords, but a text-generation artifact ("related to Use consistent CSS naming conventions") and the absence of a stated core action leave the "what" unclear and reduce its usefulness as a skill matcher. The responsive/breakpoint framing also dilutes the naming-convention niche.

Suggestions

Fix the duplicated phrasing "related to Use consistent CSS naming conventions" and instead state the what explicitly, e.g. "Audits class names for a consistent convention and renames them to follow BEM (Block__Element--Modifier)."

Add natural trigger terms users would actually say, such as "class names", "BEM", and "CSS files".

Tie the breakpoint/interaction-state check explicitly to the naming rule (verifying renamed classes don't break rendered layout) rather than framing it as a separate responsive-behavior task.

Dimension	Reasoning	Score
Specificity	The description names the CSS-styling domain and one concrete action ("Check the rendered layout across breakpoints and interaction states before proposing a fix"), but never states the core capability (auditing class names and renaming them to a convention), so coverage is incomplete.	3 / 5
Completeness	The "when" is explicit ("Use when reviewing stylesheets, component styles, and responsive behavior..."), but the "what" is only weakly conveyed: the description never says the skill audits or fixes class naming, and the mangled phrase "related to Use consistent CSS naming conventions" obscures the core capability.	3 / 5
Trigger Term Quality	Natural terms like "stylesheets", "component styles", "responsive behavior", "breakpoints", and "CSS naming conventions" match what users would say, but common variations such as "class names", "BEM", or ".css" are missing.	4 / 5
Distinctiveness Conflict Risk	"CSS naming conventions" is a distinct niche, but the heavy emphasis on "responsive behavior" and "breakpoints" creates overlap with generic CSS/responsive-layout review skills, so it could trigger for the wrong CSS skill.	3 / 5
	Total	13 / 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/naming-conventions/SKILL.md
Commit: 7bfd868

Reviewed: 1 day 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.