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.

alivirgo Skill

Vercel

Operational skill for Vercel deployments: Next.js/frontend project linking, env vars, preview vs production, build settings, and rollout hygiene.

Sep 17
alivirgo Bundle

Raycast

Comprehensive operational skill specification for Anthropic Claude to automate, script, troubleshoot, and optimize Raycast, React/TypeScript Extension API (@raycast/api), Script Commands, and URL schemes.

Sep 17
alivirgo Skill

Remotion

Operational skill for Claude to automate Remotion React video compositions, render CLI, server-side renders, and programmatic timeline props.

Sep 17
alivirgo Bundle

Rectangle

Comprehensive operational skill specification for Anthropic Claude to automate, script, troubleshoot, and optimize Rectangle, macOS Accessibility API (AXUIElement), multi-display tiling, and URL scheme actions.

Sep 17
alivirgo Skill

React Native

Operational skill for React Native: core components, navigation, native modules awareness, New Architecture notes, and release builds.

Sep 17
ntizar Bundle

Matematicas Curso Educativo

DeSumarIntegrar — Curso completo de matemáticas de 1º Primaria a 1º Carrera: 107+ HTML interactivos con KaTeX, Plotly.js, ejercicios con feedback. Sistema de mejora continua con cron cada 30min. CALIDAD sobre cantidad — variedad de ejercicios, visuales solo si aportan.

Sep 17
ntizar Bundle

PDF To Artifacts David Antizar

Pipeline de transformación de PDF a 3 artefactos — análisis técnico, post LinkedIn, infografía HTML + comparativa. Con marca Ntizar David Antizar, sistema Aurora, atribución correcta.

Sep 17
ntizar Skill

UI Animation Taste

Use al animar UIs: easings, sombras y efectos GPU con buen gusto.

Sep 17
sethdford Skill

C4 Model Diagram

Create C4 context, container, component, and code diagrams. Visualize architecture at different abstraction levels. Use when communicating system structure to diverse audiences.

Sep 17
sethdford Skill

Integration Test Design

Testing multiple components together; contract verification; real I/O (database, HTTP). Use when testing component interactions.

Sep 17
sethdford Skill

Output Encoding

Implement context-specific output encoding to prevent XSS and injection attacks. Encode HTML, URL, JavaScript, and other contexts appropriately.

Sep 17
sethdford Skill

Wcag Audit

Expert approach to wcag-audit in accessibility testing. Use when working with .

Sep 17
tomevault-io Bundle

Jacky Motion

把中文口播稿变成可录屏的 16:9 信息动画 HTML。6阶段流水线：审稿→分镜→锁风格→生成HTML→验收→配音录制。 Use when this capability is needed.

Sep 17
thedaviddias Bundle

Hreflang

Use when auditing metadata, crawlability, structured data, or indexability related to Add hreflang tags for multilingual sites. Verify the rendered HTML and HTTP response rather than relying only on source files.

Sep 17
thedaviddias Bundle

Listitem

Use when applies to HTML documents with `<li>` elements. Also applies to custom ARIA lists where `role='listitem'` must be owned by `role='list'`. Common violations occur in templating systems where list markup is split across components or in CSS resets where developers use `<li>` for layout without proper list parents.

Sep 17
thedaviddias Bundle

Tabindex

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

Sep 17
thedaviddias Bundle

Viewport

Use when reviewing templates, rendered HTML, or shared components related to Set the responsive viewport meta tag. Validate the final browser-facing markup, not just the source framework abstraction.

Sep 17
thedaviddias Bundle

Aria Text

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

Sep 17
thedaviddias Bundle

Citations

Use when auditing metadata, crawlability, structured data, or indexability related to Cite authoritative external sources. Verify the rendered HTML and HTTP response rather than relying only on source files.

Sep 17
thedaviddias Bundle

CSS Order

Use when reviewing stylesheets, component styles, and responsive behavior related to Order CSS files correctly. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Sep 17
thedaviddias Bundle

CSS Print

Use when reviewing stylesheets, component styles, and responsive behavior related to Include a print stylesheet. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Sep 17
thedaviddias Bundle

Font Size

Use when applies to all CSS `font-size` declarations, particularly those using `px` units for body text, UI labels, and navigation. Use when auditing mobile responsiveness and accessibility compliance. Check for `font-size` in media queries targeting small screens.

Sep 17
thedaviddias Bundle

HTML Size

Use when auditing page weight for crawl efficiency, investigating why certain page content is not appearing in Google's index, or reviewing server-rendered pages that embed large JSON payloads in HTML.

Sep 17
thedaviddias Bundle

Link Text

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

Sep 17
thedaviddias Bundle

Mime Type

Use when auditing server configuration or diagnosing broken resources. Applies to any web server serving HTML, CSS, JS, images, fonts, or other static assets.

Sep 17
thedaviddias Bundle

Reset CSS

Use when reviewing stylesheets, component styles, and responsive behavior related to Use a CSS reset or normalize stylesheet. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Sep 17
thedaviddias Bundle

Skip Link

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

Sep 17
thedaviddias Bundle

Unique Id

Use when reviewing templates, rendered HTML, or shared components related to Ensure all IDs are unique. Validate the final browser-facing markup, not just the source framework abstraction.

Sep 17
thedaviddias Bundle

About Page

Use when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page. Verify the rendered HTML and HTTP response rather than relying only on source files.

Sep 17
thedaviddias Bundle

Accesskeys

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

Sep 17
thedaviddias Bundle

AI Content

Use when auditing metadata, crawlability, structured data, or indexability related to Audit and refine AI-generated content. Verify the rendered HTML and HTTP response rather than relying only on source files.

Sep 17
thedaviddias Bundle

Aria Roles

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

Sep 17
thedaviddias Bundle

Breadcrumb

Use when auditing metadata, crawlability, structured data, or indexability related to Implement valid BreadcrumbList schema. Verify the rendered HTML and HTTP response rather than relying only on source files.

Sep 17
thedaviddias Bundle

Form Https

Use when reviewing HTML forms, fetch/XHR calls, and form action attributes to ensure data is submitted exclusively over HTTPS.

Sep 17
thedaviddias Bundle

Object Alt

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

Sep 17
thedaviddias Bundle

Unused CSS

Use when reviewing stylesheets, component styles, and responsive behavior related to Remove unused CSS rules. Check the rendered layout across breakpoints and interaction states before proposing a fix.

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 vercel, raycast, remotion. 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.