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.
-
amsdamsgram Bundle Cloudflare DeployPublish a static site — a folder, or a single HTML file — to Cloudflare Pages behind a Cloudflare Access email login. Use when the user wants to deploy, host or put online a page, site, report, dashboard or internal tool, especially privately or for named people only; put something behind a login or password; or asks about Cloudflare Pages plus Access. Also handles changing who is allowed in and re-deploying an update. Asks for anything it is missing before touching the account.
-
first-fluke Bundle Oma Mobile 4Mobile specialist for Flutter, React Native, and Swift native iOS development. Use for mobile app, Flutter, Dart, React Native, Swift, SwiftUI, iOS, Android, Riverpod, swift-openapi-generator, and widget work.
-
suqo-ai Bundle TS Sdk Usage 2Use for any TypeScript/Node work with the SUQO TS SDK (@suqo/sdk) — listing products, customers, or subscriptions, creating or cancelling subscriptions, resuming or moving a billing cycle, paging, verifying inbound webhooks, wiring the client into Express, Fastify, Next.js, or plain Node, reading SUQO error responses, or testing code that calls the SDK. Provides exact method signatures so the SDK is never guessed at, and the raw-body rule that most broken webhook handlers get wrong.
-
pold911 Bundle Vibe Code Security AuditAudit web applications and codebases for the most common and dangerous security vulnerabilities — especially those introduced by AI-assisted ("vibe coded") development. Use this skill whenever the user asks to review code for security issues, harden an app, audit an API, check for vulnerabilities, or secure a project. Also trigger when the user mentions terms like "security review", "pentest checklist", "harden my app", "is my code secure", "fix security holes", "OWASP", "SQL injection", "XSS", "vibe code security", or shares backend/frontend code and asks if anything looks wrong. Even if the user just says "review my code" without mentioning security, consider triggering this skill — security is always relevant.
-
agentscope-ai Bundle Bi Report Generation将 BI 数据分析结果组织成可视化 HTML 报告。当分析完成、需要生成报告时调用。
-
agentscope-ai Bundle Bi Dashboard Generation将 BI 数据分析结果构建为可筛选的交互式 HTML 看板。触发条件:① 用户显式要求「给我看板」时无条件触发;② 取数结果满足以下任一时自动触发——结果集行数>10行、存在可筛选维度(产品线/地域/时间粒度等)、涉及多张表数据、时序跨度长。
-
career-cafe Skill Github Repo Metadata RewriterSystem architecture, microservice topology, git history rewrite pipelines, AI timestamp distribution engine, sandboxed workspaces, and Go + Templ frontend runbooks for github-repo-metadata-rewriter.
-
marshanda14816 Bundle Build Nitro ModulesBuilds React Native Nitro Modules from scratch in a monorepo. Scaffolds with Nitrogen, authors HybridObject TypeScript specs, generates native boilerplate, implements in C++/Swift/Kotlin, wires an example app, and prepares for npm publishing. Use when creating a new Nitro Module, implementing native functionality via HybridObjects, or setting up the nitrogen codegen pipeline.
-
shikigami-ai-works Skill Bg PDF装飾背景(金枠、便箋、レターヘッド、全面テクスチャ)を敷いた A4 の PDF を、HTML を正本にしてヘッドレス Chrome の印刷で作る手順。ユーザーが「金枠の PDF」「背景を指定した PDF」「この画像を背景にした PDF」「1枚ものの案内を PDF で」「賞状、案内状、メニュー表、提案書を PDF で」と言ったとき、または背景画像付きの紙もの(Web 表示と印刷の両対応を含む)を新しく作る、直すときに使う。背景素材の実測、画面と印刷の敷き分け、zoom の補正、枚数の検査を含む。挿絵入りで複数ページの冊子は a4-booklet を使う。
-
shikigami-ai-works Bundle Rosenzu路線図(長い流れを路線、流れの節目を駅として描く可視化 HTML)を作ったり直したりする手順と雛形。V1 のような固定の路線記号、乗換駅、新しくつないだ区間の破線を描き、区間が実在のつながりに無ければ書き出さずに止まる。ユーザーが「路線図にして」「路線図みたいに可視化して」「処理の流れを路線図で見たい」と言ったとき、既存の路線図へ路線や駅を足したり直したりするとき、複数の流れが同じ節目を共有する様子を一枚で見せたいときに使う。
-
shikigami-ai-works Bundle Sekkeizuコードを書く前に業務フローとER図の設計図を作り、画面、概念図、ER図を切り替えて見る1枚の HTML に書き出す手順と雛形。ユーザーが「設計図を作って」「作る前に図にして」「ER図にして」「業務フローを描いて」「データの持ち方を先に決めたい」と言ったとき、設計図を直すとき、実装計画を書く前に誰が何をして何を残すかを固めたいときに使う。
-
duanj0825 Skill Frontend Sketch前端交互原型草图。改前端布局/交互前,先产出自包含的 HTML 原型 + 内嵌"设计要点"面板,让用户在浏览器里可视化对齐,再回主流程改代码。用户提到"设计一下界面/讨论布局/画个原型/看看交互效果/怎么改这个页面/给个草图"等场景自动使用;也可显式调用 `/frontend-sketch <目标>`。仅覆盖布局/交互/信息层级/视觉状态类改动,不覆盖单纯 bug 修复、字段增删、后端改动、用户已给完整实现规格的场景。
-
wanghetommy Bundle IchartjsPlan, validate, render, explain, and safely edit iChart.js visualizations from tabular, project, or diagram data. Use when Codex needs to choose a chart, create or repair an iChart.js Spec, build a browser preview, produce Gantt or project analytics, create Flow or Swimlane diagrams, or verify visualization accessibility, diagnostics, lineage, and runtime state.
-
zinan92 Bundle Daily NewsletterOperate, verify, or improve a local-first Daily Inbox pipeline that turns source feeds, X, media, manual links, and saved items into Chinese Markdown/HTML/PNG artifacts plus Feishu delivery receipts. Use when a user asks to run, debug, review, package, or extend the daily-newsletter / Daily Inbox workflow.
-
shikigami-ai-works Bundle A4 Booklet挿絵入りの A4 冊子(ルールの要約、入門ガイド、ファンガイド、手引き書)を、1つの HTML を正本にして Chrome のヘッドレス印刷で PDF にする手順と雛形。ユーザーが「〇〇のルールブックを作って」「はじめてガイドを作って」「ルール要約を挿絵入り PDF にして」「冊子を PDF で作りたい」「同じ要領で別の版も」と言ったとき、または既に作った冊子の別版、続編、修正を作るときに使う。ページ画像での検証、挿絵の用意、ページ番号の付け替え、原作の文章を写さない決まりを含む。1枚ものの背景付き PDF は bg-pdf を使う。
-
shikigami-ai-works Bundle Explain Visually長い設計文書や実装計画を読み解き、図と短い文で1枚の解説 HTML にして開く手順。設計判断に識別子(D-01 など)を振り、「D-03 を詳しく」と頼まれればその項目だけの深掘りページを作る。ユーザーが「図解で理解したい」「計画を読み解いて」「この計画を図にして」「設計書を解説ページにして」「/explain-visually」と言ったとき、または実装計画を承認してもらう前に中身を理解してもらいたいときに使う。
-
seanding1998 Bundle Liuyao Divination专业六爻纳甲筮法排盘与解卦。自动起卦排盘,十步完整流程(第零步排盘→审题取用神→判定旺衰→追踪动变→伏神分析→世应关系→六神兽取象→应期推断→综合断语→智能体审查→HTML报告)。 使用场景:六爻占卜、金钱卦、纳甲筮法、周易预测、起卦解卦。
-
distherion Bundle Abap Coding StandardsRules for writing and reviewing ABAP 7.50 (SAP) code — coding standards, Clean ABAP, error handling, LUW/COMMIT, AUTHORITY-CHECK, DDIC, internal tables, Open SQL, CDS/AMDP, HR infotypes (PA/OM/PD), BAPI/RFC. Apply when editing .abap files or abapGit exports; when reviewing, auditing or refactoring a diff, class, method, function module, report, BAdI or enhancement; when fixing a short dump (ST22) or an ATC/abaplint finding; and when the user mentions ABAP, SAP, SE80/ADT, abapGit, or asks in Russian — "отревью", "правь метод", "отчёт ABAP", "инфотип". Targets NetWeaver 7.50 — no post-7.50 statements or types. Not for the SAP frontend (Fiori/SAPUI5, Web Dynpro), output forms (Smart Forms/Adobe), IDoc/ALE, BW/analytics, or ABAP Cloud.
-
adhhamdev Bundle Modern React GuidanceAuthoritative guidance for modern React 19+ (Actions, use, Compiler, View Transitions, Fragment refs, Activity, browser, useEffectEvent). Use when writing, reviewing, refactoring, or migrating React components, forms, data fetching, concurrent UI, or upgrading to React 19+. Triggers on React, React 19, useActionState, useOptimistic, forwardRef, useEffect data fetch, React Compiler, ViewTransition, Suspense patterns, or codemods. Always prefer latest official patterns over training data.
-
raghuramsirigiri Bundle Chart Dashboard 2Build a self-contained HTML dashboard, data-story report, or slide deck from supplied information (metrics, tables, notes, pasted data, a topic), rendered with the bundled zero-dependency charts-lib SVG chart library. Use whenever the user asks for a dashboard, analytics page, KPI/bento view, illustrated report, or a presentation, slides or a deck built from data they provide or describe.
-
zerotokenclaw Bundle Unitree DocsDiscover, search, retrieve, and synchronize official Unitree documentation across every robot, component, SDK, language, and documentation space. Use whenever an agent needs current information from support.unitree.com, needs to resolve a Unitree documentation URL, browse a document tree, quote an official page, or find documentation without assuming a product such as G1 or Go2.
-
getedgehq Bundle Shadcn FirstBuild UI with shadcn blocks and components instead of hand-written markup. Load this before writing ANY React/Next UI: new screens, redesigns, "make it look better", dashboards, sidebars, tables, forms, dialogs, chat surfaces. Enforces one standing rule: everything shadcn-based, no hand-rolled UI, as little custom code as possible.
-
davyzhong Skill Craft Readme写一个图文并茂、符合 19 条铁律 + 13 条反模式 + 95 分评分量表的 README.md。当用户提到"写 README"、"项目说明文档"、"改造 README"或希望为新建项目生成 README 时调用。会先读取 METHODOLOGY.md,再收集项目素材,最后按选定模板产出。**v2.1 升级**:覆盖 i18n / LLM 友好 / 包容性语言 / 无障碍 a11y 四大 2025+ 适配维度,新增 T17 默认语言策略。
-
minihellboy Skill Factor ReportGenerate static reports, tearsheets, and exports from FactorMiner artifacts — markdown/HTML research notes, plots, and library exports (JSON/CSV/formulas). Use to package a finished research run for review. Triggers on "generate report", "factor report", "research note", "tearsheet", "visualize factors", "export library", "write up the results".
-
gabrielmoreira Bundle XLSX 12Use 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.
17 -
gabrielmoreira Bundle Oma Mobile 2Implement Flutter, React Native, or native Swift apps. Use for mobile screens, widgets, platform integrations, and application data flows.
17 -
gabrielmoreira Bundle Oma Frontend 2Implement or modify web UI in React, Next.js, or Angular. Use for components, pages, styles, forms, and frontend state or data flows.
17 -
gabrielmoreira Bundle React 3Use when implementing advanced React patterns — designing custom hooks, using Suspense or error boundaries, applying TypeScript generics to components and hooks, or building animated UI with Framer Motion, View Transitions, or scroll-driven animations. For Next.js App Router, Server Components, or Server Actions, use nextjs.
17 -
gabrielmoreira Skill Commit 5Create commits across ToolJet's root and submodule repos (server/ee, frontend/ee). Detects dirty repos, generates commit messages, and updates submodule pointers in the right order. Use when asked to commit changes. Often followed by create-pr.
17 -
gabrielmoreira Skill Create Pr 8TRIGGER when: user asks to create, open, make, submit, or update a PR/pull request in ToolJet. Pushes root + submodules, creates or updates submodule PRs (ee-server, ee-frontend), then creates the main PR with a generated description.
17 -
gabrielmoreira Bundle Code Polish 2Engineering Refinement & Standardization Specialist: simplify, standardize, and engineer code into explicit, maintainable structure without changing behavior. Authorized to perform structural refactors inside a logical unit (function/component/module) when needed to enforce project standards and clarity; requires an explicit Plan of intended edits and safety checks.
17 -
naodeng Bundle UI Test Cypress 2Use this skill when you need to design Cypress e2e and component testing plans with commands, fixtures, network stubbing, and CI reporting; triggers include Cypress UI testing, UI automation testing, and ui-test-cypress.
-
inference-sh Skill Elevenlabs Tts 2ElevenLabs text-to-speech with 22+ premium voices, multilingual support, and voice tuning via inference.sh CLI. Models: eleven_multilingual_v2 (highest quality), eleven_turbo_v2_5 (low latency), eleven_flash_v2_5 (ultra-fast). Capabilities: text-to-speech, voice selection, stability/style control, 32 languages. Use for: voiceovers, audiobooks, video narration, podcasts, accessibility, IVR. Triggers: elevenlabs, eleven labs, elevenlabs tts, premium tts, professional voice, ai voice, high quality tts, multilingual tts, eleven labs voice, voice generation, natural speech, realistic voice, voice over, speech synthesis
584 -
inference-sh Skill Text To Speech 2Convert text to natural speech with Inworld TTS, ElevenLabs, DIA TTS, Kokoro, Chatterbox, and more via inference.sh CLI. Models: Inworld TTS-2 (100+ languages, emotion steering), Inworld TTS 1.5 (ultra-low latency), ElevenLabs (premium, 22+ voices, 32 languages), DIA TTS (conversational), Kokoro TTS, Chatterbox, Higgs Audio, VibeVoice (podcasts). Capabilities: text-to-speech, voice cloning, multi-speaker dialogue, podcast generation, expressive speech, emotion/delivery steering, character voices. Use for: voiceovers, audiobooks, podcasts, accessibility, video narration, IVR, voice assistants, gaming characters, avatar audio. Triggers: text to speech, tts, voice generation, ai voice, speech synthesis, voice over, generate speech, ai narrator, voice cloning, text to audio, elevenlabs, eleven labs, voice ai, ai voiceover, speech generator, natural voice, inworld, inworld tts, character voice, game voice, npc voice
584 -
gabrielmoreira Bundle Cinematic Web Experiences 2Build prompts and workflows for premium scroll-driven websites using GSAP ScrollTrigger, Three.js scenes, custom shaders, cinematic loading screens, and responsive motion systems. Use when the user wants a cinematic website, landing page, microsite, or interactive brand experience with scroll storytelling, pinning, parallax, 3D canvas effects, shader-driven visuals, exact animation specs, or a repeatable prompt framework for prompt-based site builders.
17 -
gabrielmoreira Skill Trigger Authoring Chat Agent 2Author and run a durable AI chat agent with chat.agent from @trigger.dev/sdk/ai: the per-turn run loop, why you MUST take streamText from the run argument rather than importing it from ai, returning a StreamTextResult vs calling chat.pipe(), the two server actions (chat.createStartSessionAction + auth.createPublicToken), and wiring useChat to useTriggerChatTransport. Load this when building, modifying, or debugging a chat backend (the agent task or its lifecycle hooks) or its React transport, when declaring typed tools or custom data parts, or when migrating a plain AI SDK streamText route to chat.agent.
17
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 cloudflare-deploy, oma-mobile, ts-sdk-usage. 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.