thedaviddias/front-end-checklist
58 skills
$npx skills add thedaviddias/front-end-checklistSkillInstalls
404-pageUse when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page.about-pageUse when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page.accessibility-testingUse when reviewing component libraries, page flows, or CI pipelines that need repeatable accessibility checks.accessible-authenticationUse when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows.accessible-notificationsUse when reviewing templates, rendered HTML, or shared components related to Make notifications accessible.accessible-tablesUse when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic table markup for screen readers.accessible-tooltipsUse when reviewing templates, rendered HTML, or shared components related to Create accessible tooltips.accesskeysUse when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure accesskey values are unique.accordion-accessibilityUse when reviewing templates, rendered HTML, or shared components related to Make accordions keyboard navigable.affiliate-disclosureUse when auditing metadata, crawlability, structured data, or indexability related to Provide clear affiliate disclosures.ai-contentUse when auditing metadata, crawlability, structured data, or indexability related to Audit and refine AI-generated content.all-noindex-pagesUse when auditing metadata, crawlability, structured data, or indexability related to Audit all noindex pages.alt-textUse when reviewing image assets, markup, and CDN or build transforms related to Provide meaningful alt text for images.anchor-smooth-scrollUse when reviewing rendered HTML, interactive components, or design-system patterns related to Provide instant anchor scroll option.anchor-textUse when auditing metadata, crawlability, structured data, or indexability related to Use descriptive anchor text.animated-contentUse when auditing slow page loads, heavy assets, or rendering delays related to Convert animated GIFs to video.animation-performanceUse when reviewing stylesheets, component styles, and responsive behavior related to Use transform and opacity for animations.aria-allowed-attrUse when reviewing rendered HTML, interactive components, or design-system patterns related to Use only allowed ARIA attributes for each role.aria-command-nameUse when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for ARIA command elements.aria-deprecated-roleUse when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid using deprecated ARIA roles.aria-dialog-nameUse when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure dialogs have an accessible name.aria-hidden-bodyUse when reviewing rendered HTML, interactive components, or design-system patterns related to Do not use aria-hidden on the document body.aria-hidden-focusUse when reviewing rendered HTML, interactive components, or design-system patterns related to Remove focusable elements from aria-hidden containers.aria-input-field-nameUse when applies to all `<input>` (except type=hidden), `<textarea>`, `<select>`, and custom form widgets using role=textbox, role=combobox, role=spinbutton,…aria-labelsUse when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for all interactive elements.aria-live-regionsUse when reviewing rendered HTML, interactive components, or design-system patterns related to Announce dynamic content with ARIA live regions.aria-meter-nameUse when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for meter elements.aria-progressbar-nameUse when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for progress bars.aria-required-attrUse when reviewing rendered HTML, interactive components, or design-system patterns related to Include required ARIA attributes for roles.aria-required-childrenUse when applies to custom ARIA widgets using composite roles: tablist, list, listbox, menu, menubar, tree, treegrid, grid, rowgroup, row, radiogroup.aria-required-parentUse when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure ARIA roles are contained by required parent roles.aria-rolesUse when reviewing rendered HTML, interactive components, or design-system patterns related to Use valid ARIA role values.aria-textUse when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid focusable descendants in role='text' elements.aria-toggle-field-nameUse when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for toggle fields.aria-tooltip-nameUse when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for tooltips.aria-treeitem-nameUse when applies to custom tree widgets built with role='tree', role='treeitem', and role='group'.aria-valid-attrUse when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure ARIA attributes are valid.aria-valid-attr-valueUse when reviewing rendered HTML, interactive components, or design-system patterns related to Use valid values for ARIA attributes.articleUse when auditing metadata, crawlability, structured data, or indexability related to Implement valid Article structured data.article-linksUse when auditing metadata, crawlability, structured data, or indexability related to Optimize article link density.audio-descriptionsUse when reviewing rendered HTML, interactive components, or design-system patterns related to Provide audio descriptions for video.author-bylineUse when auditing metadata, crawlability, structured data, or indexability related to Display clear author bylines.author-expertiseUse when auditing metadata, crawlability, structured data, or indexability related to Highlight author credentials and expertise.author-infoUse when auditing metadata, crawlability, structured data, or indexability related to Implement comprehensive author markup.autofocus-avoidanceUse when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autofocus on form fields.autoplay-mediaUse when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autoplaying media.avif-formatUse when reviewing image assets, markup, and CDN or build transforms related to Use AVIF format for modern browsers.avoid-evalUse when reviewing scripts, client components, bundles, or runtime behavior related to Never use eval() or unsafe dynamic code execution.back-forward-cacheUse when reviewing navigation performance, browser lifecycle events, or resume-from-memory behavior.blocked-linksUse when reviewing HTML source and JavaScript for links or resource URLs pointing to domains listed in common adblocker filter lists.breadcrumbUse when auditing metadata, crawlability, structured data, or indexability related to Implement valid BreadcrumbList schema.breadcrumb-navigationUse when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation.broken-external-linksUse when auditing metadata, crawlability, structured data, or indexability related to Fix or remove broken external links.broken-htmlUse when auditing metadata, crawlability, structured data, or indexability related to Fix malformed HTML structure.broken-imagesUse when reviewing image assets, markup, and CDN or build transforms related to Fix broken images.broken-linksUse when auditing metadata, crawlability, structured data, or indexability related to Resolve internal broken links.browser-cachingUse when auditing slow page loads, heavy assets, or rendering delays related to Enable browser caching.browser-requiredUse when auditing slow page loads, heavy assets, or rendering delays related to Perform browser-based performance audits.