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 UI Mobile 3Mobile UI patterns - React Native, iOS/Android, touch targets Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder 13
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 Markitdown 5
CLI for converting files to Markdown using Microsoft's markitdown. Use when converting PDF, DOCX, PPTX, XLSX, HTML, images, audio, or other file formats to Markdown for text analysis or LLM processing. Triggered by requests involving file-to-markdown conversion, document text extraction, or preparing files for LLM input. Use when this capability is needed.
- tomevault-io Bundle React Skills 2
React patterns, hooks, and best practices for modern frontend development Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 26
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. Use when this capability is needed.
- tomevault-io Bundle Hugo Template Guidance 2
Use whenever you need to understand how this theme works — adding pages, managing content, configuring the site, using partials/components/modules, project architecture, scripts, or styling/theming (Tailwind v4, Bootstrap 5, or a hybrid — verify which). Use for ANY question about the structure, usage, or customization of the template or theme.
- tomevault-io Bundle Frontend Developer 2
Frontend開発時に必要な検証を実施するスキルです。Lint、ビルド、ユニットテスト、E2Eテストを含みます。Frontend（apps/frontend）のコード変更時に使用してください。 Use when this capability is needed.
- tomevault-io Bundle Iso 27001 Controls 2
ISO 27001:2022 Annex A controls for static HTML/CSS websites on GitHub Pages Use when this capability is needed.
- tomevault-io Bundle Secure Code Review 2
Security code review for HTML/CSS/JavaScript in static websites Use when this capability is needed.
- tomevault-io Bundle Vue Expert JS 4
Use when building Vue 3 applications with JavaScript only (no TypeScript). Invoke for JSDoc typing, vanilla JS composables, .mjs modules.
- tomevault-io Bundle Zustand Store 2
Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand. Use when this capability is needed.
- tomevault-io Bundle Vue Skilld 4
Use when working with the progressive JavaScript framework for building modern web UI. ALWAYS use when editing or working with *.vue files or code importing \"vue\". Consult for debugging, best practices, or modifying vue, core.
- tomevault-io Bundle Frontend Design 85
Create distinctive, production-grade frontend interfaces. Use when building web components, pages, dashboards, React components, HTML/CSS layouts, or styling any web UI. Generates creative, polished code that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle Frontend UI UX 2
Designer-turned-developer expertise for crafting stunning UI/UX even without design mockups Use when this capability is needed.
- tomevault-io Bundle React Native Design 2
Master React Native styling, navigation, and Reanimated animations for Use when this capability is needed.
- tomevault-io Bundle React Native Design 3
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations. Use when this capability is needed.
- tomevault-io Bundle Vue 53
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.
- tomevault-io Bundle Webapp Testing 27
Automates UI/UX testing and verification using Chrome DevTools MCP with optional Next.js DevTools support for comprehensive web application quality assurance.
- tomevault-io Bundle API Routes 2
Create and work with Next.js API routes in src/pages/api/. Use when creating API endpoints, handling HTTP requests, or working with server-side API logic in Pages Router. Use when this capability is needed.
- tomevault-io Bundle Vue Debug Guides 4
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues. Use when this capability is needed.
- tomevault-io Bundle Using Superpowers 8
Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions
- tomevault-io Bundle Frontend CSS 2
Your approach to handling frontend CSS. Use this skill when working on files where frontend CSS comes into play. Use when this capability is needed.
- tomevault-io Bundle API Docs Generator 3
Generate OpenAPI 3.1 specification from existing Next.js API routes. Use when asked to generate API docs, create OpenAPI spec, document endpoints, generate Swagger file, or create API documentation. Use when this capability is needed.
- tomevault-io Bundle Web Design Guidelines 24
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 33
Vue 3 and Vue.js best practices for TypeScript, vue-tsc, and Volar. This skill should be used when writing, reviewing, or refactoring Vue components to ensure correct typing patterns. Triggers on tasks involving Vue components, props extraction, wrapper components, template type checking, or Volar configuration. Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 32
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling Use when this capability is needed.
- tomevault-io Bundle Frontend Design 105
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 Auth0 React Native 4
Use when adding authentication to React Native or Expo mobile apps (iOS/Android) with biometric support - integrates react-native-auth0 SDK with native deep linking
- tomevault-io Bundle React Native 12
Expert React Native guide covering Expo vs bare workflow, navigation (React Navigation, Expo Router), native modules, platform-specific code, performance (FlatList, memo, Hermes), state management, animations (Reanimated, Gesture Handler), testing (Detox, RNTL), and deployment (EAS Build, CodePush). Use when building cross-platform mobile apps with React Native. Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 33
Next.js 15+ App Router best practices for pages, layouts, routes, server components, server actions, caching, API routes, and streaming. Use when building or reviewing Next.js code, implementing RSC patterns, PPR, metadata, error boundaries, or proxy.ts. Covers React 19 conventions, data fetching, ISR, and common mistakes. Use when this capability is needed.
- tomevault-io Bundle Mobile React Native 2
React Native patterns — Expo, navigation, performance optimization, New Architecture Use when this capability is needed.
- tomevault-io Bundle Frontend Patterns 5
Frontend patterns for Rails applications using Slim templates, Stimulus JavaScript framework, CSS with Optics utilities. Use when building views, adding interactivity, styling components, or when the user mentions Slim, Stimulus, JavaScript, CSS, or frontend development. Use when this capability is needed.
- tomevault-io Bundle Tailwind CSS 5
This skill should be used when the user asks about "Tailwind CSS", "tailwind-variants", "tv() function", "CSS-first configuration", "Tailwind breaking changes", mentions styling with Tailwind utilities, gradient syntax, or component variants with TypeScript. Use when this capability is needed.
- tomevault-io Bundle Nextjs App Router 2
PostHog integration for Next.js App Router applications Use when this capability is needed.
- tomevault-io Bundle Inertia Vue Development 3
Develops Inertia.js v2 Vue client-side applications. Activates when creating Vue pages, forms, or navigation; using <Link>, <Form>, useForm, or router; working with deferred props, prefetching, or polling; or when user mentions Vue with Inertia, Vue pages, Vue forms, or Vue navigation. Use when this capability is needed.
- tomevault-io Bundle React Native Design 4
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations. 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 ui-mobile, web-artifacts-builder, markitdown. 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.