Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Front-End Checklist Global Audit — measured AI agent skill | DecimalAI

thedaviddias/frontend-checklist-global

NewSkillScoreMaintained

Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.

Frontendby thedaviddias

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

decimalai skills pull thedaviddias-frontend-checklist-global

Get this skill — curl · raw file

curl -fsSL https://app.decimal.ai/s/thedaviddias-frontend-checklist-global/SKILL.md

Raw file: /s/thedaviddias-frontend-checklist-global/SKILL.md ↗ · machine-readable summary at /s/thedaviddias-frontend-checklist-global.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 4h ago

—+142% tokens0% turns61% of whole cases pass with skill (14/23)

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%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

thedaviddias / front-end-checklist

skills/frontend-checklist-global/SKILL.md

View on GitHub ↗

Imported 8/3/2026Version v1Bundled 1 file

Skill contents

references/

SKILL.md

Front-End Checklist Global Audit

This skill connects one entry point to all 385 Front-End Checklist rules. Use MCP retrieval instead of trying to recall rules from memory.

Workflow

Start with review_code for pasted code, file contents, or focused code review.
Use audit_url for a public page when you need rendered HTML audited quickly.
Narrow or expand scope with search_rules, list_categories, get_workflow, or get_quick_reference.
For each issue, use get_rule, fix_rule, or explain_rule to give exact remediation.
If a checklist is a better fit than ad hoc search, use get_checklist_rules.

Audit Stance

Be conservative. Prefer fewer, stronger findings over speculative breadth.
Only report an issue when the code or markup shown supports it directly.
In small component or route audits, prefer the strongest 1-2 supported findings over listing every possible enhancement.
Do not infer business intent from a snippet alone. Example: do not assume a field is required unless the code or surrounding copy makes that explicit.
Do not treat alt="" as an issue by default; empty alt can be correct for decorative images.
When an image is explicitly decorative, prefer zero findings unless the snippet shows a concrete problem rather than a hypothetical optimization.
If you see an isolated decorative image like <img ... alt="" aria-hidden="true">, treat it as a zero-issue pattern unless the snippet also shows real evidence of layout instability.
Do not raise low-confidence preference tweaks as findings when the snippet is otherwise sound. Prefer silence over weak nitpicks.
Do not treat autocomplete="off" as a defect by itself unless the snippet shows a stronger user-harm or security reason to flag it.
In link-preview cards, decorative preview images and favicons may be safe when nearby visible text already names the destination.
Do not treat React or JSX fragments as full HTML documents unless the snippet includes real document context like <html>, <head>, or <body>.
When reviewing Next.js or metadata-driven page files, consider metadata, viewport, and generateMetadata APIs before claiming head-tag omissions.

Coverage Checklist

Forms: check labels, accessible button names, explicit button types, autocomplete hints, password-field autocomplete, and validation semantics that are explicit in the code.
Images: check 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.
Metadata: check title placement, canonical-url behavior, meta descriptions, Open Graph coverage, and structured data only when the file is responsible for metadata.
Motion: check expensive animated properties, prefer transform/opacity, and require prefers-reduced-motion handling for persistent motion.
Motion: when counters or visual widgets animate every frame, assess both reduced-motion support and whether the animation strategy adds unnecessary main-thread work.
Security: check target="_blank" links for noopener noreferrer, insecure form actions, password input best practices, and blocking third-party scripts.
Structure: check duplicate ids, list semantics, and table headers conservatively. For simple tables, column-header associations are stronger findings than speculative row-header or outer-layout landmark issues.
Structure: when a visible heading already introduces a simple table, treat missing captions as a lower-confidence improvement than missing header associations.

Rule-Derived Highlights

Set explicit width and height on images

Reserve findings for meaningful content images; decorative micro-SVGs or ornament-only assets are low-priority exceptions when CSS already reserves stable space
Example low-risk exception: <img src="/divider.svg" alt="" aria-hidden="true"> should not be flagged on its own without evidence of visible layout shift
Always set width and height attributes on <img> matching the image's intrinsic dimensions
Pair with height: auto in CSS to keep the image fluid while preserving the aspect ratio
Missing dimensions are the leading cause of Cumulative Layout Shift (CLS) from images

Hide decorative elements from assistive technology

Use alt='' (empty) for decorative images—not alt='image' or missing alt
Add aria-hidden='true' to decorative SVGs and icons
Use CSS background-image for purely decorative visuals
Role='presentation' removes semantic meaning from elements
Do not automatically raise performance findings on decorative micro-assets unless the snippet shows real layout instability

Use transform and opacity for animations

Only transform and opacity can be composited on the GPU without triggering layout
Use will-change: transform sparingly to promote an element to its own compositor layer
Prefer CSS transitions and animations over JavaScript animation libraries for simple effects
Respect prefers-reduced-motion to disable animations for users who need it

Respect reduced motion preferences

Use prefers-reduced-motion media query to disable non-essential animations
Never flash content more than 3 times per second (seizure risk)
Replace motion with opacity/color transitions when reduced motion is enabled
Provide user controls to pause or disable animations

Use semantic table markup for screen readers

Use <th> elements for headers with scope='col' or scope='row'
Add <caption> to describe the table's purpose
Never use tables for layout—use CSS Grid or Flexbox instead
Use id/headers for complex tables with merged cells
For simple tables with a clear adjacent section heading, missing scope is often a stronger finding than missing <caption>

