Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.
.claude/skills/thedaviddias-frontend-checklist-global/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-02 | ✗→✓ | ▲ Improved | 284% | 0% |
| case-05 | ✗→✓ | ▲ Improved | 99% | 0% |
| case-12 | ✗→✓ | ▲ Improved | 114% | 0% |
| case-04 | ✓→✗ | ▼ Worse | 79% | 0% |
| case-07 | ✓→✗ | ▼ Worse | 103% | 0% |
This skill connects one entry point to all 385 Front-End Checklist rules. Use MCP retrieval instead of trying to recall rules from memory.
review_code for pasted code, file contents, or focused code review.audit_url for a public page when you need rendered HTML audited quickly.search_rules, list_categories, get_workflow, or get_quick_reference.get_rule, fix_rule, or explain_rule to give exact remediation.get_checklist_rules.alt="" as an issue by default; empty alt can be correct for decorative images.<img ... alt="" aria-hidden="true">, treat it as a zero-issue pattern unless the snippet also shows real evidence of layout instability.autocomplete="off" as a defect by itself unless the snippet shows a stronger user-harm or security reason to flag it.<html>, <head>, or <body>.metadata, viewport, and generateMetadata APIs before claiming head-tag omissions.autocomplete hints, password-field autocomplete, and validation semantics that are explicit in the code.width/height, loading, srcset/sizes, and whether image semantics are clearly meaningful or decorative. Do not assume tiny SVG logos or clearly decorative assets must be lazy-loaded, and do not demand explicit dimensions for tiny ornamental dividers unless the snippet shows a real layout-shift risk. If an image is both decorative and hidden from assistive tech, bias strongly toward no finding.prefers-reduced-motion handling for persistent motion.target="_blank" links for noopener noreferrer, insecure form actions, password input best practices, and blocking third-party scripts.<img src="/divider.svg" alt="" aria-hidden="true"> should not be flagged on its own without evidence of visible layout shiftwidth and height attributes on <img> matching the image's intrinsic dimensionsheight: auto in CSS to keep the image fluid while preserving the aspect ratioscope is often a stronger finding than missing <caption><th> for all table headers, not <td>scope="col" or scope="row" to clarify header relationshipscope="col" on a straightforward header row is often the clearest first fixrequired or aria-requiredoverflow: hidden<img src="/divider.svg" alt="" aria-hidden="true"><form onSubmit={event => event.preventDefault()}><label htmlFor="q">Search</label><input id="q" type="search" /></form>method or action when client-side submit handling is explicit and the form controls are otherwise accessible.export async function generateMetadata() { return { title: 'Docs', description: 'Reference' } }<head> markup is absent from the component file.<img src={resource.image} alt="" className="object-cover" /><img src={favicon} alt="" width={20} height={20} /><div className="aspect-2/1 overflow-hidden"><img className="object-cover w-full h-full" ... /></div>focus-visible:outline-none focus-visible:after:ring-2 after:absolute after:inset-0requestAnimationFrame(animate); setCount(Math.floor(eased * target))<thead><tr><th>Priority</th><th>Rule</th><th>Title</th></tr></thead><h2>Issues</h2><table><thead>...</thead><tbody>...</tbody></table><img src="/divider.svg" alt="" aria-hidden="true"> in an isolated component should not be flagged for alt text or dimensions unless the snippet also shows real layout-shift evidence.onSubmit, do not require traditional server-post method or action attributes.<meta> or canonical-url markup.search_rules to broaden review coverage before concluding clean.See references/categories.md for category coverage and tool routing.
MCP docs: https://frontendchecklist.io/en/mcp
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | pass→pass | 20,434 | 13,918 | -32% | 1 | 1 | 0% | 3,961 | 5,513 | +39% | 0 | 0 | — |
case-02 | fail→pass | 10,868 | 15,147 | +39% | 1 | 1 | 0% | 1,285 | 4,934 | +284% | 0 | 0 | — |
case-03 | pass→pass | 9,571 | 12,993 | +36% | 1 | 1 | 0% | 1,755 | 4,616 | +163% | 0 | 0 | — |
case-04 | pass→fail | 9,147 | 10,081 | +10% | 1 | 1 | 0% | 1,746 | 3,118 | +79% | 0 | 0 | — |
case-05 | fail→pass | 8,779 | 5,983 | -32% | 1 | 1 | 0% | 1,644 | 3,272 | +99% | 0 | 0 | — |
case-06 | pass→pass | 10,595 | 5,558 | -48% | 1 | 1 | 0% | 1,877 | 3,739 | +99% | 0 | 0 | — |
case-07 | pass→fail | 8,301 | 5,277 | -36% | 1 | 1 | 0% | 1,511 | 3,063 | +103% | 0 | 0 | — |
case-08 | pass→fail | 11,498 | 9,905 | -14% | 1 | 1 | 0% | 2,228 | 3,583 | +61% | 0 | 0 | — |
case-09 | pass→pass | 10,823 | 6,780 | -37% | 1 | 1 | 0% | 1,853 | 4,051 | +119% | 0 | 0 | — |
case-10 | pass→pass | 6,818 | 7,019 | +3% | 1 | 1 | 0% | 1,182 | 3,387 | +187% | 0 | 0 | — |
case-11 | pass→pass | 8,201 | 5,286 | -36% | 1 | 1 | 0% | 1,620 | 3,754 | +132% | 0 | 0 | — |
case-12 | fail→pass | 8,580 | 6,336 | -26% | 1 | 1 | 0% | 1,622 | 3,469 | +114% | 0 | 0 | — |
case-13 | fail→fail | 7,295 | 4,427 | -39% | 1 | 1 | 0% | 1,314 | 3,029 | +131% | 0 | 0 | — |
case-14 | pass→fail | 5,926 | 4,963 | -16% | 1 | 1 | 0% | 1,247 | 3,023 | +142% | 0 | 0 | — |
case-15 | pass→pass | 4,355 | 4,710 | +8% | 1 | 1 | 0% | 839 | 3,756 | +348% | 0 | 0 | — |
case-16 | pass→pass | 5,909 | 8,893 | +50% | 1 | 1 | 0% | 1,032 | 3,745 | +263% | 0 | 0 | — |
case-17 | pass→fail | 6,096 | 4,745 | -22% | 1 | 1 | 0% | 1,169 | 2,882 | +147% | 0 | 0 | — |
case-18 | pass→pass | 9,449 | 6,463 | -32% | 1 | 1 | 0% | 1,866 | 3,989 | +114% | 0 | 0 | — |
case-19 | pass→fail | 3,862 | 4,479 | +16% | 1 | 1 | 0% | 693 | 2,927 | +322% | 0 | 0 | — |
case-20 | pass→pass | 5,683 | 3,306 | -42% | 1 | 1 | 0% | 1,066 | 3,255 | +205% | 0 | 0 | — |
case-21 | pass→pass | 4,979 | 3,519 | -29% | 1 | 1 | 0% | 1,020 | 3,313 | +225% | 0 | 0 | — |
case-22 | pass→fail | 8,897 | 4,367 | -51% | 1 | 1 | 0% | 1,950 | 2,918 | +50% | 0 | 0 | — |
case-23 | pass→fail | 8,698 | 4,231 | -51% | 1 | 1 | 0% | 1,928 | 2,866 | +49% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted, and 14 counted toward the lift figure. The other 9 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of -22 percentage points is the difference between those two pass rates over the 14 comparable cases. 8 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.