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.
-
didixuxu Skill Data VisualizationCreate effective data visualizations with Python (matplotlib, seaborn, plotly). Use when building charts, choosing the right chart type for a dataset, creating publication-quality figures, or applying design principles like accessibility and color theory.
-
didixuxu Skill Competitive Landscape生成苹果简约风格的竞品分析 HTML 报告,含 Chart.js 数据可视化。使用波特五力、蓝海策略、竞争定位地图等分析框架。适用于竞品分析、市场定位、竞争优势评估。
-
eigenwise Bundle FrameworkQuick-reference mental model for the Tesseron TypeScript SDK — core abstractions (app, action, resource, handler, ActionContext, transport, session, gateway), canonical imports per consumer package (`@tesseron/web`, `/server`, `/react`, `/core`, `/mcp`), and the minimum-viable-app template. Load when the user is starting Tesseron work, wiring a first action or resource, deciding which consumer package to import, writing a handler for the first time, or orienting on how the pieces fit together. Triggers on code that imports from `@tesseron/*`, on calls to `tesseron.action(...)`, `tesseron.resource(...)`, `tesseron.connect(...)`, `useTesseronAction`, `useTesseronResource`, or `useTesseronConnection`, and on broad questions like "what is Tesseron", "how do actions work", "where do I start". For authoritative specs — exact wire format, error code tables, handshake and resume shapes, full protocol behaviour — prefer the `tesseron-docs` skill, which queries the live `@tesseron/docs-mcp` server. This skill is the ch
-
eigenwise Skill Update DocsUse this skill after any change to `gateway/**`, `docs-mcp/**`, or SDK source in a language repository source that shifts Tesseron's public surface - protocol messages, exported types, action/resource builder APIs, ActionContext methods, transports, gateway CLI flags, or React hooks - to sync `docs/src/content/docs/` so the Starlight site matches the code. Triggers on "update the docs", "sync docs", "docs are stale after this change", or when a session ends with public-surface edits unaccompanied by doc edits. Do NOT trigger for test-only, tooling-only, or internal refactors that leave the public surface identical.
-
eigenwise Skill Tesseron DocsAuthoritative Tesseron documentation lookup via the `@tesseron/docs-mcp` MCP server. Calls `search_docs` to find relevant pages and `read_doc` to fetch the full markdown body when the user asks precision questions about Tesseron protocol or SDK behaviour. Triggers on requests that need an exact spec, not an overview — wire format (JSON-RPC envelopes, `tesseron/hello`, `tesseron/welcome`, `tesseron/resume`, `actions/progress`, `actions/cancel`), transport framing, handshake and claim-code flow, session resume and resumeToken, lifecycle transitions, sampling contract, elicitation contract (`ctx.confirm`, `ctx.elicit`), progress + cancellation via `AbortSignal`, error codes (`TesseronErrorCode`, `SamplingNotAvailableError`, `ElicitationNotAvailableError`, `TimeoutError`, `CancelledError`, `ResumeFailedError`), capability negotiation, origin allowlist, multi-app namespacing, MCP gateway config, Standard Schema (Zod, Valibot, Typebox) integration, action-builder steps, resource read/subscribe, React hook semantics
-
eigenwise Skill Tesseron ExplorerMaps existing Tesseron TypeScript codebases — catalogs apps, actions, resources, context-method usage, transports, React hooks, and session-lifecycle wiring; traces how agent invocations flow through handlers into app state; returns a compact architecture summary with file:line references. Use PROACTIVELY when the user asks to "explore", "map", "understand", "analyze", "trace", or "explain how this works" in a project that imports from `@tesseron/core`, `@tesseron/web`, `@tesseron/server`, `@tesseron/react`, or `@tesseron/mcp`, or before extending a non-trivial Tesseron codebase. The caller should pass the scope (project root, package, or specific feature) in the invocation prompt.
-
eigenwise Skill Tesseron ReviewerReviews Tesseron TypeScript code for framework- and protocol-specific correctness — app manifest hygiene, action/resource builder invariants, ActionContext capability checks, handler async/signal forwarding, subscriber cleanup, session resume flow, React hook registration patterns, gateway origin-allowlist sanity — using confidence-based filtering. Use PROACTIVELY after any change to Tesseron code, before commit or PR, and whenever the user asks to review, audit, check, or validate code that imports from `@tesseron/core`, `@tesseron/web`, `@tesseron/server`, `@tesseron/react`, or `@tesseron/mcp`. Complements generic code review by focusing only on Tesseron-specific concerns. The caller should pass the scope (diff, file paths, or module) in the invocation prompt.
-
gokulkrishh Bundle Code ReviewReviews code for security (OWASP), performance, accessibility, and quality. Outputs findings by severity (Critical, Warning, Suggestion, Good) with a verdict. Use when reviewing code, diffs, or PRs.
-
gokulkrishh Skill No Use EffectEnforce the no-useEffect rule when writing or reviewing React code. ACTIVATE when writing React components, refactoring existing useEffect calls, reviewing PRs with useEffect, or when an agent adds useEffect "just in case." Provides the five replacement patterns and the useMountEffect escape hatch.
Audited -
gokulkrishh Skill Motion Base UIAnimating Base UI components with Motion for React. Use this skill when implementing animations on Base UI components (Menu, Dialog, Popover, Tooltip, Switch, etc.) with the Motion library. Triggers on: motion animation, base-ui animate, animate dropdown, animate dialog, animate popover, exit animation, spring animation, render prop animation, AnimatePresence base-ui.
-
helloggx Bundle Vue CreaterSuite of tools for scaffolding high-fidelity Vue 3 applications using Vite 8 and Tailwind 4. Supports design-driven workflows via DSL and Tokens. Ideal for rapid prototyping or production-ready frontend setups.
-
helloggx Skill Component CreaterAn autonomous workflow that converts a design file (via URL) into production-ready Shadcn-Vue components. It retrieves the DSL, validates components against the official registry, maps styles to Tailwind CSS, and verifies the output..
Audited -
ianlkl11234s Skill Service Coverage服務覆蓋分析(service coverage / 商業策略視角)— 「我的店要開哪」「誰被服務不到」「跟競爭者疊圖」這類問題的視覺化。技術實作完整內容在 [[accessibility-analysis]] skill。本 alias 為了商業 / 策略口吻觸發更順 — 當用戶說「服務覆蓋」「服務沙漠」「市場版圖」「競爭者疊圖」「品牌勢力範圍」「服務缺口」「補點策略」「擴點選址」「未來開店」時用這個。實作 SOP 完全相同 → 請直接讀 accessibility-analysis/SKILL.md。
-
ianlkl11234s Bundle Three 3d ComponentMini Taiwan Pulse 新增 Three.js × Mapbox 立體圖層的設計與接線手冊。當用戶說「新增 3D 圖層」「立體元件」「3D layer」「Three.js scene」「立體呈現」「3D 視覺化」「點與點的連結」「燈塔轉圈/光柱/巨蛋/光弧」或要從 `public/three-showcase.html`(68 元件案例庫)挑元件接到實際圖層時觸發。導引用戶從「想表達什麼語意」→ 對應元件類別 → Scene/CustomLayer 範本 → 必過 checklist(座標 / blending / dispose / 動態時間源 / 性能)→ 最後跑 tsc -b。
-
ianlkl11234s Bundle Accessibility Analysis設計、驗證或整合「到最近服務多遠、服務範圍、可達性沙漠」的空間分析;用於 POI、路網距離、等時圈或格網 coverage,而非單純點位展示。
-
inspirepan Bundle Image GenUse when the user asks to generate, edit, use reference images, or batch-create raster images with any gateway image model. Uses YOUTU_API_KEY and the bundled image-jobs CLI. Do not use for SVG, pure CSS/HTML graphics, or image analysis only.
-
iusztinpaul Bundle ScrapeScrape web content as clean markdown/HTML/JSON via the Bright Data CLI (`bdata scrape`). Use when the user wants to fetch a page, extract content from a list of URLs, or crawl paginated listings. Hands off to `data-feeds` for supported platforms (Amazon, LinkedIn, TikTok, Instagram, YouTube, Reddit, etc.) and to `search` when URLs must be discovered first. Requires the Bright Data CLI; proactively guides install + login if missing.
-
joet203 Skill DeployUse when deploying a site to Vercel. Runs the deploy, verifies the live URL actually serves new content (not cached), checks/disables SSO protection for public sites, and scans for duplicate HTML files that may need the same edits. Prevents the recurring friction of trusting "Deployment succeeded" messages that hide cache, auth-protection, or duplicate-file issues.
-
joet203 Skill VisualizeGenerate a rich, styled HTML page to visualize information instead of dumping text in the terminal. Use this whenever the response would be long, dense, or benefit from visual hierarchy — research results, comparisons, decision matrices, project status, learning guides, code explanations, API docs, recipe breakdowns, or any multi-section answer. If the user asks to 'visualize', 'show me', 'break down', 'compare', or the answer would exceed ~30 lines of terminal output, this skill makes it dramatically easier to read.
-
jtmthf Bundle Test WriterExpert JavaScript/TypeScript test engineer. MUST use this skill whenever the user asks you to write, add, fix, update, or improve tests — including unit tests, integration tests, component tests, E2E tests, interaction tests, and test coverage. Covers all major JS/TS test frameworks: Vitest, Jest, Node test runner, Playwright, React Testing Library, Vitest browser mode, and Storybook. Also use when users mention test strategy, flaky tests, test structure, mocking approach, testing a component, testing an API, testing a function, testing a hook, or adding test cases for edge cases and bug reproduction. Trigger on any mention of: "write tests", "add tests", "test this", "test coverage", "need tests", "test file", ".test.", ".spec.", "describe(", "it(", "test(", "expect(", "testing library", "playwright test", "vitest", "jest", "storybook play function", or when producing test files even if "test" isn't explicit (e.g., "verify this works", "make sure this doesn't break", "add coverage").
-
jtmthf Bundle Typescript Coding StyleApplies Jack Moore's personal TypeScript/TSX coding style — derived from his own pre-2025 open-source code and gists, not a generic style guide. Use this whenever writing, generating, refactoring, or reviewing TypeScript or TSX code: new functions, modules, types, React components, hooks, API handlers, utility libraries, or any code-generation task in a TS/TSX file. Trigger even when the user doesn't explicitly ask for "my style" — it should shape ordinary TypeScript work by default. Key signals: declarative composition over loops, object-param destructuring instead of positional args, plain factory functions over classes, discriminated unions and exhaustive `match` for state, errors modeled as values (Result/Option) instead of scattered try/catch, erasable syntax (no enums/access modifiers/decorators), fully spelled-out identifiers, and minimal comments. Always defers to a project's existing conventions first (lint config, prevailing patterns, framework requirements like NestJS decorators) — this skill fills
-
ibook000 Bundle Tweet Card GeneratorGiven a topic, auto-searches for info, generates a tweet + matching data-card PNG (HTML→screenshot, clean cream-background style, multi-layout + multi-chart).
-
miaodx Bundle Report Performance AnalysisUse this skill whenever the user asks whether a Roboclaws live-agent report run is faster, wants to compare Agent SDK/Codex/Claude cleanup reports, asks about model-call work, residual latency, speedup validity, or report performance under provider/network variance. The skill extracts sanitized JSON metrics first and answers only from generated metric/comparison artifacts, not from report.html scraping or raw prompts.
-
paldom Bundle Node LintSets up and tunes the linter and formatter for Node/TypeScript - Biome as the fast one-tool option or ESLint flat config plus Prettier, rule tuning, import sorting, unused-import removal, eslintrc-to-flat and ESLint-to-Biome migrations. Use when the user asks to set up or fix linting, formatting, a slow linter, ESLint, Biome or Prettier. Not for Next.js apps, type checking, or test setup.
-
paldom Bundle Node TestingBuilds unit and integration test infrastructure for Node/TS/React - Vitest or node:test with explicit config, Jest-to-Vitest migration, v8 coverage gates that fail CI, React Testing Library, mocking discipline, flaky-test triage. Use when the user asks to set up tests, add coverage thresholds, pick a test runner, or fix a flaky setup. Not for E2E browser suites, lint rules, or CI workflows.
-
paldom Bundle Nextjs QualityTunes Next.js App Router quality - next.config hardening, eslint-config-next flat config, React Strict Mode, typed routes, RSC and use-client boundary hygiene, measured bundle work, image/font optimization. Use when the user asks to production-harden a Next.js app, fix hydration or use-client errors, or shrink the bundle. Not for generic Node linting, tsconfig strictness, unit tests, or deploys.
-
abdul977 Bundle Website ClonerClone / mirror any live website so it renders fully offline, or as a starting point to rebuild it better. Use when the user wants to copy, clone, replicate, mirror, download, or recreate an existing website (a competitor site, a client's current site, a reference design, a template) OR wants to price/quote such a job for a client. Handles static sites, SPAs (React/Vue/Angular), Framer sites, and multi-page + WordPress sites (Elementor/Pagelayer/Divi); downloads HTML + all CSS/JS/images/fonts, localizes Google Fonts, makes paths offline-safe, wires up an offline server, and verifies every page renders with zero missing assets and correct styling offline. Also produces a client intake brief, a Naira pricing model (3 tiers + phased/batch delivery), a client-facing quote, and a project handover doc.
-
backnotprop Bundle Pe ReviewRead-only review of existing UI with verdicts. Use to critique a screen, site, or screenshot; review a diff, branch, or PR for interface quality; produce a prioritized audit with implementation plans for another agent; check code against the Web Interface Guidelines; stress-test a component in hostile states; review animation and motion craft; audit accessibility; or check an implementation against the approved design record. Triggers on review, critique, audit, UX review, design review, interface review, "review my PR", "check accessibility", "will this survive", "review the animations", "did we match the mock". Produces findings and verdicts only — never edits code.
-
backnotprop Bundle Pe VerifyProve that behavior works, with evidence. Use after a feature is built ("verify this", "create a verification for the toolbar") or to re-run the project's QA list before a release ("run the QA list", "release check"). Classifies each check as code, browser, or mixed; drives the product with Playwright, recording video and checkpoint screenshots; writes one report.json and renders it into a branded HTML report with a checkpoint video player. Triggers on verify, verification, "does it work", "prove it works", QA, QA list, release check, smoke test, regression check. Read-only toward product code — reports pass, fail, flag, skipped, or not-run; fixes go to pe-build, and judgment of design quality is pe-review.
-
eagerworks Bundle Mobile Store ReviewAudits a mobile app codebase — Expo/React Native (managed or bare) or native iOS/Android, standalone or inside a Turborepo/monorepo — and reports whether it would pass Apple App Review and Google Play review. Use this skill whenever the user: asks if their app will pass, fail, or get rejected by Apple or Google review; is preparing an App Store or Play Store submission; got a rejection email or resolution center message citing a guideline or policy; is filling out the App Privacy questionnaire or Play Data safety form; is auditing permissions, usage descriptions, a privacy manifest, or account-deletion flow; mentions App Review Guidelines, Play Developer Program Policies, TestFlight, `eas submit`, App Store Connect, or Play Console; or is doing a pre-submission or release-readiness check on a mobile app. Also use when the user says things like "will this get rejected?", "audit my app before I ship it", or "review my app for the stores" — even if they don't name a specific guideline.
-
morethanwords Bundle Graphify Windowsany input (code, docs, papers, images) → knowledge graph → clustered communities → HTML + JSON + audit report
-
ruinius Bundle Model JSON GeneratorExtracts the WACC, assumptions, and DCF projections from the markdown metadata file and converts them into a clean, structured JSON file for the frontend interactive viewer.
-
sean-michael Skill UI UXUse when conducting UI/UX audits, fixing visual or interaction design issues, or improving the look and feel of a web application. Triggers include: any request to audit a UI, improve styling, fix layout or spacing problems, enhance accessibility, add hover/focus states, or polish a frontend design. Also use when the user mentions Playwright alongside design, CSS, or visual quality.
-
sean-michael Bundle IOS DevUse for any mobile app task: building, modifying, testing, or deploying with Expo + React Native. Triggers: mobile app, iOS app, React Native, Expo, simulator, TestFlight, App Store, expo run, app.json. Core rule: never hand off without completing the validation loop. The human's only job is UI/UX feel.
-
sean-michael Skill Grafana DashboardsUse when building, editing, or reviewing Grafana dashboards. Triggers include: any request to create a dashboard, add panels, write PromQL or LogQL for visualization, design an observability layout, or improve an existing dashboard. Also use when the user mentions Grafana alongside Mimir, Prometheus, Loki, or any LGTM-stack component.
-
serhiikorniienko Bundle Report CardRender a finished BS report as a self-contained HTML page — score hero, filterable claims, readable on a phone, prints to a clean PDF. Use when the user wants to open, share, print, or show a report to someone who is not going to read a markdown table, or asks for "the HTML version", "something I can send", "a shareable page", or "make this readable".
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 framework, no-use-effect, node-testing. 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.