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.
-
lgrappag Skill Input Accessibility Alternative ControlsProvide accessible control schemes for diverse player needs
-
jesusgarciafernandez Bundle UX Writing Diseno De Contenido Y Narrativa De InterfazEl UX Writing es el diseño de contenido verbal para productos digitales. No es solo "escribir textos"; es Ingeniería del Guion de Interacción. Úsala para tareas de Generación de Contenido: ux-writing, microcopy, content-design, voice-and-tone, user-experience, accessibility.
-
jesusgarciafernandez Bundle Humanismo Tecnologico Y Aumento De Capacidades Unity OpsEl Humanismo Tecnológico y Aumento de Capacidades (v2.0) es la competencia de "Poner la técnica al servicio de la superación de las limitaciones humanas". Úsala para tareas de Legal y Cumplimiento: technological-humanism, capability-augmentation, digital-inclusion, accessibility, human-complementation, ethical-ai.
-
jesusgarciafernandez Bundle Diseno Y Auditoria De Accesibilidad Web Inclusive OpsEl Diseño y Auditoría de Accesibilidad Web (v2.0) es la competencia de "Asegurar que nadie se quede atrás en el mundo digital". Úsala para tareas de Desarrollo y Tecnología: accessibility, wcag, inclusive-design, a11y, screen-readers, web-standards.
-
jesusgarciafernandez Bundle Gestion De Inventario Reactivo Y Control De Stock Stock OpsLa Gestión de Inventario Reactivo y Control de Stock (v2.0) es la competencia de "Asegurar que nunca falte nada importante y que no sobre lo innecesario de Jesús García Fernández". Úsala para tareas de Logística y Operaciones Físicas: inventory-management, react-stock, warehouse, logistics, kpi, replenishment.
-
jesusgarciafernandez Bundle Diseno De Interfaces De Voz Vui Diseno Conversacional Y AsisEl Diseño de Interfaces de Voz (VUI) es la creación de sistemas que interactúan mediante el habla. No es solo "programar un altavoz"; es Ingeniería de la Fluidez Conversacional. Úsala para tareas de Generación de Contenido: vui, voice-user-interface, conversational-design, nlp, smart-speakers, accessibility.
-
jesusgarciafernandez Bundle Desarrollo Mobile Nativo E Hibrido Mobile OpsEl Desarrollo Mobile Nativo e Híbrido (v2.0) es la competencia de "Estar donde está el usuario". Úsala para tareas de Desarrollo y Tecnología: mobile-development, ios, android, swift, kotlin, react-native.
-
jesusgarciafernandez Bundle Reduccion De La Brecha Digital E Inclusion Tecnologica IncluLa Reducción de la Brecha Digital e Inclusión Tecnológica (v2.0) es la competencia de "Eliminar las barreras que impiden el pleno ejercicio de la ciudadanía digital de Jesús García Fernández". Úsala para tareas de Educación y Formación: digital-divide, inclusion, accessibility, digital-literacy, equality, empowerment.
-
ndpvt-web Skill A RAG Scaling Agentic Retrieval AugmentedBuild agentic RAG systems where the LLM autonomously decides retrieval strategy using hierarchical interfaces (keyword search, semantic search, chunk read) instead of fixed retrieval pipelines. Replaces single-shot retrieval and predefined workflows with a ReAct-style loop that scales with model capability. Trigger phrases: - "build an agentic RAG system" - "implement hierarchical retrieval" - "make the LLM control its own retrieval" - "scale RAG with reasoning" - "multi-hop question answering over documents" - "replace my fixed RAG pipeline with an agent"
-
ndpvt-web Skill Arkeval Benchmarking Evaluating AutomatedAutomated ArkTS code repair using retrieval-augmented generation, LLM-based test oracle synthesis, and structured benchmark evaluation for HarmonyOS development. Use when: 'fix this ArkTS error', 'repair HarmonyOS code', 'convert TypeScript to ArkTS', 'ArkTS compilation error', 'debug HarmonyOS component', 'generate tests for ArkTS code'.
-
ndpvt-web Skill Discoverllm Executing Intents DiscoveringHelp users discover and form their intents through adaptive diverge-converge interaction, rather than just asking clarifying questions. Use when the user gives a vague or open-ended request such as 'build me a website', 'write something creative', 'make a CLI tool', 'design a component', 'help me refactor this', or 'create a visualization'.
-
ndpvt-web Skill Gisa Benchmark General Information SeekingBuild structured information-seeking agents that decompose complex queries into multi-turn search-and-browse workflows, aggregate results from multiple web sources, and return answers in typed structured formats (items, sets, lists, tables). Applies the GISA benchmark's ReAct-based agent architecture and evaluation methodology. Trigger phrases: "build an information-seeking agent", "search agent pipeline", "multi-turn web research agent", "structured web search workflow", "aggregate information from multiple sources", "web research with structured output"
-
ndpvt-web Skill Fullstack Agent Enhancing Agentic FullstackBuild production-grade full-stack web applications using a three-agent pipeline (Planning, Backend, Frontend) with development-oriented testing and structured debugging. Triggers: 'build a full-stack app', 'create a web app with backend and database', 'full-stack website with API and database', 'build me a CRUD app', 'create a web application with user authentication and data storage', 'scaffold a complete web project with frontend and backend'
Audited -
ndpvt-web Skill Supchain Bench Benchmarking Real World SupplyBuild reliable long-horizon supply chain agents using the SupChain-ReAct pattern: multi-path ReAct trajectories with majority voting for autonomous tool orchestration without handcrafted SOPs. Use when asked to 'build a supply chain agent', 'orchestrate multi-step tool calls for order management', 'diagnose fulfillment issues', 'create an SOP-free agent workflow', 'implement long-horizon tool calling', or 'build an e-commerce order diagnostic system'.
-
ndpvt-web Skill Extracting Recurring Vulnerabilities Black BoxPredict and prevent recurring vulnerabilities in LLM-generated code using the FSTab (Feature-Security Table) technique. Maps observable frontend features to likely backend vulnerabilities based on which LLM generated the code. Use this skill when: - "Audit this LLM-generated app for security vulnerabilities" - "What vulnerabilities does this generated code likely have?" - "Check this AI-generated backend for recurring security issues" - "Build an FSTab mapping for this codebase" - "Run a black-box vulnerability prediction on this web app" - "Assess vulnerability persistence in code from GPT/Claude/Gemini"
-
ndpvt-web Skill Environment In The Loop Rethinking Code MigrationPerform code migrations (dependency upgrades, API changes, framework transitions) with integrated environment verification. Instead of migrating code then hoping it builds, this skill builds and tests inside a real environment at every step, using feedback loops to fix both code and configuration issues. Use when: 'migrate this project from X to Y', 'upgrade dependency version', 'port this codebase to a new framework', 'fix build after dependency update', 'help me upgrade NumPy/React/Django/Spring', 'automate this library migration'.
-
ffsshhttiikk Skill React NativeReact Native mobile framework
Audited -
ffsshhttiikk Skill CSS FrameworksCSS frameworks for rapid UI development
-
awesome-genmedia Skill Speech To TextTranscribe audio to text using each::sense AI. Convert speech from audio and video files into accurate text with punctuation, speaker detection, and timestamp support. Handles multiple languages, accents, and noisy environments. Use for: transcription, subtitles, meeting notes, interview transcripts, podcast show notes, accessibility, captioning. Triggers: speech to text, transcribe, transcription, audio to text, stt, voice to text, convert speech, dictation, subtitles, captions, whisper, transcribe audio
-
awesome-genmedia Skill Text To SpeechConvert text to natural-sounding speech using each::sense AI. Generate realistic voice audio from any text in 32 languages with control over voice, speed, emotion, and style. Powered by elevenlabs-tts for studio-quality output. Use for: narration, audiobooks, accessibility, announcements, IVR systems, e-learning, localization. Triggers: text to speech, tts, read aloud, convert to speech, speak text, voice output, ai speech, synthesize speech, read text, audio from text, narrate text
-
awesome-genmedia Skill Voice GenerationGenerate human-like voice audio from text using each::sense AI. Create natural-sounding speech with control over voice character, emotion, pacing, and language. Supports 32 languages, multiple voice styles, and expressive delivery. Use for: voiceovers, narration, audiobooks, character voices, announcements, podcasts, accessibility. Triggers: generate voice, ai voice, voice generation, text to voice, voiceover, narration, ai narrator, voice clone, voice synthesis, speech generation, voice actor, tts
-
ultroncore Skill Micro Frontend ArchitectureDesign and implement micro-frontend architectures using Module Federation, single-spa, or iframes. Covers team autonomy, routing, shared state, versioning, and deployment strategies.
-
ultroncore Bundle Supabase Auth Ssr SetupThis skill should be used when configuring Supabase Auth for server-side rendering with Next.js App Router, including secure cookie handling, middleware protection, route guards, authentication utilities, and logout flow. Apply when setting up SSR auth, adding protected routes, implementing middleware authentication, configuring secure sessions, or building login/logout flows with Supabase.
-
ultroncore Skill Typescript Advanced PatternsMaster advanced TypeScript patterns including discriminated unions, template literal types, conditional types, mapped types, branded types, variance, and builder patterns. Covers type-level programming, infer keyword, and runtime-safe type narrowing.
-
ultroncore Bundle React Native Best PracticesSoftware Mansion's best practices for production React Native and Expo apps on the New Architecture. MUST USE before writing, reviewing, or debugging ANY code in a React Native or Expo project. If the working directory contains a package.json with react-native, expo, or expo-router as a dependency, this skill applies. Trigger on: any code task in a React Native/Expo project, 'React Native', 'Expo', 'New Architecture', 'Reanimated', 'Gesture Handler', 'react-native-svg', 'ExecuTorch', 'react-native-audio-api', 'react-native-enriched', 'Worklet', 'Fabric', 'TurboModule', 'WebGPU', 'react-native-wgpu', 'TypeGPU', 'GPU shader', 'WGSL', 'svg', 'animation', 'gesture', 'audio', 'rich text', 'AI model', 'multithreading', 'chart', 'vector', 'image filter', 'shared value', 'useSharedValue', 'runOnJS', 'scheduleOnRN', 'thread', 'worklet', or any question involving UI, graphics, native modules, or React Native threading and animation behavior. Also use when a more specific sub-skill matches.
-
ultroncore Bundle Auth Route Protection CheckerThis skill should be used when the user requests to audit, check, or generate authentication and authorization protection for Next.js routes, server components, API routes, and server actions. It analyzes existing routes for missing auth checks and generates protection logic based on user roles and permissions. Trigger terms include auth check, route protection, protect routes, secure endpoints, auth middleware, role-based routes, authorization check, api security, server action security, protect pages.
-
ultroncore Bundle Eslint Prettier Husky ConfigThis skill should be used when setting up code quality tooling with ESLint v9 flat config, Prettier formatting, Husky git hooks, lint-staged pre-commit checks, and GitHub Actions CI lint workflow. Apply when initializing linting, adding code formatting, configuring pre-commit hooks, setting up quality gates, or establishing lint CI checks for Next.js or React projects.
-
ultroncore Bundle Revalidation Strategy PlannerEvaluates Next.js routes and outputs optimal revalidate settings, cache tags for ISR, SSR configurations, or streaming patterns. This skill should be used when optimizing Next.js caching strategies, configuring Incremental Static Regeneration, planning cache invalidation, or choosing between SSR/ISR/SSG. Use for Next.js caching, revalidation, ISR, cache tags, on-demand revalidation, or rendering strategies.
-
ultroncore Bundle Server Actions Vs API OptimizerAnalyze routes and recommend whether to use Server Actions or API routes based on use case patterns including authentication, revalidation, external API calls, and client requirements. Use this skill when deciding between Server Actions and API routes, optimizing Next.js data fetching, refactoring routes, analyzing route architecture, or choosing the right data mutation pattern. Trigger terms include Server Actions, API routes, route handler, data mutation, revalidation, authentication flow, external API, client-side fetch, route optimization, Next.js patterns.
-
ultroncore Skill Playwright Component TestingTest individual UI components in a real browser with Playwright Component Testing — no full app required
-
nahisaho Bundle Scientific Scatac SignacscATAC-seq Signac skill. Single-cell ATAC-seq analysis with Signac/ArchR, peak calling, motif enrichment, chromatin accessibility clustering, and gene activity scoring.
-
yejiming Bundle Solana DevEnd-to-end Solana development playbook (Jan 2026). Prefer Solana Foundation framework-kit (@solana/client + @solana/react-hooks) for React/Next.js UI. Prefer @solana/kit for all new client/RPC/transaction code. When legacy dependencies require web3.js, isolate it behind @solana/web3-compat (or @solana/web3.js as a true legacy fallback). Covers wallet-standard-first connection (incl. ConnectorKit), Anchor/Pinocchio programs, Codama-based client generation, LiteSVM/Mollusk/Surfpool testing, and security checklists.
-
yejiming Bundle Monad MCPMonad MCP server built on Next.js. Provides blockchain tools for interacting with the Monad network, including ABI guessing, contract analysis, and EVM interactions.
-
ultroncore Skill HaystackProduction-ready LLM pipeline framework with component-based architecture for RAG and QA
-
ultroncore Skill AstroIsland architecture web framework for content-focused sites
-
ultroncore Skill JotaiAtomic React state management — composable, bottom-up, minimal re-renders
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 input-accessibility-alternative-controls, ux-writing-diseno-de-contenido-y-narrativa-de-interfaz, humanismo-tecnologico-y-aumento-de-capacidades-unity-ops. 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.