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.
Web & Frontend
1,641 skills
jiaiyan Naive UI Components
Comprehensive overview of all Naive UI components organized by category. Invoke when user needs to discover available components, understand component categories, or find the right component for their use case.
8
jiaiyan N Marquee
Marquee component for creating scrolling content animations. Invoke when user needs to display horizontally scrolling text or content in Naive UI.
8
jiaiyan N Tooltip
Tooltip component for displaying contextual information on hover or focus. Invoke when user needs to show helpful hints or additional context in Naive UI.
8
jiaiyan N Checkbox
A checkbox component for binary and multiple selections with support for groups, indeterminate state, custom values, and grid layouts
8
jiaiyan N Equation
Equation component for rendering mathematical equations using KaTeX. Invoke when user needs to display mathematical formulas or LaTeX expressions in Naive UI.
8
jiaiyan N Scrollbar
Custom scrollbar component with consistent styling. Invoke when user needs to implement custom styled scrollbars or scrollable containers in Naive UI.
8
jiaiyan N Breadcrumb
Breadcrumb component for navigation path display. Invoke when user needs to implement breadcrumb navigation, show current location, or navigation hierarchy in Naive UI.
8
jiaiyan N Date Picker
A comprehensive date picker component supporting various date types (date, datetime, range, month, year, quarter, week) with formatting, validation, shortcuts, and async operations
8
jiaiyan N Tree Select
A tree-structured select component for hierarchical data selection with features like multiple selection, checkboxes, filtering, and async loading
8
jiaiyan N Float Button
Floating action button component with menu, badge, and group support. Invoke when user needs floating buttons, FAB menus, or quick action buttons in Naive UI.
8
jiaiyan N Auto Complete
An autocomplete input component that provides search hints and suggestions as users type, with support for grouping, custom rendering, and various input configurations
8
kensaurus Audit Fe API
Audit frontend API calls against backend implementation for contract alignment and network shape. Use when "API audit", "FE-BE contract", or "review frontend API integration". Live 4xx/5xx reproduction → debug-fe-be-integration.
8
kensaurus Backend Patterns
Apply modern backend patterns — auth middleware, caching strategies, background queues, rate limiting, and serverless/edge function design — across stacks (examples use Next.js. Use when the user says "backend architecture", "queue jobs", "caching layer", "rate limiting", "server actions", "edge function".
8 · bundle
curiositech API Architect
Expert API designer for REST, GraphQL, gRPC architectures. Activate on: API design, REST API, GraphQL schema, gRPC service, OpenAPI, Swagger, API versioning, endpoint design, rate limiting, OAuth flow. NOT for: database schema (use data-pipeline-engineer), frontend consumption (use web-design-expert), deployment (use devops-automator).
10 · bundle
curiositech Webapp Testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. Activate on: Playwright, webapp testing, browser automation, E2E testing, UI testing. NOT for API-only testing without browser, unit tests, or mobile app testing.
10
ziri22 Agent UX Architect
MUX Architect IA — Expert en architecture UX technique, CSS systems, motion design systems, et implementation developer-friendly. Pont entre design et code.
6
qcmuu Langchain
Framework for building LLM-powered applications with agents, chains, and RAG. Supports multiple providers (OpenAI, Anthropic, Google), 500+ integrations, ReAct agents, tool calling, memory management, and vector store retrieval. Use for building chatbots, question-answering systems, autonomous agents, or RAG applications. Best for rapid prototyping and production deployments.
0 · bundle
x3allamerican Csa Safer Public Display
Use this skill to understand what CSA data the public sees about your carrier and how that affects business. Covers SAFER, accessibility, and what's hidden vs visible.
1
jackychenlu Geniml
This skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
0 · bundle
coreyone System Architecture Rules
Trigger: clean architecture, hexagonal architecture, domain model, state machine, boundary decoupling. Scope: Software modular design, dependency boundaries, architectural layering. Boundary: Excludes frontend aesthetic styling.
1 · bundle
pantyuhov9-web Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality. Use only when invoked by the `design` wrapper skill, OR when working outside a known site (no `~/Sites/<name>/` repo). Otherwise prefer `design`. Generates creative, polished code that avoids generic AI aesthetics.
0
30eggis Design Design UI Designer
Expert UI designer specializing in visual design systems, component libraries, and pixel-perfect interface creation. Creates beautiful, consistent, accessible user interfaces that enhance UX and reflect brand identity
2
anantha-236 Repo Scan
Cross-stack source code asset audit — classifies every file, detects embedded third-party libraries, and delivers actionable four-level verdicts per module with interactive HTML reports.
1
rajanthar Visual Design Taste
Choose and apply high-quality frontend visual direction for websites, apps, dashboards, redesigns, landing pages, portfolios, and UI polish. Use when prompts mention design taste, anti-slop UI, redesign, premium visual design, minimalist, brutalist, legacy style inheritance, design direction, or the old taste-skill/gpt-tasteskill/soft-skill/brutalist-skill/minimalist-skill/redesign-skill skills.
0 · bundle
kevinpbuckley Blueprints
Create and modify Blueprint assets, variables, functions, components, event dispatchers, and interfaces. Use when the user asks to create a Blueprint/BP, add a variable or component to a Blueprint, make an event dispatcher/delegate, implement a Blueprint interface, or inspect a Blueprint's class/components. For node-level graph wiring, also load blueprint-graphs.
605 · bundle
dylanckawalec C4 Architecture
Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".
3 · bundle
grvpanchal Server Container
Container/presentational component split — "smart" containers connect to the store, fetch data, and orchestrate loading/error/empty states; "dumb" children just render props. Use when extracting data logic from views, introducing custom hooks, or reviewing `*Container` components.
0
bog5d Claude Design
Design one-off HTML artifacts (landing, deck, prototype).
0
oimiragieo Uupm UI Styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
0 · bundle
oimiragieo Aura Screenshot Clone
Use when the user wants to clone or adapt a UI pattern from any website into gotcontext.ai, or asks to "build something like X", "make our nav look like Y", or "clone that component". Prefer aura.build Pro when available; without a Pro subscription, skip Aura and go straight to Phase 2.5 direct rebuild. Aura's clone is now NATIVE — paste a URL or drag a screenshot into aura.build and it generates React/Tailwind directly; the Anima/Chrome-extension flow is only a fallback for login-gated pages Aura can't fetch server-side.
0
oimiragieo Mengto Webgl 3d Object
Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero object or product-like visual with real lighting instead of CSS transform tricks.
0 · bundle
oimiragieo Mengto Animation Systems
Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.
0 · bundle
oimiragieo Mengto Animation On Scroll
Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.
0 · bundle
metinduraktr-44 Geniml
This skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
0 · bundle
mmehdi0606 Fp React
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.
2
azusagasaku UI To Vue
当用户有 UI 截图或设计导出文件需批量转换为 Vue 3 组件（Composition API、TypeScript）时使用
0
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 geniml, backend-patterns, api-architect. Rankings shift as installs change; sort this page by "Most downloaded" 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 add <owner>/<name>, or copy the file into your agent's skills directory.