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

Scrolljacking

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid scrolljacking and custom scroll behavior. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Table Headers

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Define proper table headers. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Text Resizing

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Support text resizing to 200%. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Touch Targets

Use when applies to all interactive elements on touchscreen interfaces: buttons, links, checkboxes, radio buttons, form inputs, icon buttons, and menu items. Check CSS for min-width, min-height, width, height, and padding on interactive elements. Particularly important for icon-only buttons (close, delete, share) which are often made too small.

Sep 17
thedaviddias Bundle

Viewport Zoom

Use when applies to any `<meta name='viewport'>` element in HTML documents. Check the `content` attribute for `user-scalable=no`, `user-scalable=0`, `maximum-scale=1`, or `maximum-scale` values less than 2. This is a common mistake in mobile-first templates and CSS frameworks.

Sep 17
thedaviddias Bundle

W3c Compliant

Use when reviewing templates, rendered HTML, or shared components related to Validate HTML against W3C standards. Validate the final browser-facing markup, not just the source framework abstraction.

Sep 17
thedaviddias Bundle

Autoplay Media

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autoplaying media. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Color Contrast

Use when applies to all visible text and text images, UI component borders (input fields, buttons), focus indicators, icons that convey meaning, and graphical objects required to understand content. Does not apply to inactive/disabled UI components or purely decorative elements.

Sep 17
thedaviddias Bundle

Lang Attribute

Use when applies to all HTML documents. Check the `<html>` opening tag for a `lang` attribute with a non-empty, valid BCP 47 language code. Also check for `lang` attribute changes on individual elements when the document contains content in multiple languages (inline quotes, foreign terms, multilingual sections). The `lang` attribute is inherited — child elements inherit the language from their nearest ancestor with `lang`.

Sep 17
thedaviddias Bundle

Leaked Secrets

Use when reviewing client-side JavaScript, HTML source, or git history for exposed credentials, API keys, or tokens.

Sep 17
thedaviddias Bundle

List Structure

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use correct list structure. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Plain Language

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Write in plain language. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Reduced Motion

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Respect reduced motion preferences. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Semantic Lists

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic list elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Streaming HTML

Use when reviewing server-side rendering setup, Next.js App Router pages, or Node.js HTTP handlers to verify that HTML is streamed incrementally rather than buffered until completion.

Sep 17
thedaviddias Bundle

Text Expansion

Use when reviewing CSS for fixed dimensions, truncation, or overflow rules on elements that render translatable strings.

Sep 17
thedaviddias Bundle

Text In Images

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid images of text. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Webfont Format

Use when reviewing stylesheets, component styles, and responsive behavior related to Optimize web font formats. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Sep 17
thedaviddias Bundle

Aria Meter Name

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for meter elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Aria Valid Attr

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure ARIA attributes are valid. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Canonical Chain

Use when auditing metadata, crawlability, structured data, or indexability related to Avoid redirect chains on canonical URLs. Verify the rendered HTML and HTTP response rather than relying only on source files.

Sep 17
thedaviddias Bundle

CSS At Property

Use when implementing animated gradients, complex CSS transitions that involve custom property values, or building a typed design token system where custom property misuse should produce visible errors.

Sep 17
thedaviddias Bundle

CSS Containment

Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS containment to limit repaint scope. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Sep 17
thedaviddias Bundle

Definition List

Use 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.

Sep 17
thedaviddias Bundle

Dom Performance

Use 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.

Sep 17
thedaviddias Bundle

Form Validation

Use when reviewing templates, rendered HTML, or shared components related to Validate forms accessibly. Validate the final browser-facing markup, not just the source framework abstraction. Distinguish between browser-posted forms and client-handled React forms so you do not over-report missing `method` or `action` as accessibility defects.

Sep 17
thedaviddias Bundle

Input Image Alt

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alt text for image buttons. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Skip Navigation

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Include a skip navigation link. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
techtideohio Bundle

Techtide Oci Live Network Security Rule Guard

Guard live OCI Security List and Network Security Group (NSG) rule changes with current-state capture, open-internet and sensitive-port detection, stateful/stateless assessment, and explicit approval before ingress or egress rule mutation. Use only when an intentional network rule change targets a confirmed VCN component.

Sep 17
s3yed Skill

21st Dev

Install and use 21st.dev components — the largest shadcn/ui-compatible registry of React + Tailwind + Framer Motion components (Magic UI, Aceternity UI, originui, eldoraui, kokonutui, Skiper UI, etc.). Use when the user wants Awwwards-tier homepage polish, animated heroes, marquees, bento grids, scroll reveals, pricing cards, testimonials, FAQ accordions, or any high-quality landing-page block. Stack: Next.js + Tailwind 4 + React 19 + framer-motion.

Sep 17
s3yed Skill

Canvas

Display generated HTML content on connected Appie or OpenClaw canvas nodes for dashboards, demos, games, and visualizations.

Sep 17
s3yed Bundle

Vercel Deploy

Deploy projects to Vercel via CLI with token auth. Use when deploying Next.js, static sites, or any project to Vercel from the terminal.

Sep 17
ellmos-ai Bundle

Design Taste Frontend

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

Sep 17
wyre-ai Bundle

Hudu Articles

Hudu knowledge base articles: HTML content format, company-scoped vs global articles, article folders (including nesting), drafts vs published, the /api/v1/articles endpoint surface, and search, templating, and documentation-health patterns.

Sep 17
fabioc-aloha Skill

UI UX Design

User interface design, user experience optimization, accessibility compliance, design systems

Sep 17
fabioc-aloha Skill

Dashboard Design

Dashboard layout patterns, KPI card design, filter architecture, narrative flow through panels, and self-contained HTML generation

Sep 17

Frequently asked questions

What are Web & Frontend agent skills?

Which Web & Frontend skills are most installed?

Popular Web & Frontend skills on SkillMD right now include scrolljacking, table-headers, text-resizing. 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.