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.
-
adobe Bundle Analyze And Plan 2Use this when you need to define acceptance criteria, write requirements, scope work, or create a definition of done for AEM Edge Delivery Services (EDS) tasks such as new blocks, variants, behavior modifications, CSS-only changes, or bug fixes. Covers analyzing development requirements, producing task breakdowns, identifying edge cases, and documenting the analysis.
142 -
adobe Bundle Ue Component Model 2Use this when the user mentions component models, component definitions, component filters, block configuration for the Universal Editor, UE block setup, adding a new block to UE, configuring block properties or block authoring fields, or wants to create an EDS/Franklin block with Universal Editor support, modify block fields, or add a block to the section filter. Covers creating and editing the three JSON files that control how AEM Edge Delivery Services blocks appear and behave in the Universal Editor — component-definition.json, component-models.json, and component-filters.json.
142 -
gajjug004 Skill Cmd K Command PaletteBuild a Cmd+K command palette in a Frappe / frappe-ui Vue app: one dialog that jumps to any record, space or app page and runs actions. A checklist covering scope, the search endpoint, ranking, groups, keyboard handling, accessibility, recents and tests. Use when the user wants a command palette, quick switcher, global search, Cmd+K, Ctrl+K, or "jump to anything" in a Frappe app.
-
gajjug004 Skill Frappe Product TelemetryAdd product telemetry to a Frappe app so it reports to Pulse, the way insights, helpdesk and wiki do. A checklist covering consent, the event catalogue file, naming and privacy rules, the backend and frontend wrappers, click events, the daily site scan, and tests. Use when the user wants usage analytics, product metrics, event tracking, Pulse events, or a telemetry spec for a Frappe app.
-
adobe Bundle Workfront ActionsUse when writing or fixing the server-side code of a Workfront App Builder extension — the Adobe I/O Runtime action the React SPA calls to do work the browser can't. Reach for this whenever the user is: structuring or editing action code; deciding what shape an action returns so the frontend can tell success from failure (the {data,error} body); passing the IMS token through and calling an external API from the backend so credentials never reach the browser; calling Workfront's own Public API v21 (search/count, bulk PUT with the updates param, custom DE: field filters); calling Workfront Planning or another Adobe service; or troubleshooting why a deployed action can't read secrets (process.env is empty once deployed — inputs flow .env → config inputs → params). Also covers CommonJS-only structure, require-adobe-auth, and registering actions in app.config.yaml / ext.config.yaml. For generic non-Workfront action templates and SDKs see appbuilder-action-scaffolder.
142 -
y5h1ggs Bundle SkillA股选股分析牛马工具——T+1 隔日接力选股全流程 SOP(首次使用先做基础数据录入 → 全市场扫描 → 行业主线 → 连板基因分类 → 深检回测 → T0/T1分层 → 概率标注 → 一键生成卡片式 HTML 深度分析报告)。当用户要求尾盘选票、明日介入预测、强势池扫描、竞价校准、个股五段式分析(基本面/资金面/技术面)、生成个股分析报告时使用。内置数据源限流降级链、判读铁律与踩坑清单;资金规模与交易权限由 config.json 定义,不含任何预设个人参数。
-
taichuy Bundle Frontend Development实现或审查 1flowbase web/ 页面、交互、schema UI、样式与接口消费。按 DESIGN.md 和当前源码定位 owner;需求决策用 problem-framing,正式验收用 qa-evaluation。
-
adobe Bundle Content Driven Development 2Use this when making any AEM Edge Delivery Services (EDS, Franklin, Helix) code change — new blocks, block modifications, CSS styling, bug fixes, core functionality (scripts.js, styles, delayed.js), or any JavaScript/CSS work that needs validation. Covers the Content Driven Development process — identifying or creating real test content before writing code, designing an author-friendly content model, and validating against that content throughout development. Do not use for documentation-only changes or configuration changes that do not affect authoring.
142 -
adobe Bundle Workfront UI ExtensionUse when building or editing the React/Spectrum front-end SPA of a Workfront App Builder extension. Reach for this whenever the user is: registering or changing extension points in `ExtensionRegistration` — a Main Menu button, a left-panel (`secondaryNav`) item for a specific Workfront object type (Project, Task, Issue, Portfolio, Program), or a custom-form widget with specific height and width; adding a new route in `App.js` to match an extension point URL; reading the Workfront shared context to get the current user, `objCode`, `objID`, or `hostname`; calling a Runtime action from the SPA via `actionWebInvoke`; or debugging a widget or route that renders blank after being registered. Never call Workfront or Adobe APIs directly from the SPA — all API calls belong in a Runtime action (see `workfront-actions`).
142 -
syngnat Bundle Gonavi CLIOperate databases through the GoNavi headless CLI — the `gonavi` executable shipped in verified GitHub Release archives. Covers listing/adding/importing saved connections, running SQL queries against saved connections or ad-hoc connection files, exporting result sets to csv/json/md/html/xlsx, batch-executing SQL files with transaction control, exporting the SQL audit log, and launching the MCP server (stdio/http/remote-config). Use whenever the user mentions GoNavi, the gonavi CLI, running SQL from the terminal, exporting database query results, executing SQL files, managing saved database connections without the GUI, or the GoNavi MCP server — even if they don't name the tool explicitly.
-
vanillagreencom Bundle Docs WritingLoad to write, rewrite, or review repository markdown or documentation HTML: README, DEVELOPMENT, architecture docs, reference docs, SKILL.md and AGENTS.md.
-
vanillagreencom Bundle Docs Writing 2Load to write, rewrite, or review repository markdown or documentation HTML: README, DEVELOPMENT, architecture docs, reference docs, SKILL.md and AGENTS.md.
-
blogminhquy Bundle HTML Sang WebcakeChuyển trang HTML thành file .pke mở được trong trình dựng Webcake, giữ đúng màu, cỡ chữ, ảnh và bố cục của bản gốc.
-
theexperiencecompany Skill AuditRun technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
-
theexperiencecompany Bundle MotionBuild React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".
-
theexperiencecompany Skill Frontend TestingHow to test GAIA's frontend — three tiers (vitest units, Testing Library components, Playwright e2e), the red-green-throwaway pattern for pre-merge sweeps, and the gotchas that bit us during the 2026 react-doctor sweep.
-
theexperiencecompany Bundle Emilkowal AnimationsEmil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
-
theexperiencecompany Bundle React DoctorUse when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.
-
theexperiencecompany Skill Reading Stream RecordingsRead the frontend's on-disk stream recording to see what the browser actually received and rendered during a chat turn — the raw SSE frames in order plus each tool card's render outcome. Use when a card, bubble split, or approval didn't appear and Mongo/backend logs can't tell you why.
-
theexperiencecompany Skill Create ArtifactsCreate rich file artifacts (documents, code, reports, HTML pages) that appear as interactive cards in chat when placed in artifacts/.
-
getlago Skill Lago FormsHow to build a NEW form in lago-front — useAppForm + a colocated zod schema, the submit-first validation contract, and the stored value shape of every registered field component. TRIGGER — read BEFORE writing the code whenever the task adds a form, a form section or a single field, or writes a validation schema; whenever the diff mentions useAppForm, form.AppField, form.AppForm, form.SubmitButton, revalidateLogic, validationLogic, onDynamic, validationSchema.ts, zodCustoms, withForm, withFieldGroup, setErrorMap, setFieldMeta or scrollToFirstInputError; and whenever the report is a submit button stuck disabled with no visible error, a schema that never fires, an error showing before the first submit, or a raw "Invalid input" / untranslated message in a field.
-
getlago Skill Lago DialogsThe three sanctioned dialog hooks in lago-front — useFormDialog, useCentralizedDialog and useFormDialogOpeningDialog, all NiceModal-backed — the removed forwardRef + Dialog pattern that must not come back, and the jest mock every dialog test needs. TRIGGER — read BEFORE writing the code whenever the task adds, edits or tests a dialog, modal, confirmation, warning or destructive prompt; whenever the diff mentions useFormDialog, useCentralizedDialog, useFormDialogOpeningDialog, WarningDialog, DialogRef or src/core/overlays/registeredDialogs.ts; and whenever a test renders a component that opens one, since jest cannot parse import.meta without the mock.
-
getlago Skill Lago DrawersThe only sanctioned drawer pattern in lago-front — a use<Feature>Drawer hook built on useFormDrawer / useDrawer returning { openDrawer } — plus the two legacy generations that must never be copied and the jest mock every drawer test needs. TRIGGER — read BEFORE writing the code whenever the task creates, edits, opens or tests a drawer, side panel or slide-over; whenever the diff mentions useFormDrawer, useDrawer, DrawerRef, ~/components/designSystem/Drawer, ~/components/drawers/useDrawer, openDrawer, closeDrawer, shouldPromptOnClose or closeOnSubmitSuccess; and whenever a test renders a component that opens one, since jest cannot parse import.meta without the mock.
-
pdben-auto Bundle Sellersprite Bi Market Research 2使用卖家精灵(SellerSprite)从种子关键词与核心竞品 ASIN 扩展关键词和相似产品,按标题、Listing 属性、类目与人工规则筛选目标 ASIN,再结合标准/详细导出制作可追溯、父 ASIN 去重、年度/YTD/同比、类目/属性、品牌销售额竞争和排名动量的 Amazon 交互式 HTML BI。适用于“关键词+竞品找相似品”“筛选目标 ASIN”“Listing 属性筛选”“卖家精灵品类 BI”“父体去重”“品牌竞争”等请求;不适用于 Listing 文案、个人购物推荐、无市场研究范围的简单图表,或把关键词结果直接当完整类目 TAM。
-
vannifr Skill Cross Browser Render CheckSystematic multi-engine (Chromium/Firefox/WebKit) rendering comparison for a website — catches browser-specific CSS/layout/JS bugs that a single-engine review misses. Works on any website, any stack. Trigger on "check cross-browser", "does this work in Safari/Firefox", "browser compatibility review", or before shipping a CSS/JS change that uses a newer or engine-specific feature. NOT for viewport/breakpoint layout review (use responsive-visual-review — same engine, different widths, a different axis entirely), NOT for functional/interaction E2E testing across browsers (use playwright-testing — this skill is visual/rendering-only, no click-throughs), NOT for designing a polyfill/feature-detection fix (flag the gap with a suspected cause, don't architect the remedy).
-
thunder-id Skill ConsoleNavigate and interact with the ThunderID Console UI. Use when exploring the ThunderID admin console, testing UI changes, creating users/applications/roles, or debugging the frontend.
-
thunder-id Skill Sdk DevelopmentThe contract for every ThunderID SDK and the workflow for changing one. Use whenever work touches a ThunderID client SDK or integration package in javascript-sdks, ios-sdks, android-sdks, or flutter-sdks. Covers writing a new SDK for a language or framework, adding or changing an operation, configuration key, error, or UI component, porting a capability between SDKs, writing and running SDK tests, validating a change against the specification and threat model, raising the cross-SDK pull requests, reviewing an SDK change, and editing the SDK development specification itself.
-
getlago Bundle Migrate Formik To TanstackMigrate a React form from Formik to TanStack Form following project conventions. Use this skill when the user wants to migrate a form component from Formik to TanStack Form.
-
getlago Skill Create Rich Text Editor Custom NodeCreate a new custom TipTap node for the Rich Text Editor that works in edit mode, on-screen preview, and PDF download. Generates the schema, editor extension, NodeView component, CSS styles, tests, and registers the extension.
-
tari-project Bundle Tari ManifestThis skill should be used when the user asks to "write a manifest", "create a transaction manifest", "submit a transaction", "call a component method", "call a template function", "interact with a Tari component", "write Ootle manifest", "authenticate with wallet daemon", or needs to construct Tari Ootle transaction manifests for submitting transactions on the Tari network.
-
pondsi Bundle Modelselector OpenclawUse when the OpenClaw Control UI chat model picker is one long flat provider-grouped list and picking a model is slow, when you have many providers each with many models, when the user wants a two-column provider/model picker (left = provider navigation, right = only that provider's models), when the per-chat account row (e.g. deepseek:default) should be hidden, or when a previously installed picker enhancement disappeared after an upgrade. Installs, repairs, verifies or uninstalls a browser-side enhancement injected into the Control UI's index.html.
-
jakeselby Bundle Design LoopRaise the visual quality of something that already renders — lock a visual target, then loop build → screenshot → independent scored critique → fix, against rubrics with hard accessibility, design-token, runtime and asset-licensing gates. Use when asked to make a UI, page, HTML doc, dashboard, game scene or 3D asset look dramatically better, more polished or more professional; to improve the visual design, look, styling or visual quality of a surface; or to iterate toward a reference, mockup or screenshot. Also use proactively after building or substantially changing a user-facing surface, before calling the visual work done. Not for deciding what screens exist or how flows behave — that is UX specification, handled elsewhere.
-
getlago Bundle Loop RunOrchestrator of the loop pipeline for lago-front: sweep → spec → build ↔ review → ship (commit, PR, Linear, CI gate, Slack #frontend). Creates a dedicated worktree by default, or runs in the current checkout with `--in-place` (automatic inside a Conductor workspace). Takes a Linear ticket URL and optionally Notion spec URLs; `--confirm-spec` pauses once after the spec. Use when user says "/loop-run <linear-url> [notion-urls...] [--in-place] [--confirm-spec]" or asks to run the full loop on a ticket.
-
tifandotme Skill Building Tanstack Form CompositionBuilds portable TanStack Form composition for React apps. Use when adding, migrating, or reviewing composed form hooks, reusable field components, form options, validation, submit buttons, or form sections.
-
priyothana Skill Frontend UI EngineeringBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
-
babamba2 Bundle Sc4sap Program To SpecReverse-engineer an ABAP program into a Functional/Technical Specification artifact (Markdown, HTML, and/or Excel — any combination). Socratic scope narrowing from "everything" to "only what the user needs".
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 analyze-and-plan, ue-component-model, cmd-k-command-palette. 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.