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 Component Patterns 2Use when creating, modifying, or refactoring Angular components. Triggers on "create component", "add input", "add output", "signal", "computed", "host binding", "content projection", "Spartan UI", or component structure questions.
- tomevault-io Bundle Tanstack Router 5
Build type-safe React applications with TanStack Router. Covers file-based routing, type-safe params, search params, loaders, and code splitting. Use for React SPAs requiring type-safe navigation, nested layouts, and data loading patterns. Use when this capability is needed.
- tomevault-io Bundle Web Frameworks 2
Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects. Use when this capability is needed.
- tomevault-io Bundle Accessibility Audit 6
Perform WCAG accessibility audits on React components using automated tools and manual checks. Use when auditing accessibility, fixing a11y issues, or ensuring WCAG compliance. Use when this capability is needed.
- tomevault-io Bundle React Native 13
React Native, Expo, mobile apps. Use when working on react-native tasks, related files, debugging, implementation, review, or verification workflows. Use when this capability is needed.
- tomevault-io Bundle Markitdown 6
Convert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more. Use when this capability is needed.
- tomevault-io Bundle Markitdown 7
Convert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more. Use when this capability is needed.
- tomevault-io Bundle Nextjs App Router 3
Next.js App Router implementation workflow for route structure, server/client boundaries, and caching/revalidation behavior. Use when App Router architecture or data/rendering behavior must be implemented or changed; do not use for repository-wide architecture governance or release management policy. Use when this capability is needed.
- tomevault-io Bundle Testing Patterns 22
Jest testing patterns for the Odyssey frontend. Use when writing unit tests, fixing test failures, or setting up mocks. Covers fetchAPI mocking, Server Action mocking, next-auth mocking, component testing with RTL, and mock data conventions. Use when this capability is needed.
- tomevault-io Bundle Vue 55
Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns. Use when this capability is needed.
- tomevault-io Bundle Vue Pinia Best Practices 3
Pinia stores, state management patterns, store setup, and reactivity with stores. Use when this capability is needed.
- tomevault-io Bundle Next Cache Components 17
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag Use when this capability is needed.
- tomevault-io Bundle Next Cache Components 18
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag Use when this capability is needed.
- tomevault-io Bundle Next Intl Add Language 3
為 Next.js + next-intl 應用程式新增語言 Use when this capability is needed.
- tomevault-io Bundle Requesting Code Review 16
Use when completing tasks, implementing major features, or before merging to verify work meets requirements
- tomevault-io Bundle Naming Conventions 4
Expert in naming conventions for files, directories, classes, functions, and variables. **ALWAYS use when creating ANY files, folders, classes, functions, or variables, OR when renaming any code elements.** Use proactively to ensure consistent, readable naming across the codebase. Examples - "create new component", "create file", "create folder", "name this function", "rename function", "rename file", "rename class", "refactor variable names", "review naming conventions". Use when this capability is needed.
- tomevault-io Bundle React Native Design 6
Master React Native styling, navigation, and Reanimated animations Use when this capability is needed.
- tomevault-io Bundle React Native Design 7
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 Remotion Best Practices 23
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle Frontend Patterns 7
React component patterns, state management, accessibility, and frontend best practices. Use when building UI components or implementing client-side features. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 111
Design and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support. Use when this capability is needed.
- tomevault-io Bundle Documentation Lookup 9
Fetch up-to-date library and framework docs via Context7 MCP instead of training data. USE WHEN answering setup or config questions, API references, or code examples, or when the user names a framework (e.g. React, Next.js, Prisma). Use when this capability is needed.
- tomevault-io Bundle Typescript Rules 2
React/TypeScript frontend development rules including type safety, component design, state management, and error handling. Use when implementing React components, TypeScript code, or frontend features. Use when this capability is needed.
- tomevault-io Bundle React 16
Core React 19 patterns including hooks, Suspense, lazy loading, component structure, TypeScript best practices, and performance optimization. Use when working with React components, hooks, lazy loading, Suspense boundaries, or React-specific TypeScript patterns. Use when this capability is needed.
- tomevault-io Bundle React Modernization 3
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to... Use when this capability is needed.
- tomevault-io Bundle Wcag Audit Patterns 2
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing ac... Use when this capability is needed.
- tomevault-io Bundle Vercel Composition Patterns 18
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
- tomevault-io Bundle Senior Architect 8
Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, Bun, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack decision frameworks, and dependency analysis. Use when designing system architecture, making technical decisions, creating architecture diagrams, evaluating trade-offs, or defining integration patterns. Use when this capability is needed.
- tomevault-io Bundle NPM Library Setup 2
Comprehensive guidance on setting up npm libraries with package.json, with a preference for ES Modules (ESM). Use when setting up npm packages, configuring ESM, TypeScript packages, or React component libraries. Use when this capability is needed.
- tomevault-io Bundle Vue Options API Best Practices 2
Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only. Use when this capability is needed.
- tomevault-io Bundle AI Elements 4
Create new AI chat interface components for the ai-elements library following established composable patterns, shadcn/ui integration, and Vercel AI SDK conventions. Use when creating new components in packages/elements/src or when the user asks to add a new component to ai-elements. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 113
Guidelines for building UI — components, layouts, responsive design, accessibility, and visual polish Use when this capability is needed.
- tomevault-io Bundle Implement Github Feature 2
Design and implement a new feature or component from a GitHub issue. Use for net-new functionality, not bug fixes. Use when this capability is needed.
- tomevault-io Bundle React Native Design 5
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 Explaining Code 3
Explains code with visual diagrams and analogies. Use when explaining how code works, teaching about a codebase, or when the user asks "how does this work? Use when this capability is needed.
- tomevault-io Bundle Frontend Design 114
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.
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 component-patterns, tanstack-router, web-frameworks. 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.