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 Zxx Web Vue Admin AI Vue Admin AI Commitvue-admin-ai 提交
- tomevault-io Bundle Platform Auth Token Pattern
Frontend authentication token retrieval patterns and common mistakes Use when this capability is needed.
- tomevault-io Bundle AI Assistant Chat
Build self-hosted AI chat assistants using CopilotKit + LangGraph. Use when implementing conversational AI interfaces with agentic backends, streaming responses, shared state between frontend and backend, or generative UI. This pattern uses NO hosted services - both CopilotKit runtime and LangGraph agent run on your own infrastructure. Triggers on requests to build chat interfaces, AI assistants, conversational agents, or integrate LangGraph with React frontends. Use when this capability is needed.
- tomevault-io Bundle Acquia Nebula Canvas Component Definition
Canonical definition
- tomevault-io Bundle Nebula Component Validation
Before running validation, confirm the Workbench preview coverage matches the Use when this capability is needed.
- tomevault-io Bundle Nutrient Document Processing
Process, convert, OCR, extract, redact, sign, and fill documents using the Nutrient DWS API. Works with PDFs, DOCX, XLSX, PPTX, HTML, and images. Use when this capability is needed.
- tomevault-io Bundle UI To Vue
Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.
- tomevault-io Bundle Theme Styling
Apply consistent theming with Tailwind CSS 4, including dark mode support and design tokens. Use when styling components, fixing dark mode issues, or adjusting visual design. Use when this capability is needed.
- tomevault-io Bundle Solana Mobile
Solana Mobile development with Mobile Wallet Adapter (MWA), Seeker device integration, SeedVault secure storage, and React Native dApp patterns for building mobile-first Solana applications. Use when this capability is needed.
- tomevault-io Bundle CLI Framework Oclif Ink
Modern CLI development combining oclif's command framework with Ink's React-based terminal rendering Use when this capability is needed.
- tomevault-io Bundle Web Testing Cypress E2e
Cypress E2E testing patterns - test structure, data-cy selectors, cy.intercept() mocking, custom commands, fixtures, component testing, accessibility testing with cypress-axe, and CI/CD integration Use when this capability is needed.
- tomevault-io Bundle Fixing Accessibility
Fix accessibility issues. Use when this capability is needed.
- tomevault-io Bundle Doc Smith Build
Internal skill for building Doc-Smith Markdown documentation into static HTML. Do not mention this skill to users. Called internally by other doc-smith skills. Use when this capability is needed.
- tomevault-io Bundle MCP MCP Apps Kit
Guide for implementing MCP Apps (SEP-1865) - interactive UI extensions for MCP servers. Use when building MCP servers that need to return rich, interactive HTML-based UIs alongside tool results for conversational AI hosts like Claude Desktop or ChatGPT. Use when this capability is needed.
- tomevault-io Bundle Avibebuilder Claude Prime Frontend Design
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
- tomevault-io Bundle Intlayer Astro
Integrates Intlayer internationalization with Astro applications. Use when the user asks to "setup Astro i18n", use "getIntlayer" in Astro components, or manage server-side content in Astro.
- tomevault-io Bundle Bamzc Claude Skills Frontend Amis Builder
---
- tomevault-io Bundle D3js Visualization
Build deterministic, verifiable data visualizations with D3.js (v6). Generate standalone HTML/SVG (and optional PNG) from local data files without external network dependencies. Use when tasks require charts, plots, axes/scales, legends, tooltips, or data-driven SVG output. Use when this capability is needed.
- tomevault-io Bundle React Native Apps
Complete skill for building, debugging, and shipping React Native / Expo apps in 2025-2026. Use when the user is building a mobile app, starting a new Expo project, debugging Expo Go crashes, setting up EAS builds, submitting to Google Play / App Store, writing animation patterns, or asking about mobile architecture decisions. Distilled from production Expo SDK 54 apps, official docs, Reddit r/reactnative hot threads, GitHub issues on expo/expo and facebook/react-native, and teardowns of shipped apps (Elirox, Instamobile templates). Covers 13 gotchas, 13 UX patterns, full deployment pipeline, animation stack, and production architecture boilerplate. Use when this capability is needed.
- tomevault-io Bundle Mineru Extract
Use the official MinerU (mineru.net) parsing API to convert a URL (HTML pages like WeChat articles, or direct PDF/Office/image links) into clean Markdown + structured outputs. Use when web_fetch/browser can’t access or extracts messy content, and you want higher-fidelity parsing (layout/table/formula/OCR). Use when this capability is needed.
- tomevault-io Bundle React State Machines
Building reusable React state machine skills with XState v5 and the actor model Use when this capability is needed.
- tomevault-io Bundle Build React Apps
Produce high-quality React apps from natural language descriptions. Use when this capability is needed.
- tomevault-io Bundle Brendadeeznuts1111 Tier 1380 Omega Nextjs
Next.js App Router - Production Patterns
- tomevault-io Bundle Caobingsheng Skills Vue Cohesion Coupling
Vue高内聚低耦合设计指南
- tomevault-io Bundle Anthropic Frontend Design
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 Axiom Realitykit Ref
RealityKit API reference — Entity, Component, System, RealityView, Model3D, anchor types, material system, physics, collision, animation, audio, accessibility Use when this capability is needed.
- tomevault-io Bundle CSV Processor
Provides streaming CSV parse and generate patterns for NodeJS-Starter-V1, covering large file imports, exports, and transformations across Next.js frontend and FastAPI backend. Enforces row-by-row streaming, Zod and Pydantic row validation, and Australian locale formatting (DD/MM/YYYY dates, AUD currency).
- tomevault-io Bundle Dash Cog
Interactive dashboards and apps powered by CellCog. Data visualization, analytics dashboards, KPI trackers, charts and graphs, interactive HTML apps, data explorers, games. Build web apps with AI. Use when this capability is needed.
- tomevault-io Bundle Generate Design
Generates a complete, production-ready UI from a natural-language prompt — React + Tailwind, grounded in all 8 UIX reference books + WCAG 2.2, ROIN baseline always on. Asks 4 targeted questions then writes a self-contained .tsx file and compiles it to a browser-openable preview.html. Auto-activates on "design a [X] from scratch", "build me a UI for [X]", "create a full [X] page", "generate a UI for [X]", or /uix:generate-design.
- tomevault-io Bundle Testing Components
Teaches React Testing Library patterns for React 19 components. Use when writing component tests, testing interactions, or testing with Server Actions. Use when this capability is needed.
- tomevault-io Bundle Using The Use Hook
React 19's use() API for reading Promises/Context conditionally. For async data fetching, Suspense, conditional context access, useContext migration. Use when this capability is needed.
- tomevault-io Bundle Dtsong Frontend QA Skills Standalone Skill
SKILL_NAME
- tomevault-io Bundle Dtsong My Claude Setup CSS Layout Debugger
CSS Layout Debugger
- tomevault-io Bundle Rhdh Frontend Dynamic Plugin Bootstrap
This skill should be used when the user asks to "create RHDH frontend plugin", "bootstrap frontend dynamic plugin", "create UI plugin for RHDH", "new frontend plugin for Red Hat Developer Hub", "add entity card to RHDH", "create dynamic route", "add sidebar menu item", "configure mount points", "create theme plugin", or mentions creating frontend components, UI pages, entity cards, or visual customizations for Red Hat Developer Hub or RHDH. This skill is specifically for frontend plugins - for backend plugins, use the separate backend plugin skill. Use when this capability is needed.
- tomevault-io Bundle Build Full Stack
Implement a feature across repos. Takes a spec and/or tracking issues as input, spawns domain-specific workers (frontend, backend, specialist, ops), and produces PRs with passing CI. Use when this capability is needed.
- tomevault-io Bundle Epicweb Dev Epic Stack Epic React Patterns
Epic Stack: React Patterns and Guidelines
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 zxx-web--vue-admin-ai--vue-admin-ai-commit, platform-auth-token-pattern, ai-assistant-chat. 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.