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.
-
eskcti Bundle Config DockerCriar ou revisar Dockerfiles multi-stage para produção em projetos TypeScript (NestJS backend + Next.js frontend), otimizando imagem final via build de camadas, .dockerignore e docker-compose para ambiente de produção/staging. Usar quando o pedido envolver Dockerfile, imagem Docker, build de produção, containerização ou docker-compose de produção para stack TypeScript/NestJS/Next.js.
- eskcti Bundle Config Project
Inicializar ou continuar um projeto no padrão TurboRepo com frontend (Next.js) e backend (NestJS sem git interno), criando/reconciliando a estrutura base via `npx create-turbo@latest` no diretório atual quando necessário e aplicando setup idempotente por `skills.config.json` (com override via CLI). Usar quando o pedido envolver bootstrap de monorepo web+backend, setup inicial Next+Nest, reaplicação segura do setup sem sobrescrever, ou padronização das tasks de `test/build` no Turbo.
- eskcti Bundle Config Shared Web
Inicializar e padronizar a camada web compartilhada para apps admin em Next.js com Tailwind CSS v4, scaffold base agnostico de biblioteca de componentes, grupos de rotas `app/(private)` e `app/(public)`, estrutura `src/shared` (incluindo i18n e form validator), modulo `src/modules/examples` e adapter de UI selecionavel (default: Shadcn). Usar quando o pedido envolver bootstrap/rebootstrap do shell web, criacao de layout dashboard reutilizavel e setup inicial de componentes/paginas de referencia.
- eskcti Bundle Frontend Form Vue
Criar ou revisar formulários Vue 3 com vee-validate + PrimeVue inputs no padrão do projeto. Usar quando o pedido envolver formulário Vue, vee-validate, InputText PrimeVue, Dropdown, DatePicker, validação de campos ou formulário de cadastro/edição em Vue 3.
- eskcti Bundle Frontend Page Vue
Criar ou revisar páginas/componentes Vue 3 com Composition API, PrimeVue 4 e Pinia no padrão do projeto. Usar quando o pedido envolver componente Vue, página Vue, listagem DataTable PrimeVue, detalhe, store Pinia ou feature Vue standalone.
- eskcti Bundle Config Project Vue
Inicializar ou continuar um projeto full-stack com backend NestJS e frontend Vue 3 com Tailwind CSS e PrimeVue, em monorepo com estrutura apps/backend + apps/web-vue. Usar quando o pedido envolver bootstrap de projeto Vue, setup NestJS + Vue 3, ou padronização de estrutura full-stack com Vue.
- eskcti Bundle Frontend Entity Vue
Criar entidades de domínio Vue em TypeScript puro (sem Vue/Pinia/PrimeVue), com tipo Result<T, E> e validações que retornam Result em vez de lançar exceções. Usar quando o pedido envolver entidade de domínio Vue, modelo de domínio TypeScript, Result type ou validação de domínio no frontend Vue.
- eskcti Bundle Frontend Form Leptos
Criar formulários Leptos SSR com signals, Action/ServerFn ou submit handler async chamando UseCase e exibindo erros de negócio completos. Usar quando o pedido envolver formulário Leptos, create/edit SSR ou validação de formulário no crate web-leptos.
- eskcti Bundle Frontend Form Schema
Criar, revisar ou orientar forms frontend e schemas de validação no padrão Genérico Web. Usar quando o pedido envolver componentes de formulário React Hook Form, arquivos `data/schemas/*`, validação com `v` (`@namespace/shared-web`), tipagem com `v.infer`, campos opcionais/refinamentos/arrays e integração de erro com componentes de form compartilhados.
- eskcti Bundle Frontend Page Leptos
Criar páginas de listagem Leptos SSR com Resource, signals e UseCase — Tailwind para layout, exibição de lista completa de erros. Usar quando o pedido envolver página Leptos, listagem SSR, DataTable simples ou tela de listagem no crate web-leptos.
- eskcti Bundle Frontend Usecase Vue
Criar casos de uso Vue como funções composables ou classes TypeScript com retorno Promise<Result<T>>. Usar quando o pedido envolver use case Vue, composable de aplicação, lógica de negócio no frontend Vue, ou orquestração entre repository e entidade em Vue 3.
- eskcti Bundle Config Auth Web Basic
Criar/recriar de forma deterministica o modulo de autenticacao web no Next.js (sign-in/sign-up/dashboard/users/profile), com contexto de auth, schemas/formularios, rotas App Router e componentes de controle de acesso (private/public/admin), refletindo o estado atual do `apps/web` e compatibilidade com a infraestrutura base do shared-web. Usar quando o pedido envolver bootstrap/rebootstrap da camada web de autenticacao.
- eskcti Bundle Config Project Leptos
Inicializar ou continuar frontend Leptos SSR (cargo-leptos + leptos_axum) com Tailwind CSS, em workspace Cargo junto ao backend Axum (crates/web-leptos). Usar quando o pedido envolver bootstrap frontend Leptos, setup SSR Rust, ou padronização full-stack Axum + Leptos.
-
diaszano Skill Fullstack DeveloperUse this skill when you need to build complete features spanning database, API, and frontend layers together as a cohesive unit.
- diaszano Skill React Specialist
Use when optimizing existing React applications for performance, implementing advanced React 18+ features, or solving complex state management and architectural challenges within React codebases.
- diaszano Skill Accessibility Tester
Use this skill when you need comprehensive accessibility testing, WCAG compliance verification, or assessment of assistive technology support.
- diaszano Skill Angular Architect
Use when architecting enterprise Angular 15+ applications with complex state management, optimizing RxJS patterns, designing micro-frontend systems, or solving performance and scalability challenges in large codebases.
- diaszano Skill Symfony Specialist
Use when building Symfony 6+/7+/8+ applications, architecting Doctrine ORM entities with complex relationships, implementing Messenger component for async processing, or optimizing API Platform performance.
- diaszano Skill Expo React Native Expert
Use when building mobile applications with Expo and React Native that require native module integration, navigation setup, performant animations, push notifications, OTA updates, or App Store/Play Store deployment.
-
roche-k Bundle Va Vue ExpertUse when building Vue 3 applications that require Composition API mastery, reactivity optimization, or Nuxt 3 development with enterprise-scale performance concerns.
- roche-k Bundle Va UI Designer
Use when designing visual interfaces, creating design systems, building component libraries, or refining user-facing aesthetics requiring expert visual design, interaction patterns, and accessibility considerations.
- roche-k Bundle Va Frontend Developer
Use when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integration.
-
dvcrn Bundle Imap Smtp Email 2Read and send email via IMAP/SMTP. Check for new/unread messages, fetch content, search mailboxes, mark as read/unread, and send emails with attachments. Works with any IMAP/SMTP server including Gmail, Outlook, 163.com, vip.163.com, 126.com, vip.126.com, 188.com, and vip.188.com.
32 -
opencue Bundle Vc PreviewUse when you need to inspect files or generate visual explanations, slides, diagrams, or HTML recaps.
- opencue Bundle Vc Web Testing
Web testing with Playwright, Vitest, k6. E2E/unit/integration/load/security/visual/a11y testing. Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.
- dvcrn Bundle React Nextjs Generator
React Nextjs Generator
32 - dvcrn Skill Web Accessibility Auditor
Audits HTML/CSS for WCAG 2.1 compliance. Color contrast, ARIA labels, keyboard navigation, screen reader support.
32 - dvcrn Bundle React Component Generator
生成 React 组件模板，支持 Function Component, Class Component, Hooks, TypeScript，一键生成完整组件代码。
32 -
gabrielmoreira Skill Opsml TS SvelteYou are an expert frontend engineer specializing in **TypeScript, Svelte 5, SvelteKit, and
17 - gabrielmoreira Skill Design Taste Frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
17 - gabrielmoreira Skill Variant Component
> Before generating code, load `skills/shared/code-output.md` for framework detection and output conventions.
17 - gabrielmoreira Skill Cua Driver 2
Drive a native GUI app (macOS, Windows, Linux) via the Qwen Cua Driver CLI (default) or MCP server; snapshot its accessibility tree, act through snapshot-bound element tokens, native menu paths, exact window geometry, or pixel coordinates, and verify from fresh state. Use when the user asks you to operate, drive, automate, or perform a GUI task in a real application on the host.
17 - gabrielmoreira Skill Error Boundary
Skill: error-boundary
17 - gabrielmoreira Skill React Doctor
Use when finishing a feature, fixing a bug, before committing React code, or when the user wants to improve code quality or clean up a codebase. Checks for score regression. Covers lint, accessibility, bundle size, architecture diagnostics.
17 -
yogsoth-ai Skill Component Decomposition 2Decompose system into functional components, identify dependencies, and surface trimming candidates.
-
fabioc-aloha Skill Md To Eml 4Convert Markdown to RFC 5322 email (.eml) with inline CSS and CID images
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 config-docker, config-project, config-shared-web. 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.