Define proper table headers

Use <th> for all table headers, not <td>
Apply scope="col" or scope="row" to clarify header relationship
Ensure every data cell is associated with at least one header
In simple tables, prefer fixing header associations before escalating to caption-level recommendations
Missing scope="col" on a straightforward header row is often the clearest first fix

Minimize costly DOM read/write operations

Never interleave DOM reads (offsetHeight, getBoundingClientRect) with DOM writes (style changes)
Batch all reads first, then all writes
Use requestAnimationFrame for visual updates
Use DocumentFragment or innerHTML for bulk DOM insertion
Avoid per-frame React state updates across many visible components when a simpler CSS or reduced-frequency approach would work

Validate forms accessibly

Associate error messages with fields using aria-describedby
Use aria-invalid to indicate validation state
Mark required fields programmatically with required or aria-required
Provide inline error messages near the field
Don't rely solely on color to indicate errors

Secure password input fields

Use type='password' with correct autocomplete attribute
Provide accessible show/hide toggle for password visibility
Show password strength indicator with requirements
Never store or transmit passwords in plain text
Support password managers with proper input names

Provide visible custom focus indicators

Never use outline: none or outline: 0 without a visible :focus-visible replacement
Use :focus-visible instead of :focus to show indicators only during keyboard navigation
Focus indicators must have 3:1 contrast ratio against adjacent colors (WCAG 2.2)
Provide at least 2px solid outline with an offset for a high-quality focus ring
If a focus ring is drawn with pseudo-elements, verify it is anchored to the correct positioned element and not clipped by overflow: hidden

Known Safe Patterns

Decorative Divider

Safe example: <img src="/divider.svg" alt="" aria-hidden="true">
Treat this as a safe decorative pattern by default. Do not flag alt text or missing dimensions unless the snippet also shows a real layout-shift risk.

Client-Handled React Form

Safe example: <form onSubmit={event => event.preventDefault()}><label htmlFor="q">Search</label><input id="q" type="search" /></form>
Do not require method or action when client-side submit handling is explicit and the form controls are otherwise accessible.

Next Metadata API

Safe example: export async function generateMetadata() { return { title: 'Docs', description: 'Reference' } }
Do not infer missing canonical-url, meta description, or Open Graph tags just because literal <head> markup is absent from the component file.

Preview Card Images

Safe example: <img src={resource.image} alt="" className="object-cover" /><img src={favicon} alt="" width={20} height={20} />
In link-preview or resource-card UIs, decorative preview/favicons can legitimately use empty alt when adjacent text already provides the destination name. Do not invent responsive-image or layout-shift defects for tiny favicon assets without stronger evidence.

Aspect-Ratio Media Wrapper

Safe example: <div className="aspect-2/1 overflow-hidden"><img className="object-cover w-full h-full" ... /></div>
When a wrapper already reserves media space with a stable aspect ratio, do not automatically raise a missing dimensions finding for the child preview image.

Pseudo-Element Focus Ring

Safe example: focus-visible:outline-none focus-visible:after:ring-2 after:absolute after:inset-0
If focus styling depends on a pseudo-element, verify the ring is anchored to the correct positioned element. A removed native outline is only safe when the replacement ring is clearly reliable.

Per-Frame React Counter Animation

Safe example: requestAnimationFrame(animate); setCount(Math.floor(eased * target))
Repeated requestAnimationFrame state updates across multiple components are a concrete performance concern when shown directly in the code.

Simple Data Table Headers

Safe example: <thead><tr><th>Priority</th><th>Rule</th><th>Title</th></tr></thead>
For simple data tables, prefer conservative column-header findings before speculating about row headers or outer-layout landmarks.

Adjacent Heading + Table

Safe example: <h2>Issues</h2><table><thead>...</thead><tbody>...</tbody></table>
A nearby visible section heading may already provide table context. Prefer scope/header association findings before requiring a caption unless the table purpose is ambiguous.

Conflict Resolution

If decorative-image guidance and dimensions guidance conflict, decorative guidance wins unless the snippet shows visible layout instability.
Example zero-issue pattern: <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.
If a form is clearly handled client-side with onSubmit, do not require traditional server-post method or action attributes.
If a file uses Next.js metadata APIs, do not infer missing head tags from the absence of literal <meta> or canonical-url markup.

Coverage

accessibility: 89 rules (9 critical, 25 high)
css: 31 rules (10 high)
html: 34 rules (3 critical, 12 high)
i18n: 5 rules
images: 25 rules (1 critical, 15 high)
javascript: 26 rules (1 critical, 12 high)
performance: 42 rules (1 critical, 21 high)
privacy: 5 rules (2 high)
security: 22 rules (4 critical, 10 high)
seo: 93 rules (19 high)
testing: 13 rules (7 high)

Evaluation Standard

Prefer findings tied to exact files, routes, selectors, or code snippets.
Prioritize critical and high issues first.
Explain uncertainty instead of overstating when the snippet does not show enough context.
Avoid generic advice when the MCP tools can retrieve a rule or fix prompt.
When no issue is found automatically, use 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

Want to see if thedaviddias/frontend-checklist-global would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.