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.
-
aaronflorey Bundle Skill ResearcherResearch and recommend the best available skill for the current codebase or working directory. Use this whenever the user is working inside an existing project and asks what skill to use, which skill fits the repo, how to choose between skills, or before doing substantial work in a codebase that may benefit from a specialized skill. Start with a quick repo summary from the `brief` CLI when available, then inspect the project's high-signal files, major packages, languages, frameworks, SDKs, and config files. Search installed, locally synced, or otherwise available skills for the strongest match. Prefer one best-fit skill with evidence from the repo, plus 1-2 runner-ups only when overlap is real. Also trigger when the repo contains obvious markers like package.json, pyproject.toml, Cargo.toml, go.mod, Gemfile, pom.xml, framework configs, or imports for major ecosystems such as React, Next.js, TypeScript, Python, FastAPI, Django, MCP, or the Anthropic SDK.
-
spree Skill Spree Events WebhooksUse when the user wants Spree to react to something that happened — sync orders to an ERP, send notifications, fire webhooks, integrate with external services, configure webhook endpoints, verify webhook signatures. Common phrasings include "react to X", "when X happens", "send notification when", "sync to external service", "Spree events", "subscribers", "publish_event", "webhook endpoint", "webhook signature", "X-Spree-Webhook-Signature", "HMAC", "webhook retry", "webhook failed", "webhook.test". Covers in-process subscribers (Ruby side effects) AND outbound webhooks (HTTPS POSTs to external URLs).
-
ssurmic Skill Jackal State MachineSTOCK TRADING ONLY — Classify a stock's current price action into 1 of 5 states (Breakout / Range / Pullback / Deep-Correction / Structural-Break) from Jackal Quant's framework, and output the corresponding position-sizing playbook. Use when user types English: "what state is $TICKER in", "state classify NVDA", "Jackal state for MRVL", "5-state $TICKER", or Chinese: "$TICKER 现在是哪个 state", "$TICKER 在哪个阶段", "$TICKER 的 5态分类", "用 Jackal 框架看 $TICKER". DO NOT trigger for: software state machines, code state diagrams, finite-state automata, React state, Redux state, or any non-equity-market query. If "state" appears without a ticker symbol or market context, do NOT invoke.
-
suifei Skill XLSXUse this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
Audited -
suifei Skill Add Go ModuleStandardized workflow for adding a new Go module to GopherPaw. Use when the user asks to add a new feature, create a new package, implement a new component, or build a new module in the internal/ directory.
-
suifei Skill Spec Driven DevFour-stage spec-driven development workflow for building new features. Use when the user asks to start building a new feature, begin a development sprint, or wants a structured approach to implement a major component.
-
wpultimatesecurity Bundle Output EscapingUse when echoing or printing any dynamic value in WordPress PHP or templates — into HTML, attributes, URLs, inline JavaScript, or textareas. Escapes at the point of output with esc_html, esc_attr, esc_url, esc_js, esc_textarea, or wp_kses_post, including the i18n variants (esc_html__, esc_attr_e). Prevents stored and reflected XSS. Apply proactively to every echoed variable, even data from the database.
-
wpultimatesecurity Bundle REST API SecurityUse when registering WordPress REST API routes with register_rest_route or building custom endpoints. Sets a real permission_callback (never __return_true for writes), defines args with sanitize_callback and validate_callback, enforces capabilities and per-object checks, and escapes any HTML in responses. Prevents broken access control and injection via the REST surface. Apply proactively to every registered route.
-
stephschofield Bundle Azure PreparePrepare Azure apps for deployment (infra Bicep/Terraform, azure.yaml, Dockerfiles). Use for create/modernize or create+deploy; not cross-cloud migration (use azure-cloud-migrate). WHEN: "create app", "build web app", "create API", "create serverless HTTP API", "create frontend", "create back end", "build a service", "modernize application", "update application", "add authentication", "add caching", "host on Azure", "create and deploy", "deploy to Azure", "deploy to Azure using Terraform", "deploy to Azure App Service", "deploy to Azure App Service using Terraform", "deploy to Azure Container Apps", "deploy to Azure Container Apps using Terraform", "generate Terraform", "generate Bicep", "function app", "timer trigger", "service bus trigger", "event-driven function", "containerized Node.js app", "social media app", "static portfolio website", "todo list with frontend and API", "prepare my Azure application to use Key Vault", "managed identity".
-
stolinski Skill HTMLWrites and reviews semantic, accessible HTML and template markup that stays readable and low-noise. Use when creating or refactoring HTML or Svelte templates, cleaning up div soup, choosing better elements, improving form markup, fixing heading or landmark structure, or replacing custom controls with native HTML.
-
stolinski Skill Design EngineeringUse when designing, building, reviewing, or polishing user interfaces, motion, component behavior, interaction details, and product-feel across any frontend stack. Generalized from Emil Kowalski-style design engineering principles; framework-neutral, implementation-first.
-
stolinski Bundle Svelte Code WriterCLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.
-
stolinski Bundle Svelte Core BestpracticesGuidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.
-
yaojingang Bundle Yao Crux SkillUse when a user is stuck in a complex real-world situation with many conflicts, limited resources, unclear priorities, or asks to identify the principal contradiction, secondary contradictions, dominant aspect, breakthrough actions, monitoring thresholds, probability projection, and Markdown/Word/HTML/PDF reports. Triggers on 矛盾论, 主要矛盾, 次要矛盾, 主次矛盾, 卡住了, 优先级混乱, 找关键问题, 资源有限, 冲突很多. Do not use for philosophy-only summaries, Mao text commentary with no live case, generic brainstorming with no diagnosis, or final licensed medical, legal, investment, or psychological-crisis advice.
Audited -
yaojingang Bundle Yao Expert SkillCreate expert-level learning reports and tutorials from any domain, industry, technology, role, market, product idea, or vague field question. Use when the user wants to quickly build domain expertise, understand an industry, generate a structured expert study report, build a keyword library, design Feynman self-tests, or export the result as Markdown, DOCX, PDF, and HTML. Do not use for short factual answers, pure business model diagnosis, standalone beginner tutorials with no domain-structure research, simple file conversion, or unsourced opinion writing.
Audited -
yaojingang Bundle Yao Weread Skill当用户需要分析微信读书阅读历史、生成读书报告、可视化阅读统计、笔记、书架、词云、热力图、雷达图,或导出精排 HTML 报告时使用。也适用于创建 AI 创业者示例阅读报告。不用于通用图书推荐,或不生成报告的原始微信读书 API 查询。
Audited -
yaojingang Bundle Yao Bayesian SkillConvert uncertain real-world choices into an auditable Bayesian evidence-to-action report with priors, evidence grading, posterior update, action thresholds, sensitivity checks, multi-turn decision logs, and Markdown plus bilingual HTML output. Do not use for Bayes theorem tutoring, homework, generic brainstorming with no report, or final licensed medical, legal, or financial advice.
Audited -
yaojingang Bundle Yao Business SkillDesign, diagnose, and study business models from ideas, product websites, or company names. Use when asked to create options for a new idea, audit an existing product's monetization and competitors, or analyze a mature company's model and AI-era upgrade paths. Adjust for market, buyer, and operating environment, then output JSON plus HTML.
Audited -
yaojingang Bundle Yao Tutorial SkillCreate standalone beginner tutorial packages from a topic or supplied references, with adaptive research, course-style outline design, chapter visuals, and Markdown/DOCX/PDF/HTML exports. Use for textbook-like tutorials, course guides, teaching documents, or long beginner guides; not for quick answers, link summaries, pure diagrams, or file conversion.
Audited -
yaojingang Bundle Yao Gametheory SkillRoute CEO-facing competition, negotiation, channel, pricing, platform, M&A, financing, competitor-response, alliance, and regulator problems through an applied game-theory framework router when decisions depend on opponent reactions, credible commitments, signals, payoff/equilibrium logic, historical behavior, dynamic updates, or Markdown/HTML/Word/PDF report export. Do not use for textbook tutoring, proofs, gambling, generic brainstorming, or final legal/financial/regulatory advice.
Audited -
marve10s Skill HTML ReportsWrite reports, plans, audits, explainers, and comparisons for the user as rich single-file HTML instead of markdown. Use whenever producing a report, implementation plan, audit result, research summary, PR walkthrough, or design exploration addressed to the user, however phrased ("write up what you found", "make a plan", "summarize the audit").
-
programmeranthony Bundle Docs Lookup通过 Context7 MCP 获取库和框架的实时最新文档,而非依赖训练数据,防止 API 幻觉。适用于查询任何库或框架的用法、配置、示例代码。触发词:怎么用、怎么配置、API参考、文档、示例代码、用法、接口、库文档、框架文档、documentation、docs、how to use、API reference、setup、configure、React怎么用、Next.js配置、Prisma查询、Vue用法、Express路由、Tailwind类名、Supabase认证、TypeScript类型、Zod验证、shadcn组件、Drizzle ORM、tRPC、Fastify、NestJS、Astro、SvelteKit、Nuxt、Vite、Vitest、Playwright。
-
programmeranthony Bundle Frontend Code ReviewUse when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。
-
programmeranthony Bundle React Best PracticesUse when 用户需要React项目开发指导、代码规范制定、最佳实践落地、性能优化、架构设计时。触发场景:React开发、React代码优化、React架构设计、React Hooks使用、Next.js开发、React组件设计、React性能优化。
-
programmeranthony Bundle Frontend Performance OptimizationUse when 用户需要优化前端性能、提升页面加载速度、减少白屏时间、优化交互流畅度、进行性能排查时。触发场景:前端性能优化、页面加载慢、白屏时间长、卡顿、LCP/FID/CLS指标优化、前端性能分析、打包体积优化。
-
signalpilot-labs Skill Write ReportGenerates an HTML report summarizing dbt project work: decisions, SQL, queries, verifier results, and visual charts. Only load when explicitly requested.
-
signalpilot-labs Skill Dashboard AuthoringCreate, repair, or refine governed SignalPilot dashboards through the run-scoped authoring tools. Use only for explicit dashboard authoring requests, not ordinary analytics questions, chart answers, or HTML reports.
-
krutikjain Bundle Android Testing UIValidate Android UI behavior with Compose UI tests, Espresso-style checks, screenshot assertions, and accessibility verification.
Audited -
krutikjain Bundle Android Compose AccessibilityMake Compose interfaces accessible with semantics, announcements, contrast, focus order, and adaptive touch targets.
Audited -
krutikjain Bundle Android Mobile Frontend DesignDesign Android mobile frontend experiences from scratch, improve existing screens, and fix UI issues with brand-forward, localization-safe, overflow-safe guidance across Compose and Views.
Audited -
getstoreconnect Bundle Storeconnect FormsStoreConnect storefront forms — the Liquid form tag, registered form names and usable fields (login, register, account, add-to-cart, cart, the four checkout steps, vouchers, promo codes, account credit, saved payment methods, subscriptions, bookings, privacy, geolocation, custom forms), the form and field Drop API, validation and error handling, safe generated-field handling, and form accessibility. Load before writing any form name or field name into a StoreConnect template, whenever a template must accept customer input, and when a form will not submit, validate, or show its errors.
-
getstoreconnect Bundle Storeconnect LiquidWrite StoreConnect Liquid template logic and read record data — Drops and their exact attributes, the {% query %} tag, {% cache %}, {% component %}, {% paginate %}, {% update %}, search pages, store-relative links, and escaping. Use when authoring or editing a .liquid template, page or article body, content-block template, snippet, or layout, and when querying, filtering, or updating records. For a form or field name use storeconnect-forms; for theme structure and styling use storeconnect-theme-development; to instrument a blank or slow page use storeconnect-debug-performance.
-
89jobrien Skill Insights AuditUse when the user runs "/insights-audit", asks to "validate the insights report", "audit the report against my projects", "check what the report got wrong", or wants to cross-check an /insights-generated HTML report against actual GitHub repos and local project directories.
-
backtocimacoppi Bundle Design Preview把已有或拟改 UI 形态按组件结构与样式真值还原为像素级自包含 HTML,在 Chrome 打开并截图自检。触发:预览设计稿、出效果图、还原页面、对图评审、design preview。移动端用 750 舞台 scale(0.5) 保持 rpx 映射。
-
backtocimacoppi Bundle Doc HTML Style仅手动触发。把已定内容制作成桌面阅读优先、自包含、支持明暗主题的单文件 HTML 技术文档。只在用户显式输入 /doc-html-style 时使用;移动端像素预览用 design-preview,内容归层用 doc-layer-system。
Audited -
bastidood Bundle React Best PracticesReact component conventions for explicit state ownership and data flow. Use when creating or reviewing React components, hooks, effects, or forms.
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 yao-bayesian-skill, yao-crux-skill, yao-tutorial-skill. 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.