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.
-
xenos2025 Bundle Ec Detail Card Skill用真实商品实拍图制作淘宝、天猫、拼多多、独立站和内容电商图片。通过 HTML/CSS 精确排版产品名、卖点、参数、色号和说明,使用 Claim Gate 阻止无证据的成分、产地、性能、安全、认证、比较和绝对化宣称,输出首图、副图、材质特写、多色宫格及详情长图;支持 Editorial、Swiss、Neo-Brutalism 与 Adaptive Editorial 四套生产视觉系统,并可把新的参考 UI 扩展为独立风格包。用于“做商品详情页”“电商套图”“主图五张”“淘宝详情图”“产品卖点图”“电商宣称合规”“Neo-Brutalism 商品页”“提取新的电商 UI 风格”“新增电商版式”“面料或服饰详情页”等任务。
-
xfgryujk Bundle Blivechat CSS Refblivechat 自定义 CSS 参考。使用场景:用户提到 写/设计/生成/修改 一个 弹幕样式/CSS;排查弹幕样式不生效等问题。
-
xianyanyang Bundle Math Practice Generator分析小学数学错题的本质问题(倒数翻错、乘除混淆、不约分、口算不写过程等),支持照片、PDF、Word、粘贴文本四种输入形式,输出中文分析与针对性例题指导,并生成A4可打印强化练习卷HTML(含多类型例题、易错警示框、充足书写空间、未约分分数混入、打印颜色优化)。当用户发送错题照片或错题文件(pdf/docx/doc/txt)、提到错题分析、错题重练、强化出题、生成练习卷时使用。
-
realaman90 Bundle AI Film StudioAI film production studio with pre-built scripts: analyze inspiration/reference videos (Gemini), write script + storyboard, generate stills (GPT Image 2; Seedream 5 / Nano Banana as fallbacks), video (Gemini Omni 1.1 Flash, FLUX 3 Video, Seedance 2.5/2.0, LTX 2.5/2.3; Veo 3.1 fallback), audio (ElevenLabs), and assemble the final cut with HyperFrames (HTML→MP4; replaced Remotion) or ffmpeg. Use when: creating short films, ads, product promos, brand films, social reels, storyboards, video scenes, voiceovers, music, sound effects, or any AI-powered media creation — especially "make one like this reference video". Trigger words: film, movie, video, ad, commercial, promo, product video, reel, storyboard, animate, scene, voiceover, narration, soundtrack, clip, short film, inspiration video, reference video.
-
yfgaia Bundle Frontend TestingGenerate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
-
display-dev Bundle Display DevPublishes HTML or Markdown as display.dev URLs with public, company, or private access. Supports signup, claiming, sharing, browsing, bounded reads, exact edits, and comment iteration. Use when the user asks to "publish this", "share this", "share with the org", "post this online", "make a private link", "share with [email]", "publish a report", "list my artifacts", "find an artifact", "publish a large file", "publish this generated HTML file", "read this artifact", "search inside this artifact", "change this passage", "make a copy of this artifact", "duplicate version", "create a display.dev account", "claim this publish", "add a company email domain", "transfer an email domain", "change the email domains add-on", "show my referral link", "show referral rewards", "watch comments on this artifact", "respond to comments", or "resolve this comment thread". Use whenever a request contains a display.dev artifact URL (`*.dsp.so/*`). Anonymous publishing returns a 30-day preview and browser claim URL.
-
entropyconquers Skill Reanimated DndIntegrate react-native-reanimated-dnd for drag-and-drop, sortable lists, sortable grids, and drop zones in React Native apps. Covers components, hooks, and all configuration options.
-
gauravs19 Bundle Enterprise ArchitectureUnified enterprise & software architecture skill grounded in four open-source standards — C4 + Structurizr DSL, ArchiMate 3.x, TOGAF ADM, and arc42 + ADRs (MADR). Use it whenever the user wants to: produce architecture diagrams as code (C4 context/container/component, Structurizr, PlantUML, Mermaid); write architecture docs or decision records (arc42, ADRs/MADRs, design docs); review or assess a design against quality attributes and EA principles; or model an enterprise (capabilities → applications → technology, app landscapes, portfolio rationalization). Trigger it even when no framework is named — e.g. "draw the architecture of this service", "give me a container diagram", "write an ADR for choosing Kafka", "is this design sound?", "map our capabilities to apps", "document my architecture in arc42", "create an HLD or LLD", "assess this design against ISO 25010 / quality attributes", "produce a solution design". Do NOT trigger it for writing application code or REST endpoints, IaC / cloud deployment (Terrafo
-
xiaomacoltai Bundle Bettafish Opinion AnalysisBettaFish(微舆)多智能体舆情分析系统 - 基于 QueryAgent、MediaAgent、InsightAgent 三引擎并行架构,通过 ForumEngine 实现 Agent 间协作讨论,生成 Word/PDF + 高设计质量 HTML 双格式报告。 当用户需要以下分析时触发此 skill: - 分析某品牌/企业/产品的社交媒体声誉和口碑 - 追踪热点舆情事件(如某车企被抨击、某明星争议事件) - 挖掘特定社媒账号的内容和影响力数据 - 监测竞品舆情动态,进行多品牌对比 - 分析公众对某话题的情绪倾向和态度 - 生成舆情监测报告或危机预警分析 - 需要Word文档/PDF格式的正式报告 - 需要高设计质量的交互式HTML可视化报告 - 需要基于真实数据的深度舆情分析 此 skill 采用 QueryAgent + MediaAgent + InsightAgent 并行架构,通过 ForumEngine 实现 Agent 间讨论协作,执行 3 轮反思循环优化分析结果,最终输出: 1. **Word/PDF 文档** - 使用 docx/pdf subskill 生成,适合正式汇报、打印、存档 2. **高设计质量 HTML 报告** - 使用 frontend-design subskill,独特的编辑杂志风格,交互式可视化 **不使用任何数据库和模拟数据**,所有数据通过 WebSearch/WebFetch/Browser/Curl 实时获取。 即使遇到复杂的多步骤分析需求、需要整合多个数据源、或生成专业格式的舆情报告,也请务必使用此 skill。
-
dojocodinglabs Bundle Frontend Dev GuidelinesFrontend development guidelines for Next.js + React 19 + shadcn/ui applications. Modern patterns including App Router, Server Components, Client Components, Server Actions, shadcn/ui with Tailwind CSS, React Hook Form, lazy loading, Suspense boundaries, Supabase client integration, performance optimization, and TypeScript best practices. Use when creating pages, components, forms, styling, data fetching, or working with Next.js/React code.
-
fastapiadmin Bundle Fastapiadmin DevFastapiAdmin full-stack dev guide: repo map, run/verify commands, backend module & frontend web conventions. Invoke before writing code, creating modules/pages, debugging, or running builds/tests in this repo.
-
keejkrej Skill Context7 DocsFetch up-to-date documentation and code examples for any library, framework, SDK, CLI tool, or cloud service. Use whenever the user asks about a specific library — even well-known ones like React, Next.js, Prisma, Express, Tailwind, Django, or Spring Boot — because training data may not reflect recent API changes or version updates. Always use for: API syntax questions, configuration options, version migration issues, "how do I" questions mentioning a library name, debugging that involves library-specific behavior, setup instructions, and CLI tool usage. Use even when you think you know the answer. Do not rely on training data for API details, signatures, or configuration options — they are frequently out of date. Prefer this over web search for library documentation.
-
liorvainer Bundle Nextra WriterExpert in creating clear, comprehensive technical documentation with Nextra (Next.js-based docs framework), MDX, and modern documentation patterns. Use for documentation sites that need Next.js integration.
-
porkytheblack Bundle GloveExpert guide for building AI-powered applications with the Glove framework. Use when working with glove-core, glove-react, glove-next, tools, display stack, model adapters, stores, or any Glove example project.
-
kesslerio Bundle Design Taste FrontendSenior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
-
pluginagentmarketplace Bundle React PerformanceMaster React performance optimization with memoization, code splitting, profiling, and Web Vitals monitoring
-
halo-dev Bundle Use AI Foundation SdkQuery, explain, integrate, and debug the Halo AI Foundation Java SDK, browser/Vue SDK, UI Message transport, and FormKit model selector. Use when an AI coding agent needs to answer AI Foundation API questions, add AI capabilities to a Halo plugin, implement text generation, structured output, tools, embeddings, reranking, RAG, image generation, streaming chat, message persistence, or model selection, or verify a consumer plugin against the official SDK contracts.
-
hoangnb24 Bundle Meetless Design SystemReusable Open Design package for a calm dark-neutral, Linear-family web UI for local-first meeting recording, transcription, grounded Q&A, and companion pairing. Sources tokens from tokens.css / colors_and_type.css.
-
jsmastery-pro Bundle ArcjetAdd Arcjet security protection to any code path — HTTP route handlers, API endpoints, AI agent tool calls, MCP servers, background jobs, and queue workers. Covers rate limiting, bot detection, email validation, prompt injection detection, sensitive information blocking, and abuse prevention. Works across Next.js, Express, Fastify, SvelteKit, Remix, Bun, Deno, NestJS, FastAPI, Flask, and non-HTTP contexts. Use this skill when the user wants to add security, rate limiting, bot protection, or abuse prevention to any part of their application — whether they say "protect my API," "rate limit tool calls," "block bots," "secure my endpoint," "add security to my MCP server," or "prevent abuse" without mentioning Arcjet specifically.
-
novuhq Skill NovuRoute Novu tasks to the right skill or MCP server. Use whenever the user mentions Novu, notifications, workflows, subscribers, inbox, @novu/api, @novu/framework, @novu/nextjs, @novu/react, triggering notifications, notification preferences, managed agents, or debugging delivery failures. Load this skill first for any Novu-related task in Cursor.
-
the-vibe-company Bundle Integration Nextjs App RouterPostHog integration for Next.js App Router applications
-
kokonut-labs Skill Install Kokonutui ComponentFind and install a KokonutUI React component into a project using the shadcn CLI, and read its source and documentation.
-
pydantic Skill DeckxCreate a deck with deckx. Use when the user mentions "deckx", "deck" or "slides", asks to build a slide deck from MDX, asks to convert a brand palette into a deck stylesheet, or asks how to convert a deckx HTML deck into a PDF. Covers project layout, deckx.toml config, deck.mdx authoring, custom React components, the styles.css token contract, and the Chrome headless PDF command.
-
hraness Bundle DirectUse Hraness Direct to install, adopt, test, audit, or troubleshoot deterministic frontend and UI testing workbenches for web, React, React Native, and Expo. Trigger for repeatable signed-in, empty, loading, and error states; frontend fixtures and scenario URLs; strict JSON worlds; product-owned ports and adapters; logical time; fail-closed network boundaries; agent-browser, Playwright, or Bombadil verification; quiescence probes; coverage claims; property tests; and proving @hraness/direct stays out of production bundles.
-
korsoftwaresolutions Bundle Kor UIComplete guide for using the KorUI library (@korsolutions/ui) in React Native and Expo applications. Use this skill when building user interfaces with KorUI, customizing themes, setting up the library, working with any of the 27+ components (Button, IconButton, Input, Select, Checkbox, RadioGroup, Alert, Card, Separator, Tabs, Menu, Popover, Calendar, Toast, etc.), styling and theming, implementing compound components, debugging component issues, or when the user mentions "@korsolutions/ui", "KorUI", "UIProvider", or asks about theme customization or React Native UI components. This skill covers installation, provider setup, component usage patterns, theme customization, variant system, hooks, responsive design, and troubleshooting.
-
othmanadi Bundle Plan ItHTML-first persistent planning skill. Generates a single self-contained plan.html with interactive phases, drag-and-drop tickets, sliders, mockups, and embedded JSON state. Survives /clear via session catchup, tamper-protected by SHA-256, mirrors across 17 IDEs, ships 10 templates across Thariq's 9 categories, exports back to Markdown on demand. Use when asked to "plan it", "make me an html plan", "show me the plan", "render the plan", or when starting any multi-step task that needs a navigable artifact instead of a markdown wall.
-
samgalanakis Bundle PilcrowMake your clanker your editor. A prose linter, a set of editor commands anchored in classical style guides (Strunk, Williams, Zinsser, Pinker, Orwell, King), and project commands for voice capture and drafting. Use when reviewing, polishing, drafting, or auditing markdown, HTML, or plain-text prose. AI-tell detection is one feature among many.
-
seanchiuai Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
joeseesun Bundle Qiaomu Cut把一句话需求转成可复现、可验收视频工程的乔木智能剪辑导演。Use when the user asks to create, plan, edit, remix, explain, narrate, subtitle, animate, composite, or render a video; build English-learning movie mixes, person profiles, explainers, product launch videos, cinematic shorts, social clips, course/PPT videos, AI image/video/TTS/music-assisted stories, stock-footage stories, or multi-source montage. Routes across 33台词, ClipSeek/Pexels/Pixabay/open media, local files, ListenHub/MarsWave generation and content extraction, Coli local ASR, agent image generation, HTML/motion graphics, Manim-style explainers, ffmpeg-full rendering, subtitles, transitions, masks, and quality checks.
37 -
justinwetch Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
-
halo-dev Skill Gradle Dependency UpdatesUpgrade outdated Gradle dependencies in this project. Use this skill whenever the user asks to check for dependency updates, show what's outdated, or upgrade/bump/update Gradle dependencies, libraries, or plugins — including mentions of "dependencyUpdates", the versions plugin, or "outdated dependencies". Backend only (api/application/platform); frontend dependencies (ui/, pnpm) are out of scope.
-
martgueritainaccurate875 Bundle React Native DevReact Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and engineering (project structure, deployment, SDK upgrades, CI/CD). Use when: building React Native or Expo apps, implementing animations or native UI, managing state, fetching data, writing tests, optimizing performance, deploying to App Store/Play Store, setting up CI/CD, upgrading Expo SDK, or configuring Tailwind/NativeWind.
-
metamask Skill Metamask Connect ConventionsCore conventions, constraints, and common mistakes for the MetaMask Connect SDK across EVM, Solana, multichain, wagmi, and React Native. Consult before writing or reviewing any MetaMask Connect integration code — covers hex chain IDs, supportedNetworks validation, EIP-1193 provider events, multichain session lifecycle, Solana constraints, React Native polyfills, and testing patterns.
-
ava-2568 Bundle Report PageUse when the user wants to create a source-backed report, document, memo, research note, operating update, or data interpretation page delivered as editable static HTML with a clean document reading experience and optional ECharts figures.
-
liuchiawei Bundle Next Intl App RouterConfigures and uses next-intl for Next.js App Router with locale-based routing. Use when adding or changing i18n, locale routing, translations, next-intl plugin, middleware/proxy, or message files in Next.js App Router projects.
-
gohypergiant Bundle Accelint API DocsGenerate and maintain TypeScript/React API reference documentation in markdown. TRIGGER when user mentions documenting code, API docs, "add docs for X", updating/validating docs, or working with fumadocs/Storybook. Handles all API reference documentation for functions, components, hooks, classes, and constants. If TypeScript/React code needs documentation, use this skill.
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 ec-detail-card-skill, blivechat-css-ref, math-practice-generator. 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.