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 Posthog AnalyticsPostHog analytics and session replay integration for React Native mobile apps. Use when adding event tracking, understanding session replay behavior, or troubleshooting analytics setup. Use when this capability is needed.
- tomevault-io Bundle Implementing Navigation
Implements navigation patterns and routing for both frontend (React/TS) and backend (Python) including menus, tabs, breadcrumbs, client-side routing, and server-side route configuration. Use when building navigation systems or setting up routing. Use when this capability is needed.
- tomevault-io Bundle Test Guided Migration Assistant
Automatically updates a codebase to a new language version, framework version, or library update while ensuring all tests still pass. Use this skill when migrating Python 2→3, upgrading framework versions (React, Django, Angular), updating dependencies, or performing any version migration where tests define correct behavior. The skill analyzes failing tests caused by migration, categorizes errors (import errors, API changes, type errors, behavior changes), proposes systematic fixes, and verifies that test-observable behavior remains unchanged. Triggers when users ask to migrate code versions, upgrade dependencies while keeping tests passing, update framework versions, or perform test-guided version migrations. Use when this capability is needed.
- tomevault-io Bundle Balintbrews Canvas Starter Canvas Component Definition
Canonical definition
- tomevault-io Bundle Playwright Page Objects
Use when creating page objects or refactoring Playwright E2E tests for better maintainability with Page Object Model patterns.
- tomevault-io Bundle Shader React Native Effects
Implement realistic, high-performance WGSL shader effects with react-native-effects' ShaderView (WebGPU). Use when writing, porting, or debugging a shader effect, creating a new effect component, making an effect touch/scroll/audio-reactive, fixing a blank/black ShaderView, or optimizing shader performance in this repo or any app using react-native-effects. Use when this capability is needed.
- tomevault-io Bundle Compiler Development
Expertise in compiler development using LLVM infrastructure including frontend design, IR generation, optimization passes, and code generation. Use this skill when building custom programming languages, implementing DSL compilers, or working on compiler internals. Use when this capability is needed.
- tomevault-io Bundle Vue Frontend Dev
Use for implementing or repairing the Vue frontend of a web app with Vue 3, Vite, vue-router, Pinia, vue-i18n, Tailwind CSS v4. Use when this capability is needed.
- tomevault-io Bundle Nextjs Optimizer
Specialized guidance for Next.js performance and architecture. Use when this capability is needed.
- tomevault-io Bundle J4flmao Agent Skills Frontend Internationalization
Frontend Internationalization (i18n)
- tomevault-io Bundle Stitch To React
Converts Google Stitch exports into React components with design DNA integration. Use when user references design-intent/google-stitch exports, mentions "convert Stitch output", "Stitch to React", or processes Stitch code directories containing HTML + PNG pairs.
- tomevault-io Bundle Coder Convex
Self-hosted Convex development in Coder workspaces with authentication, queries, mutations, React integration, and environment configuration Use when this capability is needed.
- tomevault-io Bundle Frontend Type Generation
CRITICAL. How to keep frontend data types in sync with the backend, ensuring type safety and reducing bugs. Use when this capability is needed.
- tomevault-io Bundle Markitdown Skill
Guide for using Microsoft MarkItDown - a Python utility for converting files to Markdown. Use when converting PDF, Word, PowerPoint, Excel, images, audio, HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs, Jupyter notebooks, RSS feeds, or Wikipedia pages to Markdown format. Also use for document processing pipelines, LLM preprocessing, or text extraction tasks. Use when this capability is needed.
- tomevault-io Bundle Laguagu Claude Code Nextjs Skills Cache Components
**PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations.
- tomevault-io Bundle Update Component Styles
Update component styling following the SCSS to Lit CSS workflow with proper theme support Use when this capability is needed.
- tomevault-io Bundle Icc Version
Activate when user asks about version, system status, "what version", or wants to verify ICC installation. Displays version, component status, and installation info. Use when this capability is needed.
- tomevault-io Bundle Itsjavi Frontend Framework Benchmarks Bench Test Suite
Bench Test Suite
- tomevault-io Bundle Obsidian CSS Variables
Obsidian CSS variables 공식 문서를 참조하여 테마/플러그인 개발 시 올바른 CSS 변수 사용을 안내합니다. WebFetch 도구와 Jina Reader API를 사용하여 최신 문서를 마크다운으로 가져올 수 있습니다. Use when this capability is needed.
- tomevault-io Bundle Webdev React Patterns
Modern React 18+ patterns with TypeScript — hooks, state management, composition, performance optimization, and testing best practices. Use when this capability is needed.
- tomevault-io Bundle Dgm Md To PDF Chapter Polisher
Use when ChatGPT/Codex needs to transform multiple Markdown working files for a single research paper chapter into a polished, journal-style chapter draft, create export-ready Markdown/HTML variants, and generate a single-chapter PDF.
- tomevault-io Bundle Design System Foundations
Define scalable design-system foundations with clear ownership and adoption boundaries. Use when multiple teams need shared component standards, foundational patterns, and ownership rules to deliver consistent UI across products; do not use for backend data-model or deployment pipeline decisions. Use when this capability is needed.
- tomevault-io Bundle Cross Layer Collaboration
Use when changes span frontend, backend, and tests where each layer needs a dedicated owner plus an integration agent for cross-cutting consistency
- tomevault-io Bundle Accessibility Implementation
WCAG 2.1/2.2 compliance implementation, ARIA patterns, keyboard navigation, focus management, and accessibility testing. Use when implementing accessible components, fixing accessibility issues, or when the user mentions WCAG, ARIA, screen readers, or keyboard navigation. Use when this capability is needed.
- tomevault-io Bundle Owasp Security Audit
Use when performing a cybersecurity audit, security review, OWASP Top 10 compliance check, vulnerability assessment, or preparing for a penetration test on a Node.js/Express/React application.
- tomevault-io Bundle Test Frontend Units
Executes frontend component unit tests for the Fake Survey Generator React application using Vitest. This skill validates that React components are properly tested and that existing tests continue to pass. Reports test failures and code coverage metrics. Use when this capability is needed.
- tomevault-io Bundle Web Design Guidelines Validator
Use when reviewing UI code for accessibility, UX patterns, or design compliance. Use when you see missing ARIA labels, poor color contrast, inaccessible forms, small touch targets, or broken focus management.
- tomevault-io Bundle Design Navigation
Design navigation architecture including menus, breadcrumbs, and mega-menus. Generates structured navigation with accessibility. Use when this capability is needed.
- tomevault-io Bundle React Webview Architecture
Architecture patterns for React-based webviews in the vscode-documentdb extension. Use when creating new webview components, modifying existing views (CollectionView, DocumentView), working with state management (Context API), integrating Fluent UI components, handling Monaco Editor or SlickGrid, solving stale closure bugs with refs, or debugging webview rendering issues. Does NOT cover tRPC messaging (see webview-trpc-messaging skill) or accessibility/ARIA (see accessibility-aria-expert skill). Use when this capability is needed.
- tomevault-io Bundle Neverinfamous Memory Journal MCP Next Cache Components
Cache Components (Next.js 16+)
- tomevault-io Bundle Install Component Guide
Fetches and splits the daisyUI style guide from the official LLM text file into organized sections Use when this capability is needed.
- tomevault-io Bundle Modern Next JS
Next.js App Router best practices Use when this capability is needed.
- tomevault-io Bundle Reviewing Tailwind Patterns
Review Tailwind CSS v4 patterns for configuration, theming, and utility usage. Use when reviewing CSS files, Vite configs, or components using Tailwind. Use when this capability is needed.
- tomevault-io Bundle Dtsong Frontend QA Skills Regression Test Generator
Regression Test Generator
- tomevault-io Bundle Create Health Check
Generates Health Check pattern for PHP 8.4. Creates application-level health endpoints with component checkers (Database, Redis, RabbitMQ), status aggregation, and RFC-compliant JSON response. Includes unit tests.
- tomevault-io Bundle Powerforge Website Starter
Create, refactor, or standardize PowerForge.Web websites. Use when setting up or fixing site.json/pipeline.json, dev vs CI modes, baselines and budgets, theme.manifest.json contracts (features/requiredPartials/slots/CSS selectors), navigation consistency, API docs (header/footer + multi-CSS), and agent handoff docs to prevent half-cooked websites and regressions across multiple sites. 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 posthog-analytics, implementing-navigation, test-guided-migration-assistant. 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.