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.
-
anthropic Bundle XLSXCreate, edit, and analyze spreadsheet files (.xlsx, .xlsm, .csv, .tsv) with formulas, formatting, and financial modeling conventions.
158k -
anthropic Bundle Theme FactoryApply consistent, professional color palettes and font pairings to presentation slide decks and other artifacts using pre-set themes or custom on-the-fly generation.
Audited 158k -
anthropic Bundle Web Artifacts BuilderCreates elaborate, multi-component HTML artifacts using React, Tailwind CSS, and shadcn/ui for complex frontend projects.
158k -
alirezarezvani Bundle Ship GateScans a codebase for security, database, deployment, code quality, AI/LLM, dependency, frontend, and observability issues before deployment. Intercepts deploy commands and blocks until critical items pass.
20.4k -
alirezarezvani Bundle Md ReviewConverts a markdown code review or PR writeup with diff blocks and severity-tagged callouts into a single-file two-column HTML review with jump navigation and a named reviewer footer.
Audited 20.4k -
alirezarezvani Bundle Md SlidesConverts a markdown deck into a single-file HTML presentation with keyboard navigation, presenter mode, and print-to-PDF support.
Audited 20.4k -
alirezarezvani Bundle Md DocumentConverts long-form markdown documents (specs, RFCs, reports, plans) into a single-file HTML page with sticky table of contents, scrollspy, search filter, code-copy buttons, and customizable design tokens.
Audited 20.4k -
alirezarezvani Bundle LandingGenerates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forces structured intake (product pitch, audience, brand, tone) before generating copy or markup.
Audited 20.4k -
alirezarezvani Bundle Spec To RepoTurns a natural-language project specification into a complete, runnable starter repository with real code, tests, and CI configuration for any stack.
20.4k -
alirezarezvani Bundle Senior QAGenerates unit tests, integration tests, and E2E tests for React/Next.js applications by scanning components, analyzing coverage reports, and scaffolding Playwright test files.
Audited 20.4k -
alirezarezvani Bundle Epic DesignBuild cinematic, scroll-driven 2.5D websites with parallax depth, text animations, and premium effects using CSS and JavaScript.
Audited 20.4k -
alirezarezvani Bundle Saas ScaffolderGenerates a complete, production-ready SaaS project boilerplate with Next.js 14+, TypeScript, Tailwind CSS, shadcn/ui, Drizzle ORM, and Stripe, including authentication, database schemas, billing integration, API routes, and a working dashboard.
Audited 20.4k -
alirezarezvani Bundle Schema MarkupImplement, audit, and validate JSON-LD structured data to earn rich results in Google and improve AI search visibility.
Audited 20.4k -
alirezarezvani Bundle Browser AutomationAutomate browser tasks, scrape websites, fill forms, capture screenshots, and extract structured data from web pages using Playwright.
20.4k -
alirezarezvani Bundle Dependency AuditorAudit and manage dependencies across multi-language projects by scanning for vulnerabilities, license conflicts, and transitive dependency risks, with safe-upgrade planning.
Audited 20.4k -
alirezarezvani Bundle NotebooklmBrowser-automates Google's NotebookLM to read notebooks, add sources, generate Studio outputs (Audio/Video Overviews, Mind Maps, Reports), and create new notebooks.
Audited 20.4k -
alirezarezvani Bundle Senior FrontendScaffold Next.js/React projects, generate components, analyze bundle sizes, and apply React/Next.js optimization patterns.
Audited 20.4k -
alirezarezvani Bundle Full Page ScreenshotCapture full-page screenshots of any web page using Chrome DevTools Protocol, handling SPAs, lazy-loaded images, and very tall pages with zero external dependencies.
20.4k -
alirezarezvani Bundle Senior FullstackScaffolds fullstack projects (Next.js, FastAPI, MERN, Django) and analyzes code quality with security and complexity scoring.
Audited 20.4k -
addyosmani Skill Frontend UI EngineeringBuild production-quality user interfaces that are accessible, performant, and visually polished, with guidance on component architecture, state management, design system adherence, and accessibility.
Audited 69.5k -
addyosmani Skill Performance OptimizationMeasures application performance first, identifies bottlenecks, and applies targeted fixes for frontend and backend systems.
Audited 69.5k -
huggingface Bundle Transformers JSRun state-of-the-art machine learning models directly in JavaScript/TypeScript across browsers and server-side runtimes using Transformers.js.
Audited 10.8k -
huggingface Bundle Huggingface GradioBuild interactive web UIs and ML demos in Python using Gradio's core API, components, and patterns.
Audited 10.8k -
antfu Bundle VueWrite Vue 3 Single-File Components using Composition API with TypeScript, covering script setup macros, reactivity system, built-in components, and lifecycle hooks.
Audited 5.5k -
antfu Bundle NuxtBuild full-stack Vue applications with Nuxt 4, covering SSR, file-based routing, auto-imports, server routes, and deployment.
Audited 5.5k -
antfu Bundle ViteConfigure Vite build tool, use its plugin API, set up SSR, and migrate to Vite 8 with Rolldown.
Audited 5.5k -
antfu Bundle PiniaManage Vue application state with Pinia's type-safe store patterns, including state, getters, actions, plugins, and SSR support.
Audited 5.5k -
antfu Bundle SlidevCreate and present web-based slide decks using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Ideal for technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.
Audited 5.5k -
antfu Bundle UnocssConfigure and use UnoCSS, an instant atomic CSS engine with presets, rules, shortcuts, and integrations for Vite and Nuxt.
Audited 5.5k -
antfu Bundle VitepressBuild documentation sites, configure themes, and write Markdown with Vue components using the VitePress static site generator.
Audited 5.5k -
antfu Bundle Antfu DesignBuild interfaces with UnoCSS using semantic tokens, dark mode parity, and design polish for devtools and landing pages.
Audited 5.5k -
antfu Bundle Vueuse FunctionsMap requirements to the most suitable VueUse composable and apply correct usage patterns for concise, maintainable Vue.js/Nuxt features.
Audited 5.5k -
antfu Bundle Vue Best PracticesProvides Vue.js best practices and workflow guidance, including architecture planning, component design, reactivity patterns, and performance optimization for Vue 3 projects.
Audited 5.5k -
antfu Bundle Web Design GuidelinesReview UI code for compliance with web interface guidelines, accessibility, and UX best practices.
5.5k -
antfu Bundle Vue Router Best PracticesProvides best practices for Vue Router 4, including navigation guards, route params, and route-component lifecycle interactions.
Audited 5.5k -
antfu Bundle Vue Testing Best PracticesProvides Vue.js testing best practices, patterns, and solutions for common pitfalls using Vitest, Vue Test Utils, and Playwright.
Audited 5.5k
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.
A skill is a plain SKILL.md file — YAML frontmatter naming the skill and describing when to use it, followed by markdown instructions the agent loads only when a task matches. The format is the one Anthropic documents for Agent Skills, and it is read unchanged by Cursor and OpenAI Codex, among 60+ agents. Every web & frontend skill listed here passes a safety review before it becomes publicly visible; the verdict and any network or filesystem capabilities it declares are shown on its page.
How to install a web & frontend agent skill
- Pick a skill. Choose a Web & Frontend skill from this page and open it to read its SKILL.md and safety review before installing.
- Run the install command. Run npx skillmds@latest add <owner>/<name> in your project. The CLI detects every agent installed on the machine and writes the skill into each one's skills directory.
- Restart your agent. Restart Claude Code, Cursor or Codex so it picks up the new skills directory. The agent then loads the skill on demand whenever a task matches its description.
Prefer to do it by hand? Every skill page has a copyable SKILL.md and a markdown twin at /skills/<owner>/<name>.md.
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 xlsx, web-artifacts-builder, theme-factory. 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.