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 Vue EcosystemExpert Vue 3.5+ and Nuxt 3 guidance covering reactivity, composables, SFC architecture, SSR/data fetching, state management, and testing. Use when writing or reviewing Vue or Nuxt code. Use when this capability is needed.
- tomevault-io Bundle Shopify Polaris Web Components
Use Shopify Polaris Web Components (s-* custom elements) for App Home UI. Use when building App Home surfaces (not embedded apps), designing UI with s-page, s-section, s-stack, s-box, s-button, and other s-* components. Do not use @shopify/polaris React - App Home requires Web Components. Use when this capability is needed.
- tomevault-io Bundle Tanstack Table Vue Compose With Tanstack Pacer
Compose @tanstack/vue-table with @tanstack/pacer
- tomevault-io Bundle Tanstack Table Vue Compose With Tanstack Query
Compose @tanstack/vue-table with @tanstack/vue-query
- tomevault-io Bundle Tanstack Table Vue Compose With Tanstack Store
Compose @tanstack/vue-table with @tanstack/vue-store
- tomevault-io Bundle Tanstack Store
Framework-agnostic, immutable reactive data store with framework adapters for React, Vue, Solid, Angular, and Svelte. Use when this capability is needed.
- tomevault-io Bundle Tanstack Table
Headless UI for building powerful tables & datagrids for TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, and Lit. Use when this capability is needed.
- tomevault-io Bundle Netlify Integration
Deploy and manage Netlify projects using Next.js with serverless functions, environment variables, and continuous deployment. Use this skill when working with Netlify deployments, configuring netlify.toml, managing Netlify Functions, debugging webhooks, setting environment variables, or troubleshooting deployment issues for Next.js applications on Netlify. Essential for Twilio-Aldea and similar serverless SMS/telephony projects. v2.0 includes official Netlify documentation, production patterns from Twilio-Aldea (webhook timeout solutions, background functions), and TypeScript code examples. Use when this capability is needed.
- tomevault-io Bundle Techwavedev Agi Agent Kit Nextjs Supabase Auth
Next.js + Supabase Auth
- tomevault-io Bundle Tencentblueking Blueking Dbm Vue Component Dev
Vue Component Development
- tomevault-io Bundle Web Development
Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.
- tomevault-io Bundle Nextjs API Routes
Next.js App Router API route patterns Use when this capability is needed.
- tomevault-io Bundle Nextjs Middleware
Next.js middleware patterns for request processing Use when this capability is needed.
- tomevault-io Bundle Fluent UI
Microsoft Fluent UI — Fluent 2 design language implementation. `@fluentui/react-components` v9 (React, active, used by Teams/Copilot) + `@fluentui/web-components` v3 RC (framework-agnostic). Use for Microsoft 365 plugin integration, Teams apps, enterprise apps wanting Fluent aesthetic. ⚠️ v8 (`@fluentui/react` / Fabric) is maintenance-only. Use when this capability is needed.
- tomevault-io Bundle Cleaning Data
Systematic data quality remediation - detect duplicates/outliers/inconsistencies, design cleaning strategy, execute transformations, verify results (component skill for DataPeeker analysis sessions) Use when this capability is needed.
- tomevault-io Bundle Xm Cloud
Apply when working with Sitecore XM Cloud, JSS, Next.js rendering host, or Experience Edge Use when this capability is needed.
- tomevault-io Bundle Funstack Static Knowledge
Use this skill when you need information about `@funstack/static` (the React framework your app is built with). What it is even about, API references, best practices, etc.
- tomevault-io Bundle Software Frontend
Production-grade frontend for Next.js, Vue, Angular, and Svelte. Use when building UI, fixing hydration errors, or setting up a new web project. Use when this capability is needed.
- tomevault-io Bundle Creating Documentation
Create and review README files and repository documentation that follows best practices for clarity, accessibility, and discoverability. Use when a user asks to create a README, write project documentation, improve existing documentation, add a CONTRIBUTING guide, review documentation for accessibility, or document a new repository. Use when this capability is needed.
- tomevault-io Bundle Implement Frontend Routing
Implement frontend routing with predictable route definitions, lazy loading, nested layouts, and error/404 handling. Use when this capability is needed.
- tomevault-io Bundle Organize Frontend Codebase
Organize a frontend codebase by feature/module with clear public exports, predictable naming, and minimal cross-feature coupling. Use when this capability is needed.
- tomevault-io Bundle Frontend UI
Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook Use when this capability is needed.
- tomevault-io Bundle Yellinzero Aico Aico Frontend Style Extraction
Style Extraction
- tomevault-io Bundle Designing Frontend
Build distinctive, production-grade frontend interfaces with memorable aesthetics. Use when creating web components, pages, or applications. Prioritizes creative, context-specific design over generic patterns. Use when this capability is needed.
- tomevault-io Bundle Example Mobile Patterns
TEMPLATE - Mobile development patterns. Copy and customize for your mobile framework (React Native, Flutter, Swift, Kotlin, etc.) Use when this capability is needed.
- tomevault-io Bundle Comment Block
Insert structured START/END code comment blocks around features, sections, logical blocks, TODOs, bugfixes, refactors, or notes. Use when a user asks for Comment Block, says "use comment-block", "comment-block:", "comment-block manual", "comment-block config", or wants an AI agent to add standardized code comments directly into source files across HTML, Vue, React JSX/TSX, JavaScript, TypeScript, CSS, PHP, Python, Shell, Ruby, JSONC, and similar codebases. Use when this capability is needed.
- tomevault-io Bundle Gosourcemapper Guide
Guidelines for Go (Gin) and React (Vite) development in the gosourcemapper project. Use when this capability is needed.
- tomevault-io Bundle Chongdashu Phaserjs Oakwoods Playwright Testing
Frontend Testing
- tomevault-io Bundle Migration Refactoring
Automate complex code migrations and refactorings with safety patterns. Use when upgrading dependencies, migrating frameworks (React class→hooks, Flask→FastAPI), modernizing languages (Python 2→3), or performing large-scale refactories. Includes breaking change analysis, automated fix application, rollback strategies, and cross-file dependency tracking. Use when this capability is needed.
- tomevault-io Bundle D3 Viz
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment. Use when this capability is needed.
- tomevault-io Bundle Configuring Tailwind V4
Configure Tailwind CSS v4 using Vite plugin, PostCSS, or CLI with CSS-first configuration via @import and @theme directives. Use when setting up new projects or migrating build tools. Use when this capability is needed.
- tomevault-io Bundle Reviewing Hook Patterns
Review React hook usage for React 19 compliance and best practices Use when this capability is needed.
- tomevault-io Bundle Securing Server Actions
Teach server action authentication and security patterns in Next.js 16. Use when implementing server actions, form handlers, or mutations that need authentication. Use when this capability is needed.
- tomevault-io Bundle Using Container Queries
Use container queries for component-based responsive design with @container syntax and named containers. Use when building portable, reusable components that adapt to parent size instead of viewport. Use when this capability is needed.
- tomevault-io Bundle Fullstack App
Guidance for building fullstack apps with Vite (React + TypeScript) frontend and FastAPI backend. Use when demos need a web UI beyond what Streamlit provides. Use when this capability is needed.
- tomevault-io Bundle Review View
Bewertet Views auf iOS und Android nach Accessibility, Code-Qualität, Test-Coverage und UX/Layout. Erstellt automatisch Tickets für kritische Findings. Aktiviere diesen Skill wenn der User nach View-Qualitätsprüfung, View-Review, Accessibility-Check einer View, oder Cross-Platform-Konsistenz fragt. 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 vue-ecosystem, shopify-polaris-web-components, tanstack--table--vue-compose-with-tanstack-pacer. 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.