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.
Web & Frontend
1,641 skills
sickn33 Astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
45.1k
sickn33 Wiki QA
Answer repository questions grounded entirely in source code evidence. Use when user asks a question about the codebase, user wants to understand a specific file, function, or component, or user asks "how does X work" or "where is Y defined".
45.1k
mattpocock Teach
Teach the user a new skill or concept, within this workspace.
236k · bundle
anthropic Webapp Testing
Test local web applications by writing native Python Playwright scripts, with helpers for server lifecycle management and a reconnaissance-then-action pattern for dynamic UIs.
158k · bundle
addyosmani API And Interface Design
Design stable, well-documented interfaces that are hard to misuse, including REST APIs, GraphQL schemas, module boundaries, and component props.
69.5k
antigravity Unship
Compare multiple UI variants locally in a real app, choose one, and clean up unused temporary code.
42.4k
antigravity Angular
Build modern Angular applications with Signals, Standalone Components, Zoneless mode, and SSR/Hydration.
42.4k · bundle
antigravity Favicon
Generate a complete set of favicons from a source image and update the project's HTML with appropriate link tags.
42.4k
antigravity Ckw Design
Provides frontend design direction, design systems, visual philosophy, and production-grade UI styling for web interfaces, including layout critique, usability auditing, and asset generation.
42.4k
antigravity UI Motion
Apply named StyleSeed motion to React components using framer-motion, with personality seeds and keyword moves from a motion library.
42.4k
expo Expo Brownfield
Integrate Expo and React Native into an existing native iOS or Android app, covering both isolated (AAR/XCFramework) and integrated (Gradle/CocoaPods) approaches.
2.2k · bundle
expo Expo Tailwind Setup
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling across iOS, Android, and Web.
2.2k · bundle
adobe Aem CLI
Install, configure, and troubleshoot the Adobe AEM CLI (@adobe/aem-cli) for local Edge Delivery development, including dev server, import server, content sync, TLS, and proxy setup.
142 · bundle
adobe Scrape Webpage
Extract content, metadata, and images from a webpage for import or migration to AEM Edge Delivery Services.
142 · bundle
adobe Building Blocks
Guides implementation of AEM Edge Delivery blocks with JavaScript decoration and CSS styling, following established patterns and best practices.
142 · bundle
adobe Analyze And Plan
Analyzes development requirements and generates structured acceptance criteria for AEM Edge Delivery Services tasks, including task breakdowns and edge case identification.
142 · bundle
adobe Find Test Content
Searches for existing content pages containing a specific block in AEM Edge Delivery Services, reporting URLs with occurrences and variants to help identify test content during development.
142 · bundle
adobe Authoring Analysis
Analyze content sequences from page structure to determine whether each should be default content or a specific block, and validate block selection for AEM Edge Delivery Services imports.
142 · bundle
adobe Generate Import HTML
Generates structured HTML from authoring analysis for AEM Edge Delivery Services, creating section structure, applying block tables, handling metadata, and managing images folder.
142 · bundle
adobe Content Driven Development
Orchestrate a content-driven development workflow for AEM Edge Delivery Services, ensuring code is built against real content with author-friendly content models.
142 · bundle
adobe Accessibility Fix
Scan AEM Edge Delivery Services pages for WCAG 2.1 AA violations and generate specific fixes for content authors and developers.
142 · bundle
getsentry Presentation Creator
Create interactive, data-driven presentation slides using React, Vite, and Recharts with Sentry branding, built as a single distributable HTML file.
845 · bundle
github Msstore CLI
Publish and manage Windows applications in the Microsoft Store using the msstore CLI, including credential configuration, submission management, packaging, and CI/CD integration.
36.2k
github Fluentui Blazor
Use the Microsoft Fluent UI Blazor component library in Blazor applications, covering setup, providers, icons, list components, dialogs, toasts, and theming.
36.2k · bundle
github Next Intl Add Language
Add a new language to a Next.js project using next-intl for internationalization, including translations and configuration updates.
36.2k
github Playwright Generate Test
Generates a Playwright test from a user-provided scenario by recording browser interactions via Playwright MCP, then saves and runs the test until it passes.
36.2k
github React18 Lifecycle Patterns
Migrate React class component lifecycle methods (componentWillMount, componentWillReceiveProps, componentWillUpdate) to React 18.3.1 compliant patterns with decision trees and before/after code examples.
36.2k · bundle
github Salesforce Component Standards
Enforce quality, security, and accessibility standards for Salesforce Lightning Web Components, Aura components, and Visualforce pages.
36.2k
github Technology Stack Blueprint Generator
Analyzes codebases to generate detailed technology stack blueprints with version information, licensing, usage patterns, coding conventions, and architecture diagrams.
36.2k
github React Container Presentation Component
Scaffold React components following the Container/Presentation pattern under src/components, with TypeScript, Storybook, and SCSS conventions.
36.2k · bundle
greensock Gsap Core
Animate DOM and SVG elements with GSAP's core engine: tweens, easing, staggers, transforms, and responsive matchMedia.
10.9k
greensock Gsap Frameworks
Animates Vue, Nuxt, Svelte, and SvelteKit components with GSAP, handling lifecycle hooks, scoped selectors, and cleanup on unmount.
10.9k
vercel-labs Vercel React View Transitions
Add smooth, native-feeling page transitions and animations to React apps using the browser's View Transition API, with support for shared elements, enter/exit animations, and directional navigation.
28.7k · bundle
bankrbot Yoink
Play an onchain capture-the-flag game on Base by yoinking the flag from the current holder, checking game stats and leaderboards, and competing for the trophy using Bankr for transaction execution.
1.2k · bundle
jeffallan Fullstack Guardian
Builds security-focused full-stack web applications by implementing integrated frontend and backend components with layered security at every level, covering the complete stack from database to UI.
10.4k · bundle
inference-sh Widgets UI
Render declarative UI widgets from JSON for React/Next.js applications, enabling agent-generated UIs, dynamic forms, and interactive cards.
584
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 react-container-presentation-component, webapp-testing, analyze-and-plan. Rankings shift as installs change; sort this page by "Most downloaded" 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 add <owner>/<name>, or copy the file into your agent's skills directory.