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.
-
sygnaltech Bundle Webflow CloudExpert guidance for developing React apps for Webflow Cloud. This skill should be used when users are building, troubleshooting, or optimizing Webflow Cloud apps.
-
sygnaltech Bundle Webflow Code ComponentsDocumentation for Webflow Code Components via DevLink. Use this skill when users ask about creating React components for Webflow, DevLink integration, component props, slots, styling Shadow DOM components, bundling, or importing custom components into Webflow Designer.
-
snakeo Skill Debug VueDebug Vue.js 3 application issues systematically. This skill helps diagnose and resolve Vue-specific problems including reactivity failures with ref/reactive, component update issues, Pinia store state management problems, computed property caching bugs, Teleport/Suspense rendering issues, and SSR hydration mismatches. Provides Vue DevTools usage, console debugging techniques, Vite dev server troubleshooting, and vue-tsc type checking guidance.
-
snakeo Skill Debug ReactDebug React issues systematically. Use when encountering component errors like "Cannot read property of undefined", infinite re-render loops with "Too many re-renders", stale closures in hooks, key prop warnings, memory leaks with useEffect, hydration mismatches in SSR/SSG applications, hook rule violations, missing dependency warnings, or performance bottlenecks. Covers functional components, hooks, and modern React 18/19 patterns including Server Components and concurrent features.
-
snakeo Skill Debug NextjsDebug Next.js issues systematically. Use when encountering SSR errors, hydration mismatches like "Text content did not match", routing issues with App Router or Pages Router, build failures, dynamic import problems, API route errors, middleware issues, caching and revalidation problems, or performance bottlenecks. Covers both Pages Router and App Router architectures.
-
snakeo Skill Debug NuxtjsDebug Nuxt.js issues systematically. Use when encountering SSR errors, Nitro server issues, hydration mismatches like "Hydration text/node mismatch", composable problems with useFetch or useAsyncData, plugin initialization failures, module conflicts, auto-import issues, or Vue-specific runtime errors in a Nuxt context.
-
snakeo Skill Debug SvelteDebug Svelte application issues systematically. This skill helps diagnose and resolve Svelte-specific problems including reactivity failures, runes issues ($state, $derived, $effect), store subscription memory leaks, SSR hydration mismatches, and compiler warnings. Covers both Svelte 4 legacy patterns and Svelte 5 runes-based reactivity. Provides debugging tools like $inspect(), {@debug} tags, and svelte-check CLI usage.
-
cih1996 Skill Project NormsCapture and apply project-wide norms or prohibitions when the user states global rules (e.g. "不要", "禁止", "别", "不许", "必须", "只能") that should persist across future projects, scoped by framework (vue/react/etc). Use when a user wants to record, list, or apply framework-specific global rules, or when starting a new task that should respect previously recorded norms.
-
kashaziz Bundle Full Stack Mvp BuilderGenerates production-ready full-stack MVP code with Astro frontend + Django/FastAPI/Express/Astro Edge backend. Builds complete codebases with authentication, CRUD operations, tests, and deployment configs.
-
snakeo Skill Refactor ReactRefactor React and TypeScript code to improve maintainability, readability, and performance. This skill transforms complex React components into clean, well-structured code following modern React 19 patterns. It addresses component bloat, prop drilling, unnecessary re-renders, and improper hook usage. Leverages React 19 features including the React Compiler for automatic memoization, Actions for form handling, useOptimistic for immediate UI feedback, the use() hook for async data, and Server Components for optimal performance.
-
snakeo Skill Refactor NextjsRefactor Next.js code to improve maintainability, readability, and adherence to App Router best practices. Identifies and fixes God Components, prop drilling, inappropriate 'use client' usage, outdated Pages Router patterns, missing Suspense boundaries, incorrect caching strategies, and useEffect data fetching anti-patterns. Applies modern Next.js 15 patterns including Server Components, Client Components, Server Actions, streaming with Suspense, proper caching strategies, Container-Presentational pattern, layout composition, parallel routes, and intercepting routes.
-
snakeo Skill Refactor NuxtjsRefactor Nuxt.js/Vue code to improve maintainability, readability, and adherence to best practices. Identifies and fixes DRY violations, oversized components, deep nesting, SRP violations, data fetching anti-patterns with useFetch/useAsyncData/$fetch, poor composable organization, and mixed business/presentation logic. Applies Nuxt 3 patterns including auto-imports, proper data fetching, single-responsibility composables, TypeScript integration, runtime config, Nitro server routes, Nuxt Layers, middleware patterns, Pinia state management, and performance optimizations.
-
ai-unleashed Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
freddy-chen-ux Skill NextjsNext.js conventions for VioletDashboard and Connect
-
freddy-chen-ux Skill Shadcn VueContext and reference for building UI with shadcn-vue components. Load when adding, modifying, or debugging UI components.
-
snakeo Skill Debug React NativeDebug React Native issues systematically. Use when encountering native module errors like "Native module cannot be null", Metro bundler issues including port conflicts and cache corruption, platform-specific build failures for iOS CocoaPods or Android Gradle, bridge communication problems, Hermes engine bytecode compilation failures, red screen fatal errors, or New Architecture migration issues with TurboModules and Fabric renderer.
-
zeroxclem Bundle UI UX A11Y Static ReviewThis skill should be used when performing static UI/UX and accessibility reviews of frontend codebases and producing a three-step report (context mapping, violations, executive synthesis) from code only.
-
snakeo Skill Refactor React NativeRefactor React Native and TypeScript code to improve maintainability, readability, and performance for cross-platform mobile applications. This skill transforms complex mobile code into clean, well-structured solutions following React Native New Architecture patterns including Fabric, TurboModules, and JSI. It addresses FlatList performance issues, prop drilling, platform-specific code organization, and inline styles. Leverages Expo SDK 52+ features, React Navigation v7, and Reanimated for smooth 60fps animations.
-
freddy-chen-ux Skill Vue ComposablesUse when creating reusable composables, managing reactive state, or implementing the Composition API. Load for useX patterns, Pinia store patterns, withLoadingState helper, lifecycle management, and type-safe state patterns. Covers composable structure, error handling, and testing composables.
-
freddy-chen-ux Skill Frontend EngineerFrontend implementation and UI
-
freddy-chen-ux Bundle Webapp TestingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
-
sqweeet Skill Senior Product DesignerA design expert that provides critique on UI/UX, suggests modern aesthetics, and ensures accessibility.
-
atomic-kanta-sasaki Skill React ComponentReactコンポーネントの設計と実装パターン。 関数コンポーネント、カスタムフック、状態管理、アクセシビリティ。 Reactコンポーネント作成、フロントエンド実装時に使用。
-
toowiredd Bundle Browser App CreatorCreates complete single-file HTML/CSS/JS web apps with localStorage persistence, ADHD-optimized UI (60px+ buttons), dark mode, and offline functionality. Use when user says "create app", "build tool", "make dashboard", or requests any browser-based interface.
-
gurdasnijor Bundle Senior FrontendComprehensive frontend development skill for building modern, performant web applications using React, Next.js, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
-
gurdasnijor Bundle Senior ArchitectComprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack decision frameworks, and dependency analysis. Use when designing system architecture, making technical decisions, creating architecture diagrams, evaluating trade-offs, or defining integration patterns.
-
ammosu Bundle Theme Factory用於為各種產物套用主題樣式的工具組。這些產物可以是投影片、文件、報告、HTML 登陸頁面等。提供 10 個預設的顏色/字型主題,可套用至任何已建立的產物,或即時生成新主題。
-
tiancai19 Skill Web ScraperScrape web content with anti-detection features. Extract data from static and dynamic websites, handle JavaScript-rendered pages, and respect robots.txt. Use when scraping websites, extracting web data, or working with HTML content.
-
dylanzhangzx Bundle Skill 3当用户需要可信搜索、权威材料检索、政策法规/标准依据查找、可点击溯源、知识专库、政策调研、城市政策对比、企业补贴与税惠材料核验、合规依据核验,或明确要求深度搜索、深度分析、全面查找、多轮核验、完整方案时,使用深知可信搜索(法律、政策、标准)。本 Skill 默认只调用深知可信搜索接口,不使用统一咨询接口;只有用户明确要求深度搜索或在可信搜索完成后确认升级深度核验时,才调用深度搜索接口。最终交付必须包含直接回复答案、与答案一致的可点击溯源 HTML、以及移除来源角标的干净 Markdown。API Key 统一通过环境变量 DKNOWC_API_KEY 注入。
-
esphome Skill Pr Workflow 3Create pull requests for esphome/device-builder-frontend. Use when creating PRs, submitting changes, or preparing contributions.
-
david-sfdev Bundle Lwc DevelopmentExpert guidance for Lightning Web Component (LWC) development on Salesforce Platform. Use this skill when working with Salesforce LWC projects, creating or modifying Lightning components, fixing LWC code, or when the user mentions Salesforce, Lightning Web Components, SLDS, lightning namespace components, or .js-meta.xml files. Always prefer standard Lightning components over generic HTML/web components.
-
community-access Skill Markdown Accessibility 4Markdown accessibility rule library covering ambiguous links, anchor validation, emoji handling (remove or translate to English), Mermaid and ASCII diagram replacement templates, heading structure, table descriptions, and severity scoring. Use when auditing or fixing markdown documentation for accessibility.
-
jpush Bundle Update Sdk 3更新 jpush-phonegap-plugin 插件的 JPush SDK 版本。自动拉取极光官网 Changelog,分析新增/移除/变更 API,更新 plugin.xml 中 Android(Gradle framework)和 iOS(CocoaPods podspec)版本引用,同步更新 Native 层(Java/ObjC)和 JS Bridge 层代码,展示变更摘要确认后发布到 npm。 Use when: 更新 JPush SDK、升级推送 SDK 版本、jpush-phonegap-plugin 发布新版本、Cordova/PhoneGap 插件 SDK 更新。
-
lottiefiles Bundle Creator Plugin Development 3This skill should be used when developing LottieFiles Creator Plugins with the Creator Plugin API. It applies when (1) creating a new Creator Plugin from scratch, (2) working on plugin code in plugin/ or src/ directories, (3) using the creator global API for scene manipulation, (4) building plugin UI with React that communicates with a plugin sandbox, or (5) the user mentions "Creator plugin", "LottieFiles plugin", "creator API", or works with files like plugin.ts or manifest.json in a plugin project context. Triggers on requests like "create a plugin", "add a feature to my plugin", "import assets into Creator", or "animate a layer".
-
onmax Skill Nuxt 3Use Nuxt Skill Hub guidance for Nuxt, Vue, Nitro, runtime config, page metadata, hydration, data fetching, Nuxt UI, Nuxt Content, Nuxt Studio, VueUse, and installed Nuxt module work.
-
questdb Skill Review Pr 5Review `$ARGUMENTS`
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 webflow-cloud, webflow-code-components, debug:vue. 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.