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 A11Y AllyUse when running comprehensive WCAG accessibility audits with axe-core + pa11y + Lighthouse, generating context-aware remediation, or testing video accessibility. Supports 3-tier browser cascade with graceful degradation.
- tomevault-io Bundle Vue Best Practices 30
Vue 3 和 Vue.js 的最佳实践，涵盖 TypeScript、vue-tsc 和 Volar。在编写、审查或重构 Vue 组件时使用此技能，确保正确的类型模式。在涉及 Vue 组件、props 提取、包装组件、模板类型检查或 Volar 配置的任务时触发。 Use when this capability is needed.
- tomevault-io Bundle Docs Writer Reference 11
Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack. Use when this capability is needed.
- tomevault-io Bundle Component Naming 2
Enforce consistent React component naming conventions using domain + role patterns. Use when creating, reviewing, or refactoring components. Use when this capability is needed.
- tomevault-io Bundle Wiki QA 3
Answer repository questions grounded entirely in source code evidence. Use when user asks a question about the codebase, user wants to understand a specific file, function, or component, or user asks \"how does X work\" or \"where is Y defined\". Use when this capability is needed.
- tomevault-io Bundle Vue Skilld 5
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 91
Design formula bắt buộc cho MỌI web UI task (landing, storefront, admin page, component, page mới, refactor UI, theme, style). Chắt lọc từ 3 reference Kimi. Auto-trigger mỗi khi chạm file .tsx/.jsx/.vue/.svelte/.html/.css hoặc khi user nói build/thêm/sửa giao diện web, page, trang, component, landing, storefront, shop, UI. KHÔNG áp dụng cho Flutter/iOS/Android/React Native mobile — dùng mobile-design skill riêng. Use when this capability is needed.
- tomevault-io Bundle Worktree Manager 5
Create, manage, and cleanup git worktrees with Claude Code agents across all projects. USE THIS SKILL when user says "create worktree", "spin up worktrees", "new worktree for X", "worktree status", "cleanup worktrees", or wants parallel development branches. Handles worktree creation, dependency installation, validation, agent launching in Ghostty, and global registry management. Use when this capability is needed.
- tomevault-io Bundle Mobile Developer 4
Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use when this capability is needed.
- tomevault-io Bundle Senior Architect 5
Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. I... Use when this capability is needed.
- tomevault-io Bundle Senior Fullstack 3
Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architec... Use when this capability is needed.
- tomevault-io Bundle Slack Automation 2
Automate Slack messaging, channel management, search, reactions, and threads via Rube MCP (Composio). Send messages, search conversations, manage channels/users, and react to messages programmatica... Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 30
Test web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing screenshots, and viewing browser logs. Use when testing the website or debugging UI issues. Use when this capability is needed.
- tomevault-io Bundle Theme Factory 17
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly. Use when this capability is needed.
- tomevault-io Bundle Nuxt UI 7
Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
- tomevault-io Bundle Web Design Guidelines 22
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 Testing Best Practices 9
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing. Use when this capability is needed.
- tomevault-io Bundle Accessibility Audit 3
Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Requires Webflow Designer connection. Excludes image alt text (covered by asset-audit skill). Use when this capability is needed.
- tomevault-io Bundle Nextjs App Router Patterns 2
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components. Use when this capability is needed.
- tomevault-io Bundle Coding Standards 18
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 92
Frontend design expert for polished, production-ready UIs with distinctive visual characteristics and micro-interactions. Use when improving visual design, adding CSS animations, or polishing the UI with shadows, gradients, and transitions. Rejects generic AI aesthetics in favor of bold, distinctive design choices. Use when this capability is needed.
- tomevault-io Bundle React Native Expo 2
React Native and Expo development context skill. Covers mobile-specific patterns, navigation, native modules, platform differences, and wraps official Expo plugins for SDK upgrades, UI components, deployment, and CI/CD. Use when this capability is needed.
- tomevault-io Bundle Shadcn 7
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
- tomevault-io Bundle Frontend Design 93
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 React Patterns 9
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices. Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 34
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 Webapp Testing 35
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 Vue Expert 14
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 Langchain 18
Framework for building LLM-powered applications with agents, chains, and RAG. Supports multiple providers (OpenAI, Anthropic, Google), ReAct agents, tool calling, memory management, and vector store retrieval. Use for building chatbots, question-answering systems, autonomous agents, or RAG applications. Use when this capability is needed.
- tomevault-io Bundle Langchain 19
Framework for building LLM-powered applications with agents, chains, and RAG. Supports multiple providers (OpenAI, Anthropic, Google), ReAct agents, tool calling, memory management, and vector store retrieval. Use for building chatbots, question-answering systems, autonomous agents, or RAG applications. Use when this capability is needed.
- tomevault-io Bundle React Component Performance 2
Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps. Use when this capability is needed.
- tomevault-io Bundle Remotion Best Practices 19
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle React Native 11
React Native mobile patterns, platform-specific code Use when this capability is needed.
- tomevault-io Bundle Frontend Design 103
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 Nextjs Developer 3
Expert Next.js development with App Router, Server Components, and modern React patterns Use when this capability is needed.
- tomevault-io Bundle Geniml 4
This skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning. 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 a11y-ally, vue-best-practices, docs-writer-reference. 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.