All authors
Claude Skills by thedaviddias
github.com/thedaviddias392 skills0 installs12 views
- Cumulative Layout ShiftUse when auditing slow page loads, heavy assets, or rendering delays related to Minimize cumulative layout shift. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.Votes: 0GitHub stars: 74,358
- Currency FormattingUse when reviewing utility functions, component props, or template strings that format numbers, prices, or dates to check whether Intl APIs are used correctly.Votes: 0GitHub stars: 74,358
- Custom Element AccessibilityUse when reviewing custom element class definitions or Web Component source code to check for missing ARIA reflection, keyboard handling, and form association.Votes: 0GitHub stars: 74,358
- Dark Mode CssUse when reviewing stylesheets, component styles, and responsive behavior related to Support dark mode with prefers-color-scheme. Check the rendered layout across breakpoints and interaction states before proposing a fix.Votes: 0GitHub stars: 74,358
- Data MinimisationUse when reviewing form components, API payloads, or client-side storage to identify fields that are collected but not consumed by a stated feature.Votes: 0GitHub stars: 74,358
- Dead End PagesUse when auditing a site's internal link graph for dead-end pages, suggesting related-content links to add to thin or standalone pages, or reviewing CMS templates that produce link-free content pages.Votes: 0GitHub stars: 74,358
- Debounce ThrottleUse when reviewing scripts, client components, bundles, or runtime behavior related to Debounce and throttle event handlers. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.Votes: 0GitHub stars: 74,358
- Decorative ElementsUse when reviewing rendered HTML, interactive components, or design-system patterns related to Hide decorative elements from assistive technology. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant. If an image is clearly decorative, default to no finding unless the snippet shows an actual issue such as broken semantics, focusability, or visible layout instability.Votes: 0GitHub stars: 74,358
- Defer AsyncUse when reviewing templates, rendered HTML, or shared components related to Load scripts with defer, async, or type=module. Validate the final browser-facing markup, not just the source framework abstraction.Votes: 0GitHub stars: 74,358
- Definition ListUse when reviewing rendered HTML, interactive components, or design-system patterns related to Use correct definition list structure. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.Votes: 0GitHub stars: 74,358
- Dependency AuditUse when reviewing a project's security posture, setting up CI pipelines, or responding to a reported vulnerability in a dependency.Votes: 0GitHub stars: 74,358
- DimensionsUse when reviewing image assets, markup, and CDN or build transforms related to Set explicit width and height on images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together. Separate real CLS risks from tiny decorative SVGs or ornament-only assets that are unlikely to move surrounding content.Votes: 0GitHub stars: 74,358
- Direction AttributeUse when reviewing templates, rendered HTML, or shared components related to Set text direction for RTL languages. Validate the final browser-facing markup, not just the source framework abstraction.Votes: 0GitHub stars: 74,358
- DisclaimersUse when auditing YMYL content pages for trust signals, generating disclaimer copy for medical or financial content, or reviewing affiliate disclosure requirements under FTC or ASA guidelines.Votes: 0GitHub stars: 74,358
- DlitemUse when reviewing rendered HTML, interactive components, or design-system patterns related to Wrap definition items in a definition list. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.Votes: 0GitHub stars: 74,358
- DoctypeUse when applies to all HTML documents. Always check the very first line of the raw HTML source (view-source: or DevTools > Network > Response). In SSR frameworks, check the root HTML template (e.g., _document.tsx in Next.js, index.html in Vite/Vue, application.html.erb in Rails). The doctype is not a tag — it is a declaration and does not need a closing tag.Votes: 0GitHub stars: 74,358
- Dom PerformanceUse when reviewing scripts, client components, bundles, or runtime behavior related to Minimize costly DOM read/write operations. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug. In React, repeated requestAnimationFrame-driven state updates across multiple mounted components are a valid performance smell when visible in the source.Votes: 0GitHub stars: 74,358
- Dom SizeUse when auditing slow page loads, heavy assets, or rendering delays related to Reduce DOM size and complexity. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.Votes: 0GitHub stars: 74,358
- Draggable AccessibilityUse when reviewing templates, rendered HTML, or shared components related to Make drag and drop accessible. Validate the final browser-facing markup, not just the source framework abstraction.Votes: 0GitHub stars: 74,358
- Duplicate DescriptionUse when auditing a site's meta tag uniqueness, generating page-specific meta descriptions, or reviewing CMS templates that inject the same description globally.Votes: 0GitHub stars: 74,358
- Duplicate Id ActiveUse when reviewing rendered HTML, interactive components, or design-system patterns related to Use unique IDs for active elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.Votes: 0GitHub stars: 74,358
- Duplicate Id AriaUse when reviewing rendered HTML, interactive components, or design-system patterns related to Use unique IDs for ARIA references. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.Votes: 0GitHub stars: 74,358
- Duplicate JsUse when auditing slow page loads, heavy assets, or rendering delays related to Remove duplicate JavaScript libraries. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.Votes: 0GitHub stars: 74,358
- E2e TestingUse when reviewing CI coverage, automated checks, or test strategy related to Implement end-to-end testing. Focus on whether the rule is continuously verified, not just documented.Votes: 0GitHub stars: 74,358
- Editorial PolicyUse when auditing a blog, news site, or YMYL content site for trust signals, drafting editorial policy page content, or evaluating whether a site meets Google's quality rater trustworthiness criteria.Votes: 0GitHub stars: 74,358
- Element HidingUse when reviewing a website for layout and functionality issues caused by adblocker filter rules targeting common ad-related class names and IDs.Votes: 0GitHub stars: 74,358
- Embedded Or Inline CssUse when reviewing stylesheets, component styles, and responsive behavior related to Avoid embedded and inline CSS. Check the rendered layout across breakpoints and interaction states before proposing a fix.Votes: 0GitHub stars: 74,358
- Empty HeadingUse when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure headings contain text. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.Votes: 0GitHub stars: 74,358
- Empty LinksUse when reviewing rendered HTML, interactive components, or design-system patterns related to Fix empty and broken links. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.Votes: 0GitHub stars: 74,358
- Error HandlingUse when reviewing scripts, client components, bundles, or runtime behavior related to Implement proper error handling. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.Votes: 0GitHub stars: 74,358
- Error ImagesUse when reviewing image assets, markup, and CDN or build transforms related to Handle image loading errors gracefully. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.Votes: 0GitHub stars: 74,358
- Error MonitoringUse when setting up a new project's production observability stack, reviewing incident response readiness, or investigating why errors are going undetected.Votes: 0GitHub stars: 74,358
- Es ModulesUse when reviewing scripts, client components, bundles, or runtime behavior related to Use ES modules (import/export). Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.Votes: 0GitHub stars: 74,358
- Event DelegationUse when reviewing scripts, client components, bundles, or runtime behavior related to Use event delegation for dynamic content. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.Votes: 0GitHub stars: 74,358
- External LinksUse when auditing content pages for citation quality, suggesting authoritative sources to link for factual claims, or reviewing whether a page's external link attributes (nofollow, noopener) are correctly set.Votes: 0GitHub stars: 74,358
- FaqUse when adding FAQ sections to landing pages or blog posts, generating FAQPage JSON-LD from existing Q&A content, or validating that structured data on pages with FAQ sections is syntactically and semantically correct.Votes: 0GitHub stars: 74,358
- FaviconUse when checking whether a site has a correctly configured favicon, auditing `<link rel='icon'>` tags in the `<head>`, or setting up favicon infrastructure for a new project.Votes: 0GitHub stars: 74,358
- FaviconsUse when reviewing templates, rendered HTML, or shared components related to Implement favicons for all devices. Validate the final browser-facing markup, not just the source framework abstraction.Votes: 0GitHub stars: 74,358
- Fetchpriority AttributeUse when optimising Largest Contentful Paint (LCP), reducing render-blocking resource contention, or fine-tuning resource loading order in the critical rendering path.Votes: 0GitHub stars: 74,358
- Figure FigcaptionUse when reviewing image assets, markup, and CDN or build transforms related to Use <figure> and <figcaption> for image captions. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.Votes: 0GitHub stars: 74,358
- File Upload AccessibilityUse when reviewing templates, rendered HTML, or shared components related to Make file uploads accessible. Validate the final browser-facing markup, not just the source framework abstraction.Votes: 0GitHub stars: 74,358
- Filename QualityUse when reviewing image assets, markup, and CDN or build transforms related to Use descriptive image filenames. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.Votes: 0GitHub stars: 74,358
- Find Npm PackagesUse when you need to find the 2-3 most popular and well-maintained npm packages relevant to a frontend checklist rule, validate they meet quality thresholds, and add them to the rule's frontmatter.Votes: 0GitHub stars: 74,358
- First Contentful PaintUse when auditing slow page loads, heavy assets, or rendering delays related to Optimize first contentful paint. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.Votes: 0GitHub stars: 74,358
- Flashing ContentUse when reviewing rendered HTML, interactive components, or design-system patterns related to Prevent seizure-triggering flashing content. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.Votes: 0GitHub stars: 74,358
- Flexbox PatternsUse when reviewing stylesheets, component styles, and responsive behavior related to Apply Flexbox best practices. Check the rendered layout across breakpoints and interaction states before proposing a fix.Votes: 0GitHub stars: 74,358
- Focus ManagementUse when reviewing rendered HTML, interactive components, or design-system patterns related to Manage focus during dynamic interactions. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.Votes: 0GitHub stars: 74,358
- Focus Not ObscuredUse when reviewing sticky navigation, consent banners, chat widgets, skip links, or any fixed-position UI. Validate the actual tab order and viewport behavior at realistic zoom levels.Votes: 0GitHub stars: 74,358
- Focus OrderUse when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure logical focus order. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.Votes: 0GitHub stars: 74,358
- Focus StylesUse when reviewing stylesheets, component styles, and responsive behavior related to Provide visible custom focus indicators. Check the rendered layout across breakpoints and interaction states before proposing a fix.Votes: 0GitHub stars: 74,358