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 Markstream Vue2Integrate markstream-vue2 into a Vue 2.6 or 2.7 app. Use when Codex needs Vue 2-compatible setup, `@vue/composition-api` decisions, CSS wiring, optional peer setup, or scoped Markstream overrides in a Vue 2 repository that is not specifically Vue CLI / Webpack 4 constrained. Use when this capability is needed.
- tomevault-io Bundle You Might Not Need A Memo
Analyze and fix useMemo/React.memo anti-patterns in your code Use when this capability is needed.
- tomevault-io Bundle Frontend Linting
How to maintain code quality and consistency in the frontend codebase using linting tools. Use when this capability is needed.
- tomevault-io Bundle Mobile Architect
Use when building iOS/Android/Flutter/React Native apps, implementing offline sync, optimizing mobile performance, or handling platform-specific APIs — with platform testing discipline
- tomevault-io Bundle Unity Plugin
Control Unity Editor via OpenClaw Unity Plugin. Use for Unity game development tasks including scene management, GameObject/Component manipulation, debugging, input simulation, and Play mode control. Triggers on Unity-related requests like inspecting scenes, creating objects, taking screenshots, testing gameplay, or controlling the Editor. Use when this capability is needed.
- tomevault-io Bundle Vue Clean Components
Rules for structuring Vue 3 components so humans can read and maintain them. Component level hierarchy (Page/Feature/Controller/Humble/Atomic), composable lifecycle cohesion, Core-Adapter separation, props drilling resolution, and store responsibility boundaries. Use when writing, splitting, or refactoring Vue components. Use when this capability is needed.
- tomevault-io Bundle Web Validation
Use whenever validating a web app (React, Vue, Next.js, Django, Rails, static site) end-to-end through a real browser — not just 'it builds' or 'dev server starts'. Covers health check, screenshot-based navigation, console error detection, network request inspection, form submission, responsive layout at mobile/tablet/desktop widths, and route coverage. Reach for it on phrases like 'validate the site', 'take screenshots', 'check the console', 'responsive testing', 'does the page load', or when a frontend change needs proof that real users won't see errors.
- tomevault-io Bundle Code Styleguides
Language-specific code style guidelines. Use when writing TypeScript, Python, Go, JavaScript, or HTML/CSS code to ensure consistent, idiomatic, and maintainable code following best practices. Use when this capability is needed.
- tomevault-io Bundle Component Refactoring
Refactor high-complexity React components in Langflow frontend. Use when manual complexity assessment shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring. Use when this capability is needed.
- tomevault-io Bundle Swiftui Pro
Use when writing, reviewing, or refactoring SwiftUI code — covers modern state management (@Observable), NavigationStack, layout, performance, and accessibility for iOS 26 / Swift 6.
- tomevault-io Bundle Ringdev Frontend Performance
Count client components Use when this capability is needed.
- tomevault-io Bundle Lgzarturo Codeconductor Next JS Typescript
Next.js + TypeScript
- tomevault-io Bundle Testing Infrastructure
Complete testing infrastructure and patterns for the monorepo. Use this skill when writing tests, setting up test configuration, troubleshooting test failures, or working with the CI pipeline. Covers vitest configuration, Storybook addon-vitest integration, React Testing Library patterns, mock data setup, and the test-suite-runner agent for comprehensive testing. Use when this capability is needed.
- tomevault-io Bundle Solid Component Builder
Build or improve SolidJS components with deterministic reactivity decisions and citation-backed guidance. Use when implementing a component, feature slice, or reusable UI primitive in SolidJS. Use when this capability is needed.
- tomevault-io Bundle Lazycomponent
Provide the information about the `<LazyComponent>`. Show the common use cases, basic usage, and critical development Advises. Use when this capability is needed.
- tomevault-io Bundle Setup React Doctor
React health scoring via react-doctor with Stop hook to fail on score regression. Use when setting up react-doctor or preventing UI quality regressions. Use when this capability is needed.
- tomevault-io Bundle Deep Fullstack
Coordinate frontend+backend development with shared types. Use when building full-stack features, 'connect frontend to API', or 'end-to-end'. Includes E2E testing. Use when this capability is needed.
- tomevault-io Bundle Marigold UI Marigold Component Docs Writer
Marigold Component Documentation Writer
- tomevault-io Bundle Frontend Design Svelte
Create distinctive, production-grade Svelte/TypeScript frontends with exceptional design quality Use when this capability is needed.
- tomevault-io Bundle Create React Component
Create a new React component in packages/components following established conventions Use when this capability is needed.
- tomevault-io Bundle React Native Cursor Rules
React Native development best practices for TypeScript, functional components, performance optimization, and styling guidelines. Use when this capability is needed.
- tomevault-io Bundle Beeman Solana Mobile Monorepo Heroui React
HeroUI v3 React Development Guide
- tomevault-io Bundle Django Smoke Alarm
Run and triage Django/DRF security smoke checks for settings hardening, throttling, safe HTML, ORM race/idempotency patterns, and model integrity; especially useful before shipping or when evaluating djangoSecurityHunter-style findings. Use when this capability is needed.
- tomevault-io Bundle Claude Prompt Guide
Anthropic official XML tag patterns and prompt engineering best practices. Document behavior control tags, system prompt internals, and the 10-Component Framework for effective Claude prompts. Use when this capability is needed.
- tomevault-io Bundle Typescript Types
Use to generate and organize production-ready TypeScript types, interfaces, enums, DTOs, and shared utility types using strict feature-based type folders and centralized exports. Trigger when users ask to add/create/define types, interfaces, enums, DTOs, payload types, request/response types, or ask whether to use type vs interface vs enum in Node.js/Express/Prisma/Supabase/Next.js TypeScript projects. Use when this capability is needed.
- tomevault-io Bundle Poplar Direct Mail
Design and send programmatic direct mail using Poplar's HTML templates and API. Use for creating dynamic mail pieces (postcards, bifolds, trifolds, letters) with personalization and triggering mail via API. Use when this capability is needed.
- tomevault-io Bundle Email Template
Provides responsive transactional email template patterns for NodeJS-Starter-V1 using React Email and Resend. Covers Scientific Luxury dark-theme email design, template composition with shared components, preview tooling, and integration with the project's cron jobs and notification flows using Australian locale formatting.
- tomevault-io Bundle Error Taxonomy
Provides a structured error code taxonomy following the `DOMAIN_CATEGORY_SPECIFIC` format. Maps every runtime error to an HTTP status code, severity level, and user-facing message, ensuring consistent error handling between the FastAPI backend and Next.js frontend.
- tomevault-io Bundle Coollabsio Coolify Tailwindcss Development
Tailwind CSS Development
- tomevault-io Bundle Server Components
This skill should be used when the user asks about "Server Components", "Client Components", "'use client' directive", "when to use server vs client", "RSC patterns", "component composition", "data fetching in components", or needs guidance on React Server Components architecture in Next.js. Use when this capability is needed.
- tomevault-io Bundle Keynote Slides
Build Keynote-style single-file HTML slide decks with brand-ready templates, minimal navigation, and Gemini nano banana media generation. Includes Narrative Engine integration for framework-driven deck creation with 17 proven storytelling structures and 5-agent review panel. Use when creating or editing slide decks, transforming content into presentations, or generating slide visuals. Use when this capability is needed.
- tomevault-io Bundle Vue State Management
State Management with Vue. state handling. Use when this capability is needed.
- tomevault-io Bundle Mui Patterns
Material-UI component patterns and usage Use when this capability is needed.
- tomevault-io Bundle Bundle Barrel Imports
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time. Use when this capability is needed.
- tomevault-io Bundle JS Tosorted Immutable
Use toSorted() instead of sort() to avoid mutating arrays. Apply when sorting arrays that are React props, state, or otherwise shared/referenced elsewhere. Use when this capability is needed.
- tomevault-io Bundle Shadcn UI Conventions
UI component conventions for 8-bit styled components. Use when working with shadcn/ui components or implementing retro-styled UI elements. 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 markstream-vue2, you-might-not-need-a-memo, frontend-linting. 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.