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.
-
decocms Skill DecoindexUse when the user pastes a URL to a product page, category or storefront on a VTEX or Shopify e-commerce site (most Brazilian retail), or asks about a specific brand's catalog, prices or search. Put decoindex.com in front of the domain to get normalized product facts as Markdown instead of scraping a megabyte of client-rendered HTML.
-
degausai Bundle Slide Generation SystemTurn notes (Notion, Google Docs, Markdown) into branded 1920×1080 HTML slide decks with PDF and PNG export. Pulls real brand tokens from any URL.
-
dennisonbertram Bundle Bitcoin UIInstall and use the Bitcoin UI shadcn registry in React and Next.js projects. Use when building Bitcoin explorers, wallets, node dashboards, transaction or UTXO interfaces, fee and mempool views, Merkle proofs, confirmation states, or most-work-chain visualizations with TypeScript and shadcn.
-
dennisonbertram Bundle Steal React ComponentExtract and reconstruct React components from any production website using Chrome browser automation. Use when asked to steal, copy, extract, or reverse-engineer React components from a website.
-
deokjinlog Bundle Design Style Explorer사용자가 도메인(제품·서비스 주제)을 지정하면 그 도메인의 대표 화면을 30가지 디자인 스타일(SF HUD, 공공포털, 트렌디 SaaS, 고밀도 터미널, 브루탈리즘, 글래스모피즘, 미니멀 모노크롬, 럭셔리 다크, 레트로 픽셀, 에디토리얼, 네이처 오가닉, 뉴모피즘, 오로라 그라디언트, 벤토 그리드, 클레이모피즘, 머티리얼, Y2K 베이퍼웨이브, 스위스, 맥시멀리즘, 다크 대시보드, AI 프로덕트, 핀테크 소프트, 엔터프라이즈 B2B, 헬스케어 웰니스, 커머스 리테일, 다크 프로 미니멀, 웜 프로페셔널, 하이컨트라스트 접근성, 컬러풀 모던, 데이터 리치 라이트)의 HTML 시안으로 만들어 비교하게 해주는 스킬. 사용자가 "디자인 시안 뽑아줘", "스타일 비교", "30개 디자인", "○○ 도메인으로 디자인 보여줘", "디자인 탐색", "어떤 스타일이 어울릴지" 등을 말하거나, 새 제품/화면의 비주얼 방향을 고민할 때 반드시 이 스킬을 사용할 것. 특정 스타일 이름(브루탈리즘, 글래스모피즘 등)을 언급하며 화면을 요청할 때도 사용.
-
designedbysom Bundle Accessibility LinterReviews accessibility mid-design, not as a compliance audit, but as a craft challenge. Use when designing, describing, or building a UI component. Trigger on "I'm designing a component", "does this work", "review this interaction", "how should I handle focus", "is this accessible", or whenever HTML/CSS/React code is shared. Also trigger when component states, interaction models, or keyboard behavior are being described. Don't wait to be asked. If a component is being actively designed, this skill is relevant.
-
desplega-ai Skill Slack MockTest a Slack bot end to end without a Slack workspace using @desplega.ai/slack-mock, a mock Slack server (Web API + Socket Mode) with message storage, an HTML viewer and screenshots. Use when writing or running e2e tests for a Bolt app (agent-swarm included), when you need to inject Slack messages, slash commands, button clicks or modal submissions toward a bot and assert its replies, reactions, edits or uploads, or when you want a screenshot of a Slack thread produced by a bot.
-
devbisme Bundle Datasheet To Symbol LibUse whenever the user wants to turn a component datasheet PDF into KiCad symbols — e.g. "create a KiCad symbol library from this datasheet," or any mention of generating KiCad symbols, footprints, or .kicad_sym files from an IC/component datasheet. Also trigger for follow-on work on the same library: adding a part number, fixing a pinout, splitting package variants, or rebuilding after a correction. Extracts every part and pinout from the PDF into a verified JPD (JSON Part Description) file, then builds the .kicad_sym file with the kipart MCP server's jpd2spd, spd2csv, and kipart tools. Always use this for datasheets with multiple package variants, multi-unit parts (gate arrays, opamp channels), high pin-count packages (QFP/BGA), or alternate/muxed pin functions — these are exactly the cases this skill is built to get right where ad-hoc transcription goes wrong.
-
deveshpunjabi Bundle 3d Website ArchitectExpert skill for designing, building, and deploying modern premium websites with advanced animations and 3D interactive experiences using Three.js, React Three Fiber, GSAP, and Framer Motion. Use this skill whenever the user wants to build a website with 3D elements, create an immersive web experience, add interactive 3D graphics to a page, build a premium landing page with cinematic visuals, design a modern startup website with animations, create WebGL or Three.js scenes, build a product showcase with 3D models, or produce any kind of visually impressive, award-winning web interface. Also trigger when the user says things like "make it look like Awwwards", "add 3D to my site", "build an interactive landing page", "create an immersive experience", "premium website with animations", "modern startup page", "hero with particles or globe", "floating 3D elements", or mentions anything related to Three.js, React Three Fiber, WebGL, GSAP timelines, scroll-driven animations, particle systems, 3D product visualization
-
hawk86104 Bundle Tvt JS Plugin Builder理解并扩展 TvT.js / icegl-three-vue-tres 的插件体系。适用于 TvT.js 工作区中出现 新建插件、新建案例、src/plugins、public/plugins、config.js、预览元数据、tvtstore、FES_APP_PLSNAME、pluginMaker、PLS、qiankun、uniAppView、GoView 或 zone3Deditor 等场景。用它处理插件脚手架、页面或案例新增、preview 条目更新、插件 ZIP 打包安装、单插件预览或构建,以及 qiankun、uni-app、zone-editor 兼容约束。
-
hazat Skill Word Fixer OnboardingGuides end-to-end onboarding for the Word Fixer app from a clean checkout to a working installed app. Use when asked to "onboard word fixer", "set up word fixer", "install word fixer", "get word fixer working", "configure word fixer", or "help me set up this app". Checks repo state, pi availability, config, auth, installation, and macOS Accessibility permission, then proposes and executes the next actions with user confirmation.
-
hellokaton Bundle Game Copycat复刻网页小游戏,可选部署到 Cloudflare。当用户想"复刻/克隆/仿/照着做/copy/clone"某款游戏—— 给出游戏名、X/推特帖子链接、App Store/Google Play 页面、游戏截图或视频——或说"做一个像 XX 的游戏""把这个手游/小程序游戏做成 web 版""实现一个 2048/数织/Queens/Tango/Zip/Wordle/ Connections/数独/消除/合成/纸牌类小游戏""找个热门小游戏复刻一个"时使用,即使用户没说 "复刻"二字、只丢来一个游戏链接问"能不能做一个"也算。覆盖调研原作 → 玩法复刻 + 原创 换皮 → Vite+React+TS 实现与测试 → 浏览器自验 → 可选 wrangler 部署的端到端流程。 Use whenever the user wants to clone, replicate, remake, or "build something like" a casual puzzle/board/card web game from a name, link, or screenshot.
-
hermess Bundle Ppt DirectorUse when planning, optimizing, generating, reviewing, or packaging PPT/PPTX decks, especially with page MD, design language docs, Nuwa/Darwin skills, HTML previews, generation-ready director briefs, PPTX mapping, or rendered PPTX screenshot comparison.
-
hexabot-ai Bundle Hexabot Action CreatorCreate, scaffold, implement, review, document, and improve Hexabot v3 actions, including custom workflow actions, external API integrations, LLM-powered actions, memory reads/writes, settings or credential handling, action bindings, extension/plugin action packages, and input/output contract design. Use when wrapping business integration requirements as Hexabot actions. Do not use for generic NestJS, frontend-only work, generic workflow YAML unless action implementation is required, chatbot copywriting, generic API clients not wrapped as Hexabot actions, or non-Hexabot automation frameworks.
-
hexiaochun Bundle CopilotkitBuild AI-powered agentic applications with CopilotKit. Use when building React apps with AI copilot features, generative UI, chat interfaces, agent integration (LangGraph/Mastra/Agent Spec), human-in-the-loop workflows, shared state, frontend/backend actions, or MCP Apps. Covers setup, hooks, components, styling, and agent backends.
-
heyman333 Bundle Notion DocNotion design skill that MUST be used whenever creating documents. When the user asks for a document, report, summary, meeting notes, or review write-up in HTML/Markdown, load this skill first. The content decides the document's structure and outline; this skill only governs the Notion blocks (callouts, toggles, tables, checklists, code, columns, etc.) and visual style.
-
highcharts Skill Highcharts ReactUse to implement, configure, and troubleshoot Highcharts in React projects. Trigger for Highcharts-related chart or data visualization work — when in doubt, use this skill if Highcharts is a candidate.
-
hisn00w Bundle Offer SkillsCreate privacy-safe editable Chinese resume HTML and PDF files, or a browser-based job-application tracker, from DOCX, pasted text, JSON, screenshots, or an existing resume. Use for polished one-page or two-page layouts, flexible paper sizes, shared left alignment, blue section bands, photo replacement, browser editing, application status tracking, and print-to-PDF export.
-
hit-pay Bundle HitpayIntegrate HitPay payment gateway for online payments in Next.js and JS/TS applications. Use when user says "Add HitPay", "HitPay checkout", "HitPay payments", "HitPay webhook", "HitPay QR code", "PayNow integration", or "HitPay integration".
-
hiyeshu Bundle HangtolaTurn batches of uploaded images, image-plus-text notes, plain-text items, or mixed inputs into a researched and editable Chinese meme tier list with five ranks: 夯 / 顶级 / 人上人 / NPC / 拉完了. Use when the user mentions “夯到拉”, “夯榜”, “tier list”, “排行榜”, “排个档”, asks to rank a set of items, or uploads many images and wants them identified, named, ordered, and exported as a standalone HTML or PNG board.
-
hiyeshu Bundle Personality ReceiptUse this skill when the user asks for 人格小票, personality receipt, MBTI/type compression, self-pattern inference from memory, or a shareable receipt PNG/card. Read available context first, ask only 2-3 gap questions when needed, then produce a Chinese receipt as app.v1 JSON plus HTML/PNG via scripts/render-receipt.mjs. Also use it when this skill package appears incomplete or installation files need checking.
-
hmohamed01 Bundle Project ScaffoldingIDE-grade project scaffolding wizard for creating new projects with comprehensive configuration. Supports 70+ project types: HTML/CSS websites, React, Next.js, Vue, Astro, Remix, React Native, Flutter, Expo, FastAPI, Django, Express, NestJS, Go/Gin, Rust/Axum, Spring Boot, Hono, Elysia, Chrome Extensions, VS Code Extensions, Tauri desktop apps, serverless functions, and more. Provides WebStorm/PyCharm-level project creation with interactive SDK selection, framework configuration, database setup, and DevOps tooling. Use when: creating a new project, setting up a framework application, initializing a codebase, scaffolding boilerplate, building extensions, creating mobile/desktop/web apps, setting up monorepos, or making static websites/landing pages.
-
hmtkyn Bundle Hydrogen Ecommerce UXResearch-backed UX best practices for Shopify Hydrogen storefronts, based on Baymard Institute (200,000+ hours of usability research) and Nielsen Norman Group studies. Use this skill WHENEVER the user is building, reviewing, or improving any part of a Shopify Hydrogen e-commerce site — including homepage, collection/listing pages, product pages, cart, checkout, search, filters, mobile UX, accessibility, or trust/credibility concerns. Also use when the user asks for code review on Hydrogen components, wants to scaffold a new route or component, or mentions conversion, cart abandonment, or shopping experience issues. Trigger even if the user doesn't explicitly say "UX" — any Hydrogen storefront work benefits from these guidelines.
-
hongbietcode Bundle Finance KitVietnamese stock market analysis toolkit. Routes queries by complexity tier (T1-T4), collects live data via Python scripts, delegates role-based analysis when subagents are available, and assembles HTML reports. Works with Codex, Claude Code, Cursor, and Copilot.
-
ie3jp Bundle Decision BoardCollect many per-item decisions (keep/drop/check, accept/reject, yes/no) or answers to a long question list through one interactive HTML page (an Artifact with shared storage), then read the answers back and reply per item. Use when a task needs more than a handful of user judgments and one-by-one CLI questions would be tedious. Triggers - "make a list I can decide on", "let me pick which ones to keep", "too many questions, give me a page", "read the decision board", "check the board answers"; 日本語 - 「一覧にして判断したい」「いる/いらないを選ばせて」「質問が多いので画面で答えたい」「decision-board を読んで」「ボードの回答を確認して」.
-
ilikescience Bundle Design TokensExpert in design tokens using the DTCG specification. Use this skill when users ask about design tokens, DTCG format, token validation, formatting, transformation, color spaces (sRGB, Display P3, OKLCH), references and aliasing, resolvers, theming with modifiers/contexts, multi-platform design systems, accessibility, or working with tools like jq, jsonata, and terrazzo. Helps with token file creation, resolver configuration, structure, naming conventions, and best practices.
-
imba Bundle Imba DevHow to write Imba code. Use this skill for ANY task involving writing, reading, debugging, or understanding Imba language code — tags, CSS, events, control flow, classes, decorators, or any Imba syntax and patterns. This covers the Imba language itself, NOT the OP framework (use op-dev for that). If the user is writing .imba files, working with tag components, Imba CSS, event handlers, or any Imba language feature, use this skill.
-
imzbf Bundle Md Editor Rt集成、定制或排查 md-editor-rt 时使用。适用于在 React 18+、Next.js、SSR 或 Web Component 项目中接入 MdEditor、MdPreview、MdCatalog,给 md-editor-rt 增加图片上传、目录联动、自定义工具栏/页脚、主题/语言、markdown-it 与 CodeMirror 扩展、config() 全局依赖替换,以及处理 SSR、样式、MdCatalog 滚动、高亮/公式/mermaid/echarts、本地实例替代 CDN、XSS 与副作用等常见问题。
-
imzbf Bundle Md Editor V3集成、定制或排查 md-editor-v3 时使用。适用于在 Vue 3、Nuxt、Electron 或 Web Component 项目中接入 MdEditor、MdPreview、MdCatalog,给 md-editor-v3 增加图片上传、目录联动、自定义工具栏、主题/语言、markdown-it 与 CodeMirror 扩展、config() 全局依赖替换,以及处理 SSR、样式、MdCatalog 滚动、高亮/公式/mermaid/echarts、本地实例替代 CDN、XSS 与副作用等常见问题。
-
inertiaui Bundle Inertia Modal DevelopmentBuild and work with inertiaui/modal features including opening routes in modals/slideovers, configuring modal behavior, prefetching, local modals, nested modals, event communication, and headless mode. Supports both React and Vue.
-
bartundmett Skill BloktasticAdd Storyblok components from the Bloktastic registry and generate production-ready frontend code — no copy-paste needed.
-
beihai23 Bundle Cognitive HTML Doc将密集、线性的 Markdown 技术/产品文档重构为认知降维的工业级单文件 HTML 文档。核心目标是让读者 3 秒抓核心、30 秒理解全貌、3 分钟查到细节。使用此 skill 当用户:把 markdown 转成 HTML、要求做"漂亮的 HTML 文档"、要求"工业级 HTML"、要"技术文档可视化"、给一份 markdown 蓝图要 HTML 化、需要带 TOC/Mermaid 图表/卡片设计的长文档、提到"降低认知负荷"或"扫视即可获取"。即使没明说"HTML 文档",只要涉及把密集文字降维成结构化、可扫读的形态,就用此 skill。不要用于简单 markdown 渲染(一行命令即可)或纯打印样式 PDF。
-
betalyra Bundle Effect Best PracticesEnforces Effect-TS patterns for services, errors, layers, and atoms. Use when writing code with Effect.Service, Schema.TaggedError, Layer composition, or effect-atom React components.
-
bettermen Bundle Ad TraderAI广告投手全流程助手。覆盖数据导入→投放分析→预算优化→素材诊断→智能报表→异常告警6大阶段。支持多平台(腾讯广告/巨量引擎/百度推广/Meta/Google Ads)数据统一分析,自动生成交互式HTML可视化报告,提供ROI/ROAS/CTR/CVR/CPA等多维度智能诊断和优化建议。触发词:广告投手, 投放分析, 广告优化, ROI分析, 素材分析, 广告报表, 投放诊断, 预算优化, 广告数据, ad trader, 投手报告, 广告账户诊断, 转化分析, 广告素材诊断, 广告出价优化。
-
bettermen Bundle Ecommerce Image Diagnosis电商主图&详情页诊断助手。给它商品主图、详情页截图、搜索结果截图,或者商品链接,自动分析主图点击率潜力与详情页转化率,从视觉清晰度、信息传达、差异化、信任背书、平台合规等10个维度打分,生成结构化 HTML 可视化诊断报告,包含评级、核心发现和 P0/P1/P2 优先改进行动清单。适用于淘宝、拼多多、抖音电商、京东等平台。触发词:主图诊断、详情页诊断、商品图分析、主图优化、详情页分析、电商图片诊断、帮我看看主图、分析详情页、主图好不好、主图转化率、ecommerce image diagnosis。
-
bettermen Bundle Pdd Researcher拼多多研究员 — 专注拼多多单一平台的全维度电商研究助手。输入商品名/类目/店铺名/关键词,自动完成商品深度解析、关键词研究、竞品对标、爆款追踪、店铺诊断、类目大盘、价格策略、用户洞察8大分析,生成交互式HTML可视化报告。覆盖拼多多特有指标(已拼数/百亿补贴/DSR/品牌黑标),深耕低价爆量模式与下沉市场用户画像。触发词:拼多多分析、拼多多研究、拼多多选品、拼多多竞品、拼多多关键词、拼多多爆款、拼多多店铺、拼多多类目、pdd分析、pdd research、pdd选品、分析拼多多、拼多多调研、拼多多数据、拼多多定价、PDD Researcher。
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 decoindex, slide-generation-system, bitcoin-ui. 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.