[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M727FWQZJ2G3MEME77RK6KPS":3,"skill-same:01M727FWQZJ2G3MEME77RK6KPS":61},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":31,"commitSha":32,"skillDirectory":33,"forksCount":34,"repositoryHtmlUrl":35,"repositoryHomepageUrl":36,"ownerHtmlUrl":37,"ownerBlogUrl":38,"ownerDescription":39,"updatedAt":40,"install":41,"resources":54},"01M727FWQZJ2G3MEME77RK6KPS","frontend-checklist-global",null,"Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.","thedaviddias\u002FFront-End-Checklist","thedaviddias","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F237229?v=4","01M6CT5P9WB8TP86JZM77HECAD","David Dias","01M727F1X7RZC3SDR8JFKFFXFE",74715,"MIT","https:\u002F\u002Fgithub.com\u002Fthedaviddias\u002FFront-End-Checklist\u002Fblob\u002Fmain\u002Fplugins\u002Ffront-end-checklist\u002Fskills\u002Ffrontend-checklist-global\u002FSKILL.md",[],[],"2026-11-10 16:06:43",false,"---\nname: frontend-checklist-global\ndescription: \"Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.\"\nmetadata:\n  category: global\n  priority: high\n  difficulty: intermediate\n  estimatedTime: \"30\"\n  source: frontendchecklist.io\n  url: https:\u002F\u002Ffrontendchecklist.io\u002Fmcp\n---\n\n# Front-End Checklist Global Audit\n\nThis skill connects one entry point to all 386 Front-End Checklist rules.\nUse MCP retrieval instead of trying to recall rules from memory.\n\n## Workflow\n\n1. Start with `review_code` for pasted code, file contents, or focused code review.\n2. Use `audit_url` for a public page when you need rendered HTML audited quickly.\n3. Narrow or expand scope with `search_rules`, `list_categories`, `get_workflow`, or `get_quick_reference`.\n4. For each issue, use `get_rule`, `fix_rule`, or `explain_rule` to give exact remediation.\n5. If a checklist is a better fit than ad hoc search, use `get_checklist_rules`.\n\n## Audit Stance\n\n- Be conservative. Prefer fewer, stronger findings over speculative breadth.\n- Only report an issue when the code or markup shown supports it directly.\n- In small component or route audits, prefer the strongest 1-2 supported findings over listing every possible enhancement.\n- 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.\n- Do not treat `alt=\"\"` as an issue by default; empty alt can be correct for decorative images.\n- When an image is explicitly decorative, prefer zero findings unless the snippet shows a concrete problem rather than a hypothetical optimization.\n- If you see an isolated decorative image like `\u003Cimg ... alt=\"\" aria-hidden=\"true\">`, treat it as a zero-issue pattern unless the snippet also shows real evidence of layout instability.\n- Do not raise low-confidence preference tweaks as findings when the snippet is otherwise sound. Prefer silence over weak nitpicks.\n- Do not treat `autocomplete=\"off\"` as a defect by itself unless the snippet shows a stronger user-harm or security reason to flag it.\n- In link-preview cards, decorative preview images and favicons may be safe when nearby visible text already names the destination.\n- Do not treat React or JSX fragments as full HTML documents unless the snippet includes real document context like `\u003Chtml>`, `\u003Chead>`, or `\u003Cbody>`.\n- When reviewing Next.js or metadata-driven page files, consider `metadata`, `viewport`, and `generateMetadata` APIs before claiming head-tag omissions.\n\n## Coverage Checklist\n\n- Forms: check labels, accessible button names, explicit button types, `autocomplete` hints, password-field autocomplete, and validation semantics that are explicit in the code.\n- Images: check `width`\u002F`height`, `loading`, `srcset`\u002F`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.\n- Metadata: check title placement, canonical-url behavior, meta descriptions, Open Graph coverage, and structured data only when the file is responsible for metadata.\n- Motion: check expensive animated properties, prefer transform\u002Fopacity, and require `prefers-reduced-motion` handling for persistent motion.\n- Motion: when counters or visual widgets animate every frame, assess both reduced-motion support and whether the animation strategy adds unnecessary main-thread work.\n- Security: check `target=\"_blank\"` links for `noopener noreferrer`, insecure form actions, password input best practices, and blocking third-party scripts.\n- 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.\n- Structure: when a visible heading already introduces a simple table, treat missing captions as a lower-confidence improvement than missing header associations.\n\n## Rule-Derived Highlights\n\n### Set explicit width and height on images\n- Reserve findings for meaningful content images; decorative micro-SVGs or ornament-only assets are low-priority exceptions when CSS already reserves stable space\n- Example low-risk exception: `\u003Cimg src=\"\u002Fdivider.svg\" alt=\"\" aria-hidden=\"true\">` should not be flagged on its own without evidence of visible layout shift\n- Always set `width` and `height` attributes on `\u003Cimg>` matching the image's intrinsic dimensions\n- Pair with `height: auto` in CSS to keep the image fluid while preserving the aspect ratio\n- Missing dimensions are the leading cause of Cumulative Layout Shift (CLS) from images\n\n### Hide decorative elements from assistive technology\n- Use alt='' (empty) for decorative images—not alt='image' or missing alt\n- Add aria-hidden='true' to decorative SVGs and icons\n- Use CSS background-image for purely decorative visuals\n- Role='presentation' removes semantic meaning from elements\n- Do not automatically raise performance findings on decorative micro-assets unless the snippet shows real layout instability\n\n### Use transform and opacity for animations\n- Only transform and opacity can be composited on the GPU without triggering layout\n- Use will-change: transform sparingly to promote an element to its own compositor layer\n- Prefer CSS transitions and animations over JavaScript animation libraries for simple effects\n- Respect prefers-reduced-motion to disable animations for users who need it\n\n### Respect reduced motion preferences\n- Use prefers-reduced-motion media query to disable non-essential animations\n- Never flash content more than 3 times per second (seizure risk)\n- Replace motion with opacity\u002Fcolor transitions when reduced motion is enabled\n- Provide user controls to pause or disable animations\n\n### Use semantic table markup for screen readers\n- Use \u003Cth> elements for headers with scope='col' or scope='row'\n- Add \u003Ccaption> to describe the table's purpose\n- Never use tables for layout—use CSS Grid or Flexbox instead\n- Use id\u002Fheaders for complex tables with merged cells\n- For simple tables with a clear adjacent section heading, missing `scope` is often a stronger finding than missing `\u003Ccaption>`\n\n### Define proper table headers\n- Use `\u003Cth>` for all table headers, not `\u003Ctd>`\n- Apply `scope=\"col\"` or `scope=\"row\"` to clarify header relationship\n- Ensure every data cell is associated with at least one header\n- In simple tables, prefer fixing header associations before escalating to caption-level recommendations\n- Missing `scope=\"col\"` on a straightforward header row is often the clearest first fix\n\n### Minimize costly DOM read\u002Fwrite operations\n- Never interleave DOM reads (offsetHeight, getBoundingClientRect) with DOM writes (style changes)\n- Batch all reads first, then all writes\n- Use requestAnimationFrame for visual updates\n- Use DocumentFragment or innerHTML for bulk DOM insertion\n- Avoid per-frame React state updates across many visible components when a simpler CSS or reduced-frequency approach would work\n\n### Validate forms accessibly\n- Associate error messages with fields using aria-describedby\n- Use aria-invalid to indicate validation state\n- Mark required fields programmatically with `required` or `aria-required`\n- Provide inline error messages near the field\n- Don't rely solely on color to indicate errors\n\n### Secure password input fields\n- Use type='password' with correct autocomplete attribute\n- Provide accessible show\u002Fhide toggle for password visibility\n- Show password strength indicator with requirements\n- Never store or transmit passwords in plain text\n- Support password managers with proper input names\n\n### Provide visible custom focus indicators\n- Never use outline: none or outline: 0 without a visible :focus-visible replacement\n- Use :focus-visible instead of :focus to show indicators only during keyboard navigation\n- Focus indicators must have 3:1 contrast ratio against adjacent colors (WCAG 2.2)\n- Provide at least 2px solid outline with an offset for a high-quality focus ring\n- If a focus ring is drawn with pseudo-elements, verify it is anchored to the correct positioned element and not clipped by `overflow: hidden`\n\n## Known Safe Patterns\n\n### Decorative Divider\n- Safe example: `\u003Cimg src=\"\u002Fdivider.svg\" alt=\"\" aria-hidden=\"true\">`\n- 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.\n\n### Client-Handled React Form\n- Safe example: `\u003Cform onSubmit={event => event.preventDefault()}>\u003Clabel htmlFor=\"q\">Search\u003C\u002Flabel>\u003Cinput id=\"q\" type=\"search\" \u002F>\u003C\u002Fform>`\n- Do not require `method` or `action` when client-side submit handling is explicit and the form controls are otherwise accessible.\n\n### Next Metadata API\n- Safe example: `export async function generateMetadata() { return { title: 'Docs', description: 'Reference' } }`\n- Do not infer missing canonical-url, meta description, or Open Graph tags just because literal `\u003Chead>` markup is absent from the component file.\n\n### Preview Card Images\n- Safe example: `\u003Cimg src={resource.image} alt=\"\" className=\"object-cover\" \u002F>\u003Cimg src={favicon} alt=\"\" width={20} height={20} \u002F>`\n- In link-preview or resource-card UIs, decorative preview\u002Ffavicons 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.\n\n### Aspect-Ratio Media Wrapper\n- Safe example: `\u003Cdiv className=\"aspect-2\u002F1 overflow-hidden\">\u003Cimg className=\"object-cover w-full h-full\" ... \u002F>\u003C\u002Fdiv>`\n- 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.\n\n### Pseudo-Element Focus Ring\n- Safe example: `focus-visible:outline-none focus-visible:after:ring-2 after:absolute after:inset-0`\n- 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.\n\n### Per-Frame React Counter Animation\n- Safe example: `requestAnimationFrame(animate); setCount(Math.floor(eased * target))`\n- Repeated requestAnimationFrame state updates across multiple components are a concrete performance concern when shown directly in the code.\n\n### Simple Data Table Headers\n- Safe example: `\u003Cthead>\u003Ctr>\u003Cth>Priority\u003C\u002Fth>\u003Cth>Rule\u003C\u002Fth>\u003Cth>Title\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>`\n- For simple data tables, prefer conservative column-header findings before speculating about row headers or outer-layout landmarks.\n\n### Adjacent Heading + Table\n- Safe example: `\u003Ch2>Issues\u003C\u002Fh2>\u003Ctable>\u003Cthead>...\u003C\u002Fthead>\u003Ctbody>...\u003C\u002Ftbody>\u003C\u002Ftable>`\n- A nearby visible section heading may already provide table context. Prefer scope\u002Fheader association findings before requiring a caption unless the table purpose is ambiguous.\n\n## Conflict Resolution\n\n- If decorative-image guidance and dimensions guidance conflict, decorative guidance wins unless the snippet shows visible layout instability.\n- Example zero-issue pattern: `\u003Cimg src=\"\u002Fdivider.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.\n- If a form is clearly handled client-side with `onSubmit`, do not require traditional server-post `method` or `action` attributes.\n- If a file uses Next.js metadata APIs, do not infer missing head tags from the absence of literal `\u003Cmeta>` or canonical-url markup.\n\n## Coverage\n\n- accessibility: 89 rules (9 critical, 25 high)\n- css: 31 rules (10 high)\n- html: 34 rules (3 critical, 12 high)\n- i18n: 5 rules\n- images: 25 rules (1 critical, 15 high)\n- javascript: 26 rules (1 critical, 12 high)\n- performance: 43 rules (1 critical, 22 high)\n- privacy: 5 rules (2 high)\n- security: 22 rules (4 critical, 10 high)\n- seo: 93 rules (19 high)\n- testing: 13 rules (7 high)\n\n## Evaluation Standard\n\n- Prefer findings tied to exact files, routes, selectors, or code snippets.\n- Prioritize critical and high issues first.\n- Explain uncertainty instead of overstating when the snippet does not show enough context.\n- Avoid generic advice when the MCP tools can retrieve a rule or fix prompt.\n- When no issue is found automatically, use `search_rules` to broaden review coverage before concluding clean.\n\n---\n\nSee `references\u002Fcategories.md` for category coverage and tool routing.\n\nMCP docs: https:\u002F\u002Ffrontendchecklist.io\u002Fmcp\n","# Front-End Checklist Global Audit\n\nThis skill connects one entry point to all 386 Front-End Checklist rules.\nUse MCP retrieval instead of trying to recall rules from memory.\n\n## Workflow\n\n1. Start with `review_code` for pasted code, file contents, or focused code review.\n2. Use `audit_url` for a public page when you need rendered HTML audited quickly.\n3. Narrow or expand scope with `search_rules`, `list_categories`, `get_workflow`, or `get_quick_reference`.\n4. For each issue, use `get_rule`, `fix_rule`, or `explain_rule` to give exact remediation.\n5. If a checklist is a better fit than ad hoc search, use `get_checklist_rules`.\n\n## Audit Stance\n\n- Be conservative. Prefer fewer, stronger findings over speculative breadth.\n- Only report an issue when the code or markup shown supports it directly.\n- In small component or route audits, prefer the strongest 1-2 supported findings over listing every possible enhancement.\n- 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.\n- Do not treat `alt=\"\"` as an issue by default; empty alt can be correct for decorative images.\n- When an image is explicitly decorative, prefer zero findings unless the snippet shows a concrete problem rather than a hypothetical optimization.\n- If you see an isolated decorative image like `\u003Cimg ... alt=\"\" aria-hidden=\"true\">`, treat it as a zero-issue pattern unless the snippet also shows real evidence of layout instability.\n- Do not raise low-confidence preference tweaks as findings when the snippet is otherwise sound. Prefer silence over weak nitpicks.\n- Do not treat `autocomplete=\"off\"` as a defect by itself unless the snippet shows a stronger user-harm or security reason to flag it.\n- In link-preview cards, decorative preview images and favicons may be safe when nearby visible text already names the destination.\n- Do not treat React or JSX fragments as full HTML documents unless the snippet includes real document context like `\u003Chtml>`, `\u003Chead>`, or `\u003Cbody>`.\n- When reviewing Next.js or metadata-driven page files, consider `metadata`, `viewport`, and `generateMetadata` APIs before claiming head-tag omissions.\n\n## Coverage Checklist\n\n- Forms: check labels, accessible button names, explicit button types, `autocomplete` hints, password-field autocomplete, and validation semantics that are explicit in the code.\n- Images: check `width`\u002F`height`, `loading`, `srcset`\u002F`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.\n- Metadata: check title placement, canonical-url behavior, meta descriptions, Open Graph coverage, and structured data only when the file is responsible for metadata.\n- Motion: check expensive animated properties, prefer transform\u002Fopacity, and require `prefers-reduced-motion` handling for persistent motion.\n- Motion: when counters or visual widgets animate every frame, assess both reduced-motion support and whether the animation strategy adds unnecessary main-thread work.\n- Security: check `target=\"_blank\"` links for `noopener noreferrer`, insecure form actions, password input best practices, and blocking third-party scripts.\n- 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.\n- Structure: when a visible heading already introduces a simple table, treat missing captions as a lower-confidence improvement than missing header associations.\n\n## Rule-Derived Highlights\n\n### Set explicit width and height on images\n- Reserve findings for meaningful content images; decorative micro-SVGs or ornament-only assets are low-priority exceptions when CSS already reserves stable space\n- Example low-risk exception: `\u003Cimg src=\"\u002Fdivider.svg\" alt=\"\" aria-hidden=\"true\">` should not be flagged on its own without evidence of visible layout shift\n- Always set `width` and `height` attributes on `\u003Cimg>` matching the image's intrinsic dimensions\n- Pair with `height: auto` in CSS to keep the image fluid while preserving the aspect ratio\n- Missing dimensions are the leading cause of Cumulative Layout Shift (CLS) from images\n\n### Hide decorative elements from assistive technology\n- Use alt='' (empty) for decorative images—not alt='image' or missing alt\n- Add aria-hidden='true' to decorative SVGs and icons\n- Use CSS background-image for purely decorative visuals\n- Role='presentation' removes semantic meaning from elements\n- Do not automatically raise performance findings on decorative micro-assets unless the snippet shows real layout instability\n\n### Use transform and opacity for animations\n- Only transform and opacity can be composited on the GPU without triggering layout\n- Use will-change: transform sparingly to promote an element to its own compositor layer\n- Prefer CSS transitions and animations over JavaScript animation libraries for simple effects\n- Respect prefers-reduced-motion to disable animations for users who need it\n\n### Respect reduced motion preferences\n- Use prefers-reduced-motion media query to disable non-essential animations\n- Never flash content more than 3 times per second (seizure risk)\n- Replace motion with opacity\u002Fcolor transitions when reduced motion is enabled\n- Provide user controls to pause or disable animations\n\n### Use semantic table markup for screen readers\n- Use \u003Cth> elements for headers with scope='col' or scope='row'\n- Add \u003Ccaption> to describe the table's purpose\n- Never use tables for layout—use CSS Grid or Flexbox instead\n- Use id\u002Fheaders for complex tables with merged cells\n- For simple tables with a clear adjacent section heading, missing `scope` is often a stronger finding than missing `\u003Ccaption>`\n\n### Define proper table headers\n- Use `\u003Cth>` for all table headers, not `\u003Ctd>`\n- Apply `scope=\"col\"` or `scope=\"row\"` to clarify header relationship\n- Ensure every data cell is associated with at least one header\n- In simple tables, prefer fixing header associations before escalating to caption-level recommendations\n- Missing `scope=\"col\"` on a straightforward header row is often the clearest first fix\n\n### Minimize costly DOM read\u002Fwrite operations\n- Never interleave DOM reads (offsetHeight, getBoundingClientRect) with DOM writes (style changes)\n- Batch all reads first, then all writes\n- Use requestAnimationFrame for visual updates\n- Use DocumentFragment or innerHTML for bulk DOM insertion\n- Avoid per-frame React state updates across many visible components when a simpler CSS or reduced-frequency approach would work\n\n### Validate forms accessibly\n- Associate error messages with fields using aria-describedby\n- Use aria-invalid to indicate validation state\n- Mark required fields programmatically with `required` or `aria-required`\n- Provide inline error messages near the field\n- Don't rely solely on color to indicate errors\n\n### Secure password input fields\n- Use type='password' with correct autocomplete attribute\n- Provide accessible show\u002Fhide toggle for password visibility\n- Show password strength indicator with requirements\n- Never store or transmit passwords in plain text\n- Support password managers with proper input names\n\n### Provide visible custom focus indicators\n- Never use outline: none or outline: 0 without a visible :focus-visible replacement\n- Use :focus-visible instead of :focus to show indicators only during keyboard navigation\n- Focus indicators must have 3:1 contrast ratio against adjacent colors (WCAG 2.2)\n- Provide at least 2px solid outline with an offset for a high-quality focus ring\n- If a focus ring is drawn with pseudo-elements, verify it is anchored to the correct positioned element and not clipped by `overflow: hidden`\n\n## Known Safe Patterns\n\n### Decorative Divider\n- Safe example: `\u003Cimg src=\"\u002Fdivider.svg\" alt=\"\" aria-hidden=\"true\">`\n- 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.\n\n### Client-Handled React Form\n- Safe example: `\u003Cform onSubmit={event => event.preventDefault()}>\u003Clabel htmlFor=\"q\">Search\u003C\u002Flabel>\u003Cinput id=\"q\" type=\"search\" \u002F>\u003C\u002Fform>`\n- Do not require `method` or `action` when client-side submit handling is explicit and the form controls are otherwise accessible.\n\n### Next Metadata API\n- Safe example: `export async function generateMetadata() { return { title: 'Docs', description: 'Reference' } }`\n- Do not infer missing canonical-url, meta description, or Open Graph tags just because literal `\u003Chead>` markup is absent from the component file.\n\n### Preview Card Images\n- Safe example: `\u003Cimg src={resource.image} alt=\"\" className=\"object-cover\" \u002F>\u003Cimg src={favicon} alt=\"\" width={20} height={20} \u002F>`\n- In link-preview or resource-card UIs, decorative preview\u002Ffavicons 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.\n\n### Aspect-Ratio Media Wrapper\n- Safe example: `\u003Cdiv className=\"aspect-2\u002F1 overflow-hidden\">\u003Cimg className=\"object-cover w-full h-full\" ... \u002F>\u003C\u002Fdiv>`\n- 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.\n\n### Pseudo-Element Focus Ring\n- Safe example: `focus-visible:outline-none focus-visible:after:ring-2 after:absolute after:inset-0`\n- 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.\n\n### Per-Frame React Counter Animation\n- Safe example: `requestAnimationFrame(animate); setCount(Math.floor(eased * target))`\n- Repeated requestAnimationFrame state updates across multiple components are a concrete performance concern when shown directly in the code.\n\n### Simple Data Table Headers\n- Safe example: `\u003Cthead>\u003Ctr>\u003Cth>Priority\u003C\u002Fth>\u003Cth>Rule\u003C\u002Fth>\u003Cth>Title\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>`\n- For simple data tables, prefer conservative column-header findings before speculating about row headers or outer-layout landmarks.\n\n### Adjacent Heading + Table\n- Safe example: `\u003Ch2>Issues\u003C\u002Fh2>\u003Ctable>\u003Cthead>...\u003C\u002Fthead>\u003Ctbody>...\u003C\u002Ftbody>\u003C\u002Ftable>`\n- A nearby visible section heading may already provide table context. Prefer scope\u002Fheader association findings before requiring a caption unless the table purpose is ambiguous.\n\n## Conflict Resolution\n\n- If decorative-image guidance and dimensions guidance conflict, decorative guidance wins unless the snippet shows visible layout instability.\n- Example zero-issue pattern: `\u003Cimg src=\"\u002Fdivider.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.\n- If a form is clearly handled client-side with `onSubmit`, do not require traditional server-post `method` or `action` attributes.\n- If a file uses Next.js metadata APIs, do not infer missing head tags from the absence of literal `\u003Cmeta>` or canonical-url markup.\n\n## Coverage\n\n- accessibility: 89 rules (9 critical, 25 high)\n- css: 31 rules (10 high)\n- html: 34 rules (3 critical, 12 high)\n- i18n: 5 rules\n- images: 25 rules (1 critical, 15 high)\n- javascript: 26 rules (1 critical, 12 high)\n- performance: 43 rules (1 critical, 22 high)\n- privacy: 5 rules (2 high)\n- security: 22 rules (4 critical, 10 high)\n- seo: 93 rules (19 high)\n- testing: 13 rules (7 high)\n\n## Evaluation Standard\n\n- Prefer findings tied to exact files, routes, selectors, or code snippets.\n- Prioritize critical and high issues first.\n- Explain uncertainty instead of overstating when the snippet does not show enough context.\n- Avoid generic advice when the MCP tools can retrieve a rule or fix prompt.\n- When no issue is found automatically, use `search_rules` to broaden review coverage before concluding clean.\n\n---\n\nSee `references\u002Fcategories.md` for category coverage and tool routing.\n\nMCP docs: https:\u002F\u002Ffrontendchecklist.io\u002Fmcp\n",{"name":5,"metadata":24,"description":7},{"url":25,"source":26,"category":27,"priority":28,"difficulty":29,"estimatedTime":30},"https:\u002F\u002Ffrontendchecklist.io\u002Fmcp","frontendchecklist.io","global","high","intermediate","30","main","e8d14d049010e2ce25afcd5e8609dfcbbe63e47e","plugins\u002Ffront-end-checklist\u002Fskills\u002Ffrontend-checklist-global",6781,"https:\u002F\u002Fgithub.com\u002Fthedaviddias\u002FFront-End-Checklist","https:\u002F\u002Ffrontendchecklist.io","https:\u002F\u002Fgithub.com\u002Fthedaviddias","https:\u002F\u002Fthedaviddias.com","Staff Front-End Engineer | Front-End Architecture, Design Systems & Accessibility | Creator of the Front-End Checklist (74K+ ⭐) and serving 100K+ devs","2026-10-31 13:44:22",{"source":8,"skillName":5,"commands":42,"prompt":52,"zipAvailable":53},[43,46,49],{"tool":44,"command":45},"npx","npx skills add thedaviddias\u002FFront-End-Checklist --skill frontend-checklist-global",{"tool":47,"command":48},"bunx","bunx skills add thedaviddias\u002FFront-End-Checklist --skill frontend-checklist-global",{"tool":50,"command":51},"pnpm","pnpm dlx skills add thedaviddias\u002FFront-End-Checklist --skill frontend-checklist-global","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fthedaviddias\u002FFront-End-Checklist\u002Fblob\u002Fmain\u002Fplugins\u002Ffront-end-checklist\u002Fskills\u002Ffrontend-checklist-global\u002FSKILL.md",true,[55],{"path":56,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":59,"sourceHtmlUrl":60},"references\u002Fcategories.md","REFERENCE","参考文档",8606,"https:\u002F\u002Fgithub.com\u002Fthedaviddias\u002FFront-End-Checklist\u002Fblob\u002Fmain\u002Fplugins\u002Ffront-end-checklist\u002Fskills\u002Ffrontend-checklist-global\u002Freferences\u002Fcategories.md",[]]