CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

cross-browser-render-check

Use when you need to check browser-specific CSS/layout/JS rendering differences (Chromium/Firefox/WebKit) before shipping a CSS/JS change or investigating compatibility issues across engines. NOT for viewport/breakpoint layout review (use responsive-visual-review), NOT for functional/interaction E2E testing across browsers (use playwright-testing), NOT for designing a polyfill/feature-detection fix.

69

Quality

87%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

86%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.

A tight, well-structured review skill: concrete commands and naming conventions, genuinely useful engine-specific divergence checklists, and a defined severity-ranked output format. The only weaknesses are small — no capture-verification checkpoint before diffing and no fallback for missing browser binaries.

DimensionReasoningScore

Conciseness

The body is lean and fully operational — no basic-concept explanations, and every line is either instruction or curated engine-divergence knowledge Claude cannot reliably recall unprompted ("Firefox's overlay scrollbar vs WebKit/Chromium's reserved gutter can shift layout width", "don't assume multi-browser config exists"). No section reads as padding, matching the 'every token earns its place' anchor.

5 / 5

Actionability

Concrete and mostly executable: a fixed viewport (992×900), a copy-paste command (`npx playwright test --project=chromium --project=firefox --project=webkit`), a capture naming convention (`<page-slug>-<engine>.png`), named risk features (`:has()`, container queries, `backdrop-filter`), and a worked findings example. Held at 4 rather than 5 because the primary Playwright-MCP capture path is described only in prose and there is no fallback command if an engine's browser binary is not installed.

4 / 5

Workflow Clarity

Phase 0–3 sequence is clear (Scope → Capture → Checklist → Findings) with an explicit side-by-side checklist and a severity-ranked output format including a good-vs-bad findings example. Missing an explicit checkpoint confirming all three engine captures succeeded and are viewport-comparable before diffing, and no recovery guidance for a failed engine launch, which keeps it below the 'explicit validation steps; feedback loops' anchor.

4 / 5

Progressive Disclosure

A single ~90-line SKILL.md with clean section headers and no bundle files; nothing at this size warrants splitting into reference files, and cross-skill routing pointers (`responsive-visual-review`, `playwright-testing`) are clearly signaled. This fits the well-organized single-file case the rubric treats as a 5.

5 / 5

Total

18

/

20

Passed

Description

82%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 strong description that clearly states what the skill does and when to use it, with excellent explicit disambiguation from neighboring skills. Its one flaw is voice: the second-person "Use when you need to check" triggers the rubric's third-person penalty, and a couple of high-frequency user phrases ("cross-browser", "Safari") are absent.

Suggestions

Rewrite in third person to avoid the voice penalty, e.g. "Checks browser-specific CSS/layout/JS rendering differences across Chromium, Firefox, and WebKit... Use before shipping a CSS/JS change or when investigating cross-engine compatibility issues."

Include the literal trigger phrases users actually type — "cross-browser" and "Safari" — alongside the engine names, e.g. "...differences across browsers (Chromium/Firefox/WebKit; Safari's engine is WebKit)".

DimensionReasoningScore

Specificity

The description names concrete objects and contexts — "check browser-specific CSS/layout/JS rendering differences (Chromium/Firefox/WebKit)" plus two use contexts — which on content alone fits the 'several specific actions; minor gaps' anchor (4). However, "Use when you need to check" is second-person voice ("you need"), which the guidelines explicitly penalize by one point, bringing it to 3.

3 / 5

Completeness

Explicitly answers both parts: what ("check browser-specific CSS/layout/JS rendering differences (Chromium/Firefox/WebKit)") and when ("before shipping a CSS/JS change or investigating compatibility issues across engines") with concrete trigger phrases — a direct match for the anchor-5 example structure.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "browser-specific", "rendering differences", "compatibility issues", "CSS/JS", and all three engine names. Not 5 because the phrases users most commonly say — "cross-browser" and "Safari" — never appear literally, leaving a few natural synonyms missing.

4 / 5

Distinctiveness Conflict Risk

Three explicit NOT-for clauses each route to a named alternative skill (responsive-visual-review, playwright-testing, polyfill design), establishing a clear niche with minimal conflict risk — stronger than the anchor-5 example, which has no such explicit disambiguation.

5 / 5

Total

17

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

vannifr/agent-skills

Path

skills/cross-browser-render-check/SKILL.md

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.