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.
-
dobroslavradosavljevic Bundle Turborepo 2Build, review, debug, configure, migrate, teach, or plan Turborepo monorepos with current docs and a full usage guide. Use for turbo, create-turbo, turbo.json, turbo.jsonc, tasks dependsOn ^build, inputs outputs, envMode strict, remote cache TURBO_TOKEN TURBO_TEAM, filters --affected, turbo watch, turbo prune Docker, package configurations, boundaries, generators, bun/pnpm workspaces, Next.js Vite Vitest Playwright oxlint oxfmt task graphs, and CI.
-
dobroslavradosavljevic Bundle Playwright 2Build, review, debug, configure, migrate, or plan Playwright browser automation and E2E tests with current docs. Use for @playwright/test, playwright, playwright.config, locators, getByRole, assertions, fixtures, Page Object Model, storageState auth, network mocking, HAR, traces, UI Mode, codegen, CI sharding, Docker, APIRequestContext, experimental component testing, accessibility, screenshots, visual comparisons, and Playwright MCP or CLI agent tooling.
-
dobroslavradosavljevic Bundle Schema Dts 2Build, review, debug, migrate, or plan Schema.org JSON-LD with Google schema-dts TypeScript types. Use for schema-dts, schema-dts-gen, schema-dts-lib, WithContext, Graph, IdReference, MergeLeafTypes, ProductLeaf and other *Leaf types, WithActionConstraints, JSON-LD script injection, structured data, Organization, WebSite, Product, Offer, FAQPage, Article, BreadcrumbList, react-schemaorg, and Schema.org v30 typing.
-
dobroslavradosavljevic Bundle Compound UI 2Build, review, or refactor React UI components into shadcn-style compound components. Use when creating composable component APIs, splitting prop-heavy components into named parts, wrapping Radix/Base UI primitives, adding asChild/Slot behavior, designing data-slot styling hooks, or enforcing accessible source-owned component primitives.
-
dobroslavradosavljevic Bundle React Email 2Build, review, debug, render, migrate, or plan HTML email templates with React Email (react-email v6+). Use for react-email, create-email, @react-email/editor, @react-email/render, @react-email/ui, email templates, Tailwind email styling, pixelBasedPreset, render/toPlainText, PreviewProps, email CLI (email dev/export/build), transactional emails, newsletters, Resend/Nodemailer/SendGrid/Mailgun/Postmark/SES integrations, and upgrades from @react-email/components.
-
dobroslavradosavljevic Bundle Legend State 2Build, review, debug, migrate, or plan Legend-State v3 applications with current docs. Use for @legendapp/state v3 beta, observable, useValue, observer, Memo, $React, useObservable, computed or linked observables, observe, when, batch, fine-grained React rendering, React Native, local persistence, syncObservable, synced, syncedCrud, syncedFetch, syncedQuery, Supabase, Firebase, Keel, offline-first sync, transforms, syncState, testing, performance, and v2-to-v3 migrations.
-
dobroslavradosavljevic Bundle Mantine Hooks 2Build, review, debug, migrate, or plan React code with @mantine/hooks only (standalone React hooks package). Use for useDisclosure, useToggle, useListState, useLocalStorage, useSessionStorage, useHotkeys, getHotkeyHandler, useClickOutside, useDebouncedValue, useDebouncedState, useDebouncedCallback, useThrottledValue, useMediaQuery, useColorScheme, useReducedMotion, useMergedRef, useMove, useDrag, useMask, useCollapse, useHorizontalCollapse, useRovingIndex, useSplitter, useFloatingWindow, useUncontrolled, useFocusTrap, useIntersection, useResizeObserver, useFetch, clamp, randomId, and Mantine 8→9 hooks migrations. Do not use for @mantine/core components, @mantine/form, themes, or other Mantine packages.
-
dobroslavradosavljevic Bundle Tanstack Form 2Build, review, debug, migrate, or plan TanStack Form v1 React forms with current docs. Use for @tanstack/react-form, @tanstack/form-core, useForm, form.Field, createFormHook, createFormHookContexts, withForm, withFieldGroup, formOptions, form.Subscribe, useSelector, useStore, validators, Standard Schema validation, Zod, Valibot, ArkType, Effect Schema, async validation, dynamic validation, array fields, FormGroup, linked fields, listeners, SSR, TanStack Start, Next.js, Remix, devtools, UI libraries, accessibility, and production form composition.
-
dobroslavradosavljevic Bundle Tanstack Query 2Build, review, debug, migrate, or plan TanStack Query v5 React server-state code with current docs. Use for @tanstack/react-query, QueryClient, QueryClientProvider, useQuery, useMutation, useInfiniteQuery, useQueries, queryOptions, mutationOptions, query keys, cache defaults, staleTime, gcTime, invalidation, optimistic updates, SSR, hydration, prefetching, router integration, suspense, persistence, devtools, ESLint rules, testing, TypeScript, and v4-to-v5 migrations.
-
dobroslavradosavljevic Bundle Tanstack Start 2Build, review, debug, configure, migrate, or plan TanStack Start React applications with current docs. Use for TanStack Start, @tanstack/react-start, file-based routing, route colocation (-components/-hooks/-lib beside routes), feature modules (src/modules reusable code), pathless layouts, TanStack Router integration, Vite/Rsbuild setup, SSR, streaming, server functions, server routes, middleware, loaders, TanStack Query integration, environment variables, sessions/auth, deployment, hosting, and Next.js migrations.
-
dobroslavradosavljevic Bundle Tanstack Store 2Build, review, debug, migrate, or plan TanStack Store state management with current docs. Use for @tanstack/store, @tanstack/react-store, createStore, Store, ReadonlyStore, setState, subscribe, batch, flush, shallow, derived stores, createAtom, createAsyncAtom, useSelector, useStore migrations, useAtom, useCreateStore, useCreateAtom, createStoreContext, selector compare functions, immutable updates, actions factories, SSR-safe store lifetime, framework adapters, testing, and production state patterns.
-
dobroslavradosavljevic Bundle Tanstack Table 2Build, review, debug, migrate, or plan TanStack Table v9 React tables with current docs. Use for @tanstack/react-table, @tanstack/table-core, useTable, tableFeatures, stockFeatures, createTableHook, createColumnHelper, ColumnDef, table state, external atoms, sorting, filtering, faceting, grouping, aggregation, expanding, pagination, row selection, cell selection, cell spanning, row and column pinning, column visibility, column ordering, column sizing, column resizing, virtualization, devtools, worker row models, and v8-to-v9 migrations.
-
dobroslavradosavljevic Bundle Design Engineer 2Improves UI/UX like a design engineer: diagnose friction, propose multiple solutions, pick the best with rationale, then implement polished interfaces. Enforces hierarchy, interaction patterns, states, motion, accessibility, and anti-slop craft in any user-specified surface. Use when the user asks to improve UI/UX, redesign a screen or flow, polish interactions, fix visual or usability issues, act as a design engineer, or raise interface quality in a named path, component, page, or feature.
-
dobroslavradosavljevic Bundle Tanstack Charts 2Build, review, debug, migrate, or plan TanStack Charts pre-alpha charting with current docs. Use for @tanstack/charts, @tanstack/charts/react, @tanstack/charts/react-native, @tanstack/charts/scales/*, defineChart, svgAnimation, motion(), tooltip/portal, layout stack/group, groupBy/binX/rollingWindow/rank/normalize/fold/waterfall/mosaic, lineY, areaY, barY, boxY, violinY, waffleY, ridgelineY, differenceY, linearRegressionY, rect, cell, dot, hexagon, crosshair, whenFocused, decorative, facet, polar, geoShape, treemap, sunburst, sankeyDiagram, hexbin, contour, brushX, zoomX, keyedSelection, Chart, Canvas, grammar-of-graphics marks/channels/scales, and migrations from Recharts, Chart.js, ECharts, Observable Plot, archived react-charts, @tanstack/react-charts, @tanstack/charts-scales, or TanStack Charts 0.0.x–0.13.x.
-
dobroslavradosavljevic Bundle Tanstack Router 2Build, review, debug, configure, migrate, or plan TanStack Router React applications with current docs. Use for @tanstack/react-router, file-based routes, code-based routes, route trees, generated routeTree.gen files, routeFileIgnorePrefix colocation (-components/-hooks/-lib), pathless layouts, typed navigation, Link/useNavigate/redirect, params, validateSearch, loaderDeps, loaders, beforeLoad, route context, auth guards, notFound, error boundaries, pending/deferred data, preloading, TanStack Query integration, SSR, testing, and production routing rewrites.
-
dobroslavradosavljevic Bundle React Boundaries 2Enforces React component ownership boundaries—colocate state, queries, and mutations with consuming leaves; avoid prop drilling and parent data hubs; structure trees for render isolation and composability. Includes TanStack Query, Router, Start, Form, and Store patterns. Use when designing or reviewing component architecture, refactoring prop-heavy trees, fixing unnecessary re-renders from lifted state, deciding where API or query logic should live, or when the user says react-boundaries, ownership boundaries, push state down, or stop prop drilling.
-
dobroslavradosavljevic Bundle Tanstack Hotkeys 2Build, review, debug, migrate, or plan TanStack Hotkeys keyboard shortcut systems with current docs. Use for @tanstack/react-hotkeys, @tanstack/hotkeys, useHotkey, useHotkeys, HotkeysProvider, useHotkeySequence, useHotkeySequences, useHotkeyRecorder, useHotkeySequenceRecorder, useHeldKeys, useHeldKeyCodes, useKeyHold, formatForDisplay, shortcut palettes, custom shortcut settings, key sequences, scoped hotkeys, input handling, preventDefault, stopPropagation, conflictBehavior, devtools, accessibility, SSR-safe React usage, and cross-platform Mod/Ctrl/Cmd shortcuts.
-
dobroslavradosavljevic Bundle Tailwind Variants 2Build, review, debug, migrate, or plan Tailwind Variants class systems with current docs. Use for tailwind-variants, tv, createTV, cn, cnMerge, cx, VariantProps, slots, compoundVariants, compoundSlots, defaultVariants, extend composition, twMergeConfig, /lite build, class overrides, TypeScript props, Tailwind CSS v4 pairing, and upgrades from v0/v1/v2/v3.x.
-
dobroslavradosavljevic Bundle Vitest Architecture 2Enforce portable Vitest house style in apps/packages: per-workspace unit + integration projects, tests/ layout, scripts, passWithNoTests, fixtures/setup, and unit vs integration boundaries. Use when scaffolding tests, reviewing test layout, adding Vitest to a package, or when the user asks for vitest-architecture. Optional with-* overlays for testcontainers, Effect testing, Elysia handle, React happy-dom, typecheck projects, Storybook browser, live harnesses, and coverage. Not a Vitest API docs skill.
-
stacksjs Skill Stacks UI 2Use when working with UI in a Stacks application - components, composables, reactivity (refs/watch/computed), Craft native components, Crosswind CSS, Crosswind utility framework, accessibility, or the STX templating engine. Covers @stacksjs/ui, @stacksjs/stx, and related UI tooling.
-
stacksjs Bundle Stacks Browse 2Use for headless browser QA on Stacks applications - navigation, screenshots, responsive testing, console/network monitoring, and accessibility snapshots. Dependency-free, driving a system browser over the Chrome DevTools Protocol using only Bun (no Playwright/Puppeteer). Invoke with /stacks-browse.
-
tfcbot Bundle Find App Ugc Outliers 2Discover viral TikTok and Instagram creator UGC for any mobile or web app, verify each candidate against the creator's profile bio (where affiliate CTAs hide) plus the video itself, then synthesize the shared pattern across confirmed top performers and propose a concrete format the user can film. Takes an app name (e.g. "Her75", "Cluely", "Cal AI"), runs keyword fan-out via Scrape Creators, ranks by engagement rate, watches the top 10 with VidJutsu using the bio as decisive context, and renders a sortable HTML report with inline video playback. Solves the gap that Kalodata / Fastmoss leave for non-TikTok-Shop apps — there is no closed-loop attribution for App Store / Play Store / web apps, so creator UGC for apps is currently uncatalogued. Bio-aware verification handles the case (Her75-style) where affiliate creators park CTAs in the bio and never mention the brand in any individual post.
-
serennity007 Bundle Deep Analysis 2个股深度分析的核心工作流。当用户要求"深度分析 / 全面分析 / 帮我看看 / 值不值得买 / DCF / 机构建模 / 首次覆盖 / 投委会备忘录"等涉及个股研究的请求时触发。覆盖 A 股、港股、美股,产出 22 维数据 + 66 位大佬量化评审 + 6 种机构级估值建模 (DCF/Comps/LBO/3-Stmt/Merger) + 7 种研究产物 (首次覆盖/财报解读/催化剂日历/投资逻辑追踪/晨报/量化筛选/行业综述) + 6 种决策方法 (IC Memo/DD/Porter/单位经济/VCP/再平衡) + 杀猪盘检测,最终生成 Bloomberg 风格 HTML 报告 + 社交分享战报。关键词:股票、个股、深度分析、估值、DCF、comps、首次覆盖、IC memo、杀猪盘、龙虎榜、akshare。
-
serennity007 Skill Full Report 2Run InvestSkill analysis modules on a stock at configurable depth and compile a professional HTML report saved to the output/ directory
-
serennity007 Skill Chart Master 2Generate professional financial charts in Mermaid, ASCII, or HTML/Chart.js — MA lines, histograms, candlestick, volume, RSI/MACD, and more for markdown reports
-
serennity007 Skill Research Bundle 2Deprecated — use full-report instead. Chained multiple analysis skills into a unified investment thesis; superseded by full-report's configurable --depth and HTML output.
-
serennity007 Skill Report Generator 2Generate professional HTML/PDF investment reports with interactive visualizations
-
alexclowe Skill Accessibility Audit 2WCAG 2.2 accessibility expertise — auto-activates on designer tasks to flag violations before handoff
-
stacksjs Skill Stacks Crosswind 2Use when styling components in a Stacks application - utility-first CSS classes, theming, responsive design, variants, custom rules, or CSS generation. Crosswind is the CSS utility engine powering Stacks' Crosswind config.
-
stacksjs Bundle Stacks Prototype 2Use when a design question needs a runnable answer rather than an argument - does this state model hold up, what should this page look like, is this API shape right. Builds throwaway code that answers one question, either a single shareable HTML demo or several stx view variants.
-
2233admin Bundle Webcrawler Deep Crawl 2Deep-crawl any website from start URLs, return per-page LLM-ready text/markdown/HTML plus metadata (title, description, author, language, canonical URL, OG) and in-scope outbound links. Use when user mentions deep crawl website, recursive crawl, crawl a whole site, scrape entire website, scrape docs site, scrape documentation, scrape knowledge base, scrape blog, build RAG corpus, build vector database from website, knowledge base for chatbot, GPT knowledge files, llms.txt, sitemap crawl, BFS crawl, scrape with depth or page limit, include exclude URL globs, remove boilerplate, strip navigation header footer, website to markdown, website to text, multi-page extraction, bulk page scraping, clean markdown from URL, docs site to markdown corpus, site to clean corpus. Also applies to building RAG pipelines, indexing a customer site, syncing docs into a vector store, generating training corpora from any docs hub, or expanding a single start URL into a clean corpus of every reachable in-scope page.
-
2233admin Bundle Web Search Scraper API Skill 2This skill helps users automatically extract complete Markdown content from any website via the BrowserAct Web Search Scraper API. The Agent should proactively apply this skill when users express needs like extract complete markdown from a specific website, scrape the content of an article link, get the text from a target url, convert a webpage to markdown format, fetch the main content of a blog post, extract data from a given web page, parse the html of a website into markdown, download the readable text from a news article, obtain the content of a tutorial page, extract all the markdown text from any http or https url, scrape documentation from a web link, or grab the text of a single webpage.
-
francostino Bundle Expo UI 2Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android rendered from React in an Expo or React Native app.
63 -
francostino Skill UI A11Y 2Audit a component or page for accessibility issues and fix them
63 -
francostino Skill Wiki QA 2Answer repository questions grounded entirely in source code evidence. Use when user asks a question about the codebase, user wants to understand a specific file, function, or component, or user asks "how does X work" or "where is Y defined".
63 -
njs14 Skill Narrow React Prop Types 2Narrow React component prop types to the states used by live application call sites, then adapt stories, tests, and mocks to the stricter contract.
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 turborepo, playwright, schema-dts. 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.