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.
-
tomevault-io Bundle Agents Sdk 2Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Use when this capability is needed.
- tomevault-io Bundle Refactor 16
Refactors code following Ousterhout's design principles. Analyzes complexity, creates prioritized refactoring plan, and executes with safety-first approach. Optimized for Vite/React, Tauri/Rust, Zustand stack. Use when this capability is needed.
- tomevault-io Bundle Diagnose 2
Systematically diagnoses build, runtime, DB, API, and frontend errors with classification and fix workflow. Use when encountering errors or test failures. Use when this capability is needed.
- tomevault-io Bundle React Patterns 2
Use when building or refactoring React components. Covers hooks patterns, component composition, state management with Zustand/Context, error boundaries, and performance optimization.
- tomevault-io Bundle Frontend Design 15
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle Datastar 2
Use when building web applications with Datastar — the hypermedia framework that drives frontend reactivity from the backend using HTML data-* attributes and Server-Sent Events. Triggers on Datastar, data-star, SSE-driven UI, hypermedia framework, backend-driven frontend, data-signals, data-on, PatchElements, or any Go/Python web app using Datastar SDKs.
- tomevault-io Bundle Web Artifacts Builder 2
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. Use when this capability is needed.
- tomevault-io Bundle Vercel React Best Practices 16
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Use when this capability is needed.
- tomevault-io Bundle Templ Syntax 2
Learn and write templ component syntax including expressions, conditionals, loops, and Go integration. Use when writing .templ files, learning templ syntax, or mentions 'templ component', 'templ expressions', or '.templ file syntax'. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 11
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle Bluebubbles 2
Handles sending and managing iMessages through BlueBubbles, the recommended iMessage integration. Triggers when the user wants to send a text message, send an iMessage, send a text, text someone, message a contact, react with a tapback, reply to a message thread, send an attachment via iMessage, edit or unsend a sent message, or manage group chat participants. All calls go through the generic message tool with channel="bluebubbles".
- tomevault-io Bundle Context7 2
Fetch up-to-date library documentation using Context7 API. Use this skill when the user asks for docs, examples, or help with a specific library/framework (e.g., "look up React docs", "context7 nextjs routing", "fetch docs for fastapi"). Use when this capability is needed.
- tomevault-io Bundle Nuxt 3
Nuxt.js Vue framework with SSR and auto-imports. Use for full-stack Vue applications. Use when this capability is needed.
- tomevault-io Bundle Astro 2
Rules to develop astro projects Use when this capability is needed.
- tomevault-io Bundle Frontend Design 12
Create 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. Use when this capability is needed.
- tomevault-io Bundle Hula Skill 2
HuLa project skill for frontend (Vue 3 + Vite + UnoCSS + Naive UI/Vant), backend (Tauri v2 + Rust + SeaORM/SQLite), full-stack flows, and build/release work. Use when the user mentions hula or HuLa or requests changes in this repository; after triggering, ask which scope (frontend/backend/fullstack/build-release) to enable. Use when this capability is needed.
- tomevault-io Bundle Vue 25
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
- tomevault-io Bundle Vue 26
Vue 3 생태계 통합 가이드. Composition API, Pinia 상태관리, Vue Router, VueUse 컴포저블, 테스팅. Vue SFC, .vue 파일, defineProps/defineEmits/defineModel, watchers, Transition/Teleport/Suspense/KeepAlive, 상태관리, 라우팅 작업 시 사용. MUST be used for Vue.js tasks. Use when this capability is needed.
- tomevault-io Bundle Vue 27
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive. Use when this capability is needed.
- tomevault-io Bundle Vue 28
Build Vue 3 applications with Composition API, proper reactivity patterns, and production-ready components. Use when this capability is needed.
- tomevault-io Bundle React PDF 2
1. **Fonts MUST be local files** - Remote font URLs (http/https) do NOT work. Always download fonts Use when this capability is needed.
- tomevault-io Bundle Svelte Core Bestpractices 2
Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more. Use when this capability is needed.
- tomevault-io Bundle Deployment 3
Deployment architecture, multi-tenancy design, and environment-specific deployment commands. Use when the user asks about how the application is deployed, multi-tenant architecture with Navigator, Fly.io deployment, or frontend stack details. Use when this capability is needed.
- tomevault-io Bundle Koota 2
Use Koota for data-oriented Entity Component System architecture with React bindings. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 13
Create 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. Use when this capability is needed.
- tomevault-io Bundle Refactor 3
Step-by-step procedure for refactoring backend models or frontend components in this repo. Use when asked to "refactor X", clean up a method/component, or reduce duplication — anything that changes structure without changing behavior. Enforces the behavior-/query-preserving rules from CLAUDE.md. Use when this capability is needed.
- tomevault-io Bundle Vue 19
Vue.js开发专家助手。当用户需要进行Vue组件开发、Pinia状态管理、Vue Router或Vue 3应用构建时调用。 Use when this capability is needed.
- tomevault-io Bundle Fastapi 5
FastAPI best practices and conventions. Use when working with FastAPI APIs, Pydantic models, dependencies, streaming responses including Server-Sent Events (SSE), and serving frontend apps. Keeps FastAPI code clean and up to date with the latest features and patterns. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 4
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle Blazor 2
Guidelines for Blazor development including component lifecycle, state management, and performance optimization Use when this capability is needed.
- tomevault-io Bundle Vercel React Best Practices 13
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Use when this capability is needed.
- tomevault-io Bundle Vue 20
編輯 .vue 組件、建立 Vue 3 組件、撰寫 composables 或測試 Vue 代碼時使用 - 提供 Composition API 模式、props/emits 最佳實踐、VueUse 整合、reactive destructuring 指引 Use when this capability is needed.
- tomevault-io Bundle Frontend Design 5
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle Vue 21
Build Vue 3 applications with Composition API, proper reactivity patterns, and production-ready components. Use when this capability is needed.
- tomevault-io Bundle Pinia 3
Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps. Use when this capability is needed.
- tomevault-io Bundle Vue 22
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive. Use when this capability is needed.
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 agents-sdk, refactor, diagnose. 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.