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 Neon ServerlessConfigures Neon Serverless Driver for Next.js, Vercel Edge Functions, AWS Lambda, and other serverless environments. Installs @neondatabase/serverless, sets up environment variables, and creates working API route examples with TypeScript types. Use when users need to connect their application to Neon, fetch or query data from a Neon database, integrate Neon with Next.js or serverless frameworks, or set up database access in edge/serverless environments where traditional PostgreSQL clients don't work.
- tomevault-io Bundle Nexu Io Open Design Gsap React
GSAP with React
- tomevault-io Bundle Next JS Server Components
RSC usage, "use client" directive, and Component Purity. Use when this capability is needed.
- tomevault-io Bundle Add API Route
Create Next.js API routes for backend proxies, server-side aggregation, or third-party API integrations with caching and error handling. Use when this capability is needed.
- tomevault-io Bundle Gen Rtl Test
Generate React Testing Library tests following OCP Console best practices Use when this capability is needed.
- tomevault-io Bundle Visit Webpage
Visit a webpage and extract its content as markdown, or fetch images. Use for reading articles, documentation, or any web page content. Handles both HTML pages (via Jina Reader) and image URLs (downloads and saves locally). Use when this capability is needed.
- tomevault-io Bundle Domscribe
Work with Domscribe — the pixel-to-code bridge. Use when setting up, initializing, or configuring Domscribe for a project, OR when editing or modifying UI components (React, Vue, Next.js, Nuxt), implementing features from captured UI annotations, querying runtime context for source locations, exploring component structure, or when user mentions annotations, queued tasks, UI changes, props, state, DOM, or asks about how elements render at runtime. Use when this capability is needed.
- tomevault-io Bundle Create Component
프로젝트의 shadcn/ui + Tailwind 패턴에 따라 새 React 컴포넌트를 생성합니다. UI 프리미티브(버튼, 다이얼로그 등) 또는 도메인 컴포넌트(ServerMap, Inspector 등)를 새로 만들 때 반드시 이 스킬을 사용하세요. Use when this capability is needed.
- tomevault-io Bundle IOS Design
SwiftUI interface implementation patterns aligned with the iOS 26 / Swift 6.2 clinic modular MVVM-C architecture, grounded in Creative Selection and Design Like Apple principles. Use when building new SwiftUI views/screens while respecting Domain/Data boundaries, App-target route-shell navigation, and production-grade accessibility/interaction standards. Use when this capability is needed.
- tomevault-io Bundle Prowler Cloud Prowler React 19
No Manual Memoization (REQUIRED)
- tomevault-io Bundle Docling
Docling document parser for PDF, DOCX, PPTX, HTML, images, and 15+ formats. Use when parsing documents, extracting text, converting to Markdown/HTML/JSON, chunking for RAG pipelines, or batch processing files. Triggers on DocumentConverter, convert, convert_all, export_to_markdown, HierarchicalChunker, HybridChunker, ConversionResult. Use when this capability is needed.
- tomevault-io Bundle Capture Usage4claude Screenshots
Automate Usage4Claude interface screenshots with CleanShot X on macOS. Use when Codex needs to capture localized Usage4Claude menu-bar popover screenshots, switch Usage4Claude display/language settings, save files such as detail.claude.en@2x.png, or troubleshoot CleanShot/window-capture automation that depends on macOS Accessibility, osascript, CoreGraphics mouse movement, and the Usage4Claude Debug app. Use when this capability is needed.
- tomevault-io Bundle Slide Writer
把想法、大纲、文档或草稿变成结构清晰、设计精良的企业级 HTML 演示文稿。 Use when this capability is needed.
- tomevault-io Bundle Fe Review Vue
Vue 3/Nuxt 3 PR/diff를 사내 원칙 기반으로 리뷰. `[SEVERITY] file:line — 이슈` 형식. 4원칙 + Web Vitals + WCAG 2.2 + Composition API/반응성 함정 체크. Use when this capability is needed.
- tomevault-io Bundle Gdsfactory Gdsfactory Gdsfactory
gdsfactory Component Designer Skill
- tomevault-io Bundle Playwright UI Testing
Playwright browser automation, visual regression testing, accessibility testing, and E2E workflow validation for CIA platform Use when this capability is needed.
- tomevault-io Bundle Frontend Audit Fix
Audits frontend for 'No Mock' rule, fixes API consistency (camel/snake case), and resolves Jest/Antd test issues. Invoke for frontend QA tasks or build validation. Use when this capability is needed.
- tomevault-io Bundle Higashi Kota Video Parapara A11Y
Accessibility implementation guide aligned with WCAG 2.2 Level AA, WAI-ARIA 1.2, and WCAG2ICT.
- tomevault-io Bundle Hjemmesidekongen AI Vue Patterns
Vue Patterns
- tomevault-io Bundle Harshjudge
E2E testing orchestration for Claude Code. Use when creating, running, or managing end-to-end test scenarios — frontend (browser), backend (API), or CLI. Activates for tasks involving E2E tests, test scenario creation, test execution with evidence capture, or checking test status. Use when this capability is needed.
- tomevault-io Bundle Jackspace Claudeskillz AI Sdk UI
AI SDK UI - Frontend React Hooks
- tomevault-io Bundle Vue Pages
Generate Vue frontend pages using catch-table for CatchAdmin module with full component features. Use when this capability is needed.
- tomevault-io Bundle Frontend Vue
专业的 Vue.js 开发技能，涵盖 Nuxt 3、Vue 3 Composition API、Tailwind CSS 和 Vue 生态系统。使用此技能构建 Vue 应用程序、实现 Nuxt 功能、使用 Pinia 进行状态管理，或使用 shadcn-vue 等组件库。 Use when this capability is needed.
- tomevault-io Bundle Prowler Cloud Prowler Tailwind 4
Styling Decision Tree
- tomevault-io Bundle Pwndoc Pwndoc Test Frontend Unit
Frontend Unit Test Generator
- tomevault-io Bundle Discover Mobile
Automatically discover mobile development skills when working with iOS, Android, Swift, SwiftUI, React Native, mobile development, SwiftData, or app development. Activates for mobile development tasks. Use when this capability is needed.
- tomevault-io Bundle Migrate To Svelte
Guidelines for migrating existing Blade components from React to Svelte Use when this capability is needed.
- tomevault-io Bundle Review Docs
Use when reviewing React documentation for structure, components, and style compliance
- tomevault-io Bundle Run Services
Start all local services (backend, frontend, docs) with dependency checking, error diagnosis, and automatic recovery. Handles missing npm/python packages, port conflicts, and stale processes. Use when this capability is needed.
- tomevault-io Bundle Test Frontend
Run and verify frontend tests for the React/Vite application. Use when this capability is needed.
- tomevault-io Bundle Bun Nuxt
Use when running Nuxt 3 with Bun runtime, building Vue/Nuxt apps with Bun, or configuring Nuxt projects to use Bun for development and production.
- tomevault-io Bundle Pinia V3
Pinia v3 Vue state management with defineStore, getters, actions. Use for Vue 3 stores, Nuxt SSR, Vuex migration, or encountering store composition, hydration, testing errors. Use when this capability is needed.
- tomevault-io Bundle Snyk Studio Recipes AI Inventory
AI Component Inventory
- tomevault-io Bundle Solana Game
Solana game development with Unity, React Native, and web. Extends solana-dev-skill with gaming-specific patterns including Solana.Unity-SDK, Mobile Wallet Adapter, PlaySolana/PSG1, wallet integration, NFT systems, transaction building, and game architecture. For program development (Anchor, Pinocchio), delegates to core solana-dev skill. Use when this capability is needed.
- tomevault-io Bundle Vue Routing
Routing with Vue. client routing. Use when this capability is needed.
- tomevault-io Bundle Vue Styling
Styling with Vue. component styling. 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 neon-serverless, nexu-io--open-design--gsap-react, next-js-server-components. 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.