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 E Xode Vue Ssr Vue Ssr ArchitectureVue SSR Architecture
- tomevault-io Bundle Vue Composables
Patterns for Vue 3 composables with localStorage persistence in Nuxt 4. Activate when creating composables, working with useProgress, useQuiz, useCertificate, or localStorage. Use when this capability is needed.
- tomevault-io Bundle Tailwindcss Layout
Layout utilities Tailwind CSS v4.1. Flexbox (flex, justify, items, gap), Grid (grid-cols, grid-rows, place), Position (absolute, relative, fixed, sticky, inset, z-index), Container queries (@container). Use when this capability is needed.
- tomevault-io Bundle Tailwindcss Sizing
Sizing utilities Tailwind CSS v4.1. Width (w-*, w-screen, w-full, w-auto), Height (h-*, h-screen, h-full, h-dvh NEW), Min/Max (min-w-*, max-w-*, min-h-*, max-h-*), Aspect ratio (aspect-video, aspect-square). Use when this capability is needed.
- tomevault-io Bundle Sveltia Cms
Sveltia CMS Git-backed content management (Decap/Netlify CMS successor). 5x smaller bundle (300 KB), GraphQL performance, solves 260+ issues. Use for static sites (Hugo, Jekyll, 11ty, Gatsby, Astro, Next.js), blogs, docs, i18n, or encountering OAuth errors, TOML/YAML issues, CORS problems, content listing errors. Use when this capability is needed.
- tomevault-io Bundle Tanstack AI
TanStack AI (alpha) provider-agnostic type-safe chat with streaming for OpenAI, Anthropic, Gemini, Ollama. Use for chat APIs, React/Solid frontends with useChat/ChatClient, isomorphic tools, tool approval flows, agent loops, multimodal inputs, or troubleshooting streaming and tool definitions. Use when this capability is needed.
- tomevault-io Bundle Vercel Blob
Vercel Blob object storage with CDN for Next.js. Use for file uploads (images, PDFs, videos), presigned URLs, user-generated content, file management, or encountering BLOB_READ_WRITE_TOKEN errors, file size limits, client upload token errors. Use when this capability is needed.
- tomevault-io Bundle Team Shinchanfrontend
Use when you need frontend development for UI components, React, CSS, or styling.
- tomevault-io Bundle Frontend Internationalization Best Practices
Internationalization best practices for React Router framework mode using remix-i18next. Use when setting up locales, middleware, resource routes, or language switching. Use when this capability is needed.
- tomevault-io Bundle Performance Review
Review frontend code changes for performance anti-patterns and guideline compliance. Checks query hooks, stale times, bundle impact, rendering patterns, and Zustand selectors. Use when this capability is needed.
- tomevault-io Bundle Srbhr Resume Matcher React Patterns
React Performance Patterns (Local/Docker)
- tomevault-io Bundle Vue Animations
Animations with Vue. UI animations. Use when this capability is needed.
- tomevault-io Bundle Logging Monitoring
Guide to the real-time logging system, LogViewer component, and system monitoring. Use when this capability is needed.
- tomevault-io Bundle Frontend Data Flow
前端数据流与状态管理规范。涵盖 TanStack Query (React Query) 的使用模式、Query Keys 结构、API SDK 集成以及交互反馈标准。 Use when this capability is needed.
- tomevault-io Bundle Building Nextjs Apps
Specialized skill for building Next.js 15 App Router applications with React Server Components, Server Actions, and production-ready patterns. Use when implementing Next.js features, components, or application structure. Use when this capability is needed.
- tomevault-io Bundle Tanstack Table Vue Client To Server
Client-to-Server Conversion (Vue)
- tomevault-io Bundle Tanstack Table Vue Migrate V8 To V9
Migrate @tanstack/vue-table v8 → v9
- tomevault-io Bundle React Developer
Expert knowledge in React development, hooks, state management, and modern React patterns Use when this capability is needed.
- tomevault-io Bundle Sfcc Sfra Scss
Best practices for styling and theming SFRA storefronts using SCSS. Use when asked to create style overrides, theming, responsive layouts, or CSS customizations in SFCC. Use when this capability is needed.
- tomevault-io Bundle JS Hoist Regexp
Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions. Use when this capability is needed.
- tomevault-io Bundle Typescript Rules
This skill provides React/TypeScript frontend development rules including type safety, component design, state management, and error handling. Automatically loaded when implementing React components, TypeScript code, frontend features, or when "React component", "TypeScript types", "state management", or "Props design" are mentioned. Use when this capability is needed.
- tomevault-io Bundle Update Hugo Design
Make design changes to Hugo sites across templates, partials, HTML, and CSS/Tailwind while preserving the site's visual system. Use when this capability is needed.
- tomevault-io Bundle Flutter Fvm
Skill for professional Flutter development with FVM. Includes Dart 3+ patterns, optimized performance, mandatory accessibility, OWASP security, and resilience management (Error Handling). Use when this capability is needed.
- tomevault-io Bundle Tui Development
This skill provides comprehensive guidance for building modern TUI (Terminal User Interface) applications using React Use when this capability is needed.
- tomevault-io Bundle Kubrickcode Workflow Toolkit React
React Development Standards
- tomevault-io Bundle Generate Tests
Generate comprehensive unit tests for a Spark UI component using Vitest and React Testing Library. Use when the user wants to add tests, improve test coverage, or test a specific component. Use when this capability is needed.
- tomevault-io Bundle Using Lt CLI
Provides reference for the lenne.tech CLI tool (lt command). Covers lt fullstack init (workspace creation with local template symlinks), lt git get/reset (branch management), and lt server create (project scaffolding). Activates when user mentions "lt", "lt CLI", "lenne.tech CLI", "lt fullstack", "lt git", "fullstack workspace", "local templates", "--api-link", "--frontend-link", or any lt command syntax. NOT for NestJS module/object/property creation (use generating-nest-servers). NOT for Vue/Nuxt frontend code (use developing-lt-frontend).
- tomevault-io Bundle Ringdev Frontend E2e
Semantic selectors used Use when this capability is needed.
- tomevault-io Bundle Tinkerdown
Build single-file web apps in markdown. No React. No build step. Just run. Use when this capability is needed.
- tomevault-io Bundle Chart Component
Creates Recharts visualization components for DataPilot dashboards. Use when implementing bar charts, line charts, pie charts, or data tables from AI query results.
- tomevault-io Bundle Datasheet
Extract structured information from integrated circuit and component datasheets (PDF files or URLs) and generate consistent markdown summaries. Use when the user requests to extract, summarize, analyze, or document information from IC/component datasheets, or when they provide a datasheet and want structured documentation. Triggers on phrases like "extract this datasheet", "summarize this datasheet", "analyze [component name]", "document this IC", or when working with datasheets for hardware design. Use when this capability is needed.
- tomevault-io Bundle Lynricsy Oh My Claudecode Frontend
Frontend UI/UX Engineer
- tomevault-io Bundle Madappgang Claude Code CSS Modules
CSS Modules
- tomevault-io Bundle Resonance Mobile
Use when working with the Mobile Architect. Expert in React Native & Flutter, specializing in Offline-First Architecture, store compliance, and 'Touch Physics'.
- tomevault-io Bundle Animate Text
Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Use when an agent needs to pick or translate named effects like soft blur in, typewriter, shared axis, line reveal, stagger, crossfade, or kinetic builds into WAAPI, Motion, Framer Motion, GSAP, CSS, Lottie, Rive, or similar stacks. Use when this capability is needed.
- tomevault-io Bundle Whatsapp Flows
Authoring WhatsApp Business Flows with validation, component guidance, and server integration patterns. Use when building conversational experiences, collecting user data, implementing conditional logic, or integrating with backend endpoints. 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 e-xode--vue-ssr--vue-ssr-architecture, vue-composables, tailwindcss-layout. 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.