Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
thedaviddias Bundle Anchor TextUse when auditing metadata, crawlability, structured data, or indexability related to Use descriptive anchor text. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle Aria Labels
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for all interactive elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Author Info
Use when auditing metadata, crawlability, structured data, or indexability related to Implement comprehensive author markup. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle Broken HTML
Use when auditing metadata, crawlability, structured data, or indexability related to Fix malformed HTML structure. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle Button Name
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for buttons. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Defer Async
Use 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.
Audited - thedaviddias Bundle Empty Links
Use 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.
- thedaviddias Bundle Focus Order
Use 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.
- thedaviddias Bundle Form Labels
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Associate labels with form controls. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Frame Title
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide titles for iframes and frames. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Input Types
Use when reviewing templates, rendered HTML, or shared components related to Use semantic input type attributes. Validate the final browser-facing markup, not just the source framework abstraction.
- thedaviddias Bundle Robots Meta
Use when applies to all HTML pages. Use when auditing pages that have disappeared from search results or when checking staging vs. production meta tag parity.
- thedaviddias Bundle Select Name
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for select elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Styles Lint
Use when reviewing stylesheets, component styles, and responsive behavior related to Lint CSS and SCSS files. Check the rendered layout across breakpoints and interaction states before proposing a fix.
- thedaviddias Bundle Webpagetest
Use when reviewing templates, rendered HTML, or shared components related to Analyze performance with WebPageTest. Validate the final browser-facing markup, not just the source framework abstraction.
- thedaviddias Bundle Zoom Reflow
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Support content reflow at 400% zoom. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Broken Links
Use when auditing metadata, crawlability, structured data, or indexability related to Resolve internal broken links. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle Contact Page
Use when auditing metadata, crawlability, structured data, or indexability related to Create a comprehensive Contact page. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle CSS Critical
Use when reviewing stylesheets, component styles, and responsive behavior related to Inline critical CSS for faster rendering. Check the rendered layout across breakpoints and interaction states before proposing a fix.
- thedaviddias Bundle Focus Styles
Use 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.
- thedaviddias Bundle Form Captcha
Use when reviewing public HTML forms (no authentication required to reach them) for bot and abuse protection mechanisms.
- thedaviddias Bundle Link Checker
Use when reviewing templates, rendered HTML, or shared components related to Check for broken links. Validate the final browser-facing markup, not just the source framework abstraction.
- thedaviddias Bundle Meta In Body
Use when auditing HTML document structure. Applies to any page where meta tags (noindex, canonical-url, description, viewport, OG tags) may have been injected into the body by CMS plugins, widgets, or JavaScript rendering.
- thedaviddias Bundle Meta Refresh
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid meta refresh redirects. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Noscript Tag
Use when reviewing templates, rendered HTML, or shared components related to Provide noscript fallback content. Validate the final browser-facing markup, not just the source framework abstraction.
- thedaviddias Bundle Paste Inputs
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Allow pasting into form inputs. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Search Input
Use when reviewing templates, rendered HTML, or shared components related to Make search inputs accessible. Validate the final browser-facing markup, not just the source framework abstraction.
- thedaviddias Bundle Title Unique
Use when applies to all HTML pages. Use when auditing a site crawl report or investigating why multiple pages compete for the same keyword in search results.
- thedaviddias Bundle Article Links
Use when auditing metadata, crawlability, structured data, or indexability related to Optimize article link density. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle Author Byline
Use when auditing metadata, crawlability, structured data, or indexability related to Display clear author bylines. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle Blocked Links
Use when reviewing HTML source and JavaScript for links or resource URLs pointing to domains listed in common adblocker filter lists.
- thedaviddias Bundle Canonical Url
Use when auditing metadata, crawlability, structured data, or indexability related to Set canonical URLs for all pages. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle CSS File Size
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize CSS file size. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
- thedaviddias Bundle Dark Mode CSS
Use 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.
- thedaviddias Bundle Empty Heading
Use 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.
- thedaviddias Bundle Heading Order
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Maintain logical heading order. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include anchor-text, aria-labels, author-info. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.