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.
-
greenpau Bundle Implementation ReportingImplement or review tested live console and artifact reports, including compatibility test HTML, summary JSON, JUnit XML, index HTML, escaping, redaction, deterministic ordering, duration quality, secure permissions, atomic publication, and manifest metadata. Use when changing pkg/report, report-mode behavior, or report projections consumed by humans and CI.
-
harryl6798 Skill Architecture AuditorSpecialized technical auditor for deep startup architecture teardowns and high-fidelity visual design specifications. Handles component-by-component forensics and maps technical moats for VC diligence.
-
zenml-io Skill Kitaru UI API DevelopmentAdd, reuse, or change a frontend-specific Kitaru REST response under /api/v1/ui and its OpenAPI contract in zenml-frontend-monorepo. Use when a dashboard screen needs a purpose-built data shape, not for ordinary reusable resources or UI bundle releases.
-
jsmastery-pro Bundle Clerk Nextjs PatternsAdvanced Next.js patterns - middleware, Server Actions, caching with Clerk.
-
jsmastery-pro Bundle Liveblocks Best PracticesUse this skill when building, debugging, or answering questions about Liveblocks. Liveblocks gives you the building blocks and infrastructure to enable people and AI to work together inside your app, powering realtime collaboration. Liveblocks features include collaboration, rooms, organizations, workspaces, comments, composer, threads, notifications, multiplayer, conflict resolution, realtime presence, avatar stacks, AI collaborators, AI agents, text editors, Tiptap, BlockNote, Lexical, React Flow, Chat SDK. Common components include AiChat, Thread, InboxNotification, Composer, Toolbar (for Lexical Tiptap), FloatingToolbar, FloatingComposer, FloatingThreads, AnchoredThreads. Common hooks include useThreads, useStorage, useMutation, useOthers, useInboxNotifications, useAiChats. Common issues are related to authentication (ID tokens vs access tokens), permissions, room limits, connection errors, user info.
-
luckycat133 Bundle Webapp TestingToolkit for interacting with and testing local web applications using Antigravity's built-in browser automation. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and recording browser sessions.
-
luckycat133 Skill Frontend Code ReviewTrigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
-
luckycat133 Bundle Chat Buddy Web Demo DevelopmentImplement, refactor, review, and test the cloud-first Chat Buddy Web Demo and its shared companion runtime. Use when working on the React Web client, hosted backend, social graph, human/AI friend requests, mixed groups, Moments, proactive messages, character memory, relationship continuity, actor identity linking, weather/calendar/search capabilities, cloud sync, or demo acceptance.
-
oriolrius Skill Next JSExpert guidance for Next.js framework including App Router, Server Components, routing, data fetching, API routes, middleware, and deployment. Use this when building Next.js applications, working with React Server Components, or implementing Next.js features.
-
oriolrius Skill VitestExpert guidance for Vitest testing framework including unit tests, integration tests, mocking, coverage, React Testing Library integration, and TypeScript testing. Use this when writing tests for Vite-based applications.
-
shelbeely Skill Remotion Best PracticesBest practices for Remotion - Video creation in React. Use when working with video animations, compositions, or React-based video content.
-
significant-gravitas Bundle Tanstack React ClientClient-side React and TanStack best-practice guidance. Use when Codex is building, reviewing, refactoring, or debugging browser-rendered React apps that use TanStack Query, Router, Form, Table, Virtual, AI, Store, Pacer, Hotkeys, or Devtools for API state, client routing, URL search state, forms, data grids, virtualization, AI chat/tool UI, execution timing, keyboard shortcuts, or TypeScript integration.
-
hqman Bundle Baoyu Url To MarkdownFetch any URL and convert to markdown using Chrome CDP. Saves the rendered HTML snapshot alongside the markdown, uses an upgraded Defuddle pipeline with better web-component handling and YouTube transcript extraction, and automatically falls back to the pre-Defuddle HTML-to-Markdown pipeline when needed. If local browser capture fails entirely, it can fall back to the hosted defuddle.md API. Supports two modes - auto-capture on page load, or wait for user signal (for pages requiring login). Use when user wants to save a webpage as markdown.
-
mumerrazzaq Bundle ChatkitBuild AI chat applications with OpenAI ChatKit SDK. Use when creating chat UIs, multi-session systems, integrating AI agents (OpenAI, Gemini, Claude, Ollama), adding tools with MCP, widgets, or building conversational apps. Covers server setup, Store implementations, frontend integration (@openai/chatkit-react), function tools, MCP servers, multi-user sessions, and streaming responses.
-
mumerrazzaq Bundle Better AuthIntegrate better-auth into Next.js 16 apps. Use for email/password, social OAuth, magic links, passkeys, 2FA setup. Covers database adapters (Prisma/Drizzle), session management, and route protection.
-
mumerrazzaq Bundle Frontend DesignCreate production-grade frontend interfaces with systematic UI/UX design. Use when building web components, pages, or applications. Covers design systems, component states, accessibility (WCAG 2.2), responsive design, and industry conventions. Evaluates existing UI against best practices. Forces design thinking before implementation. Generates distinctive code avoiding generic AI aesthetics while following UX principles.
-
alex-rachel Bundle HTML To UguiHTML 原型转 Unity UGUI 智能 Prefab 生成管线。通过 AI 生成符合 UI-DSL 的 HTML,用 Playwright/浏览器烘焙 JSON v2 坐标、图片和适配意图,再导入 Unity 由 HtmlToUGUIBaker 生成可维护、多终端适配的 UGUI Prefab。触发场景:(1) 需要从自然语言生成 Unity UGUI 界面 (2) 需要从 HTML 原型烘焙 UGUI (3) UI 中包含图片并希望一键导入/绑定 Sprite (4) 需要 PC/mobile/pad 多终端适配 Prefab。
-
zerx-lab Skill Gpui StylingStyling GPUI elements with Tailwind-like utility methods. Use when applying styles, layouts, colors, spacing, or creating responsive designs.
-
zerx-lab Skill Gpui PatternsCommon UI patterns and advanced techniques for GPUI applications. Use when implementing modals, lists, forms, state sharing, or complex component compositions.
-
iusztinpaul Bundle Developing With Streamlit**[REQUIRED]** Use for ALL Streamlit tasks: creating, editing, debugging, beautifying, styling, theming, optimizing, or deploying Streamlit applications. Also required for building custom components (inline or packaged), using st.components.v2, or any HTML/JS/CSS component work. Triggers: streamlit, st., dashboard, app.py, beautify, style, CSS, color, background, theme, button, widget styling, custom component, st.components, packaged component, pyproject.toml, asset_dir, CCv2, HTML/JS component.
-
iusztinpaul Skill Creating Streamlit ThemesCreating and customizing Streamlit themes. Use when changing app colors, fonts, or appearance, or aligning apps to brand guidelines. Covers config.toml configuration, design principles, and CSS avoidance.
Audited -
shuaimxu Bundle Shaka Design SystemShaka 内容产出的共享设计系统(主题/字体/组件规则的单一真相源)。**本 skill 不主动触发**,仅作为设计规则库供其他内容生成 skill(公众号、PPT、小红书、邮件等)在 HTML 生成时读取引用。灵感来源:op7418 的 guizang-ppt-skill。
-
shuaimxu Bundle AI Tech Wechat Writer微信公众号文章排版与发布技能。将用户提供的内容转换为公众号可发布的美化 HTML,采用 shaka-design-system 的主题系统 + 5 段式固定结构(今日AI头条→行业要闻→产品动态→观点短评→明日预告)。触发条件:用户提到「公众号」「微信文章」「写一篇文章」「排版」「生成HTML」「发到公众号」「美化日报」「生成公众号」「写公众号」「发公众号」「微信推送」「推文」「文章排版」等任何与微信公众号内容创作或发布相关的请求。关键规则:只要意图是产出公众号文章,无论措辞如何都必须触发此技能,不输出纯文本或裸 Markdown。本技能只负责排版和发布,不主动抓取新闻。
-
skillmedev Skill Error HandlingDesigns typed, observable, recoverable error handling - an explicit taxonomy of retryable vs terminal failures, Result types at boundaries, single-point logging, and retry policies with real backoff numbers. Use when someone asks "should I retry this error", "how do I structure error types", "why are my logs full of duplicate stack traces", "where do I put the try/catch", or is designing failure paths for an API, job, or client. Do NOT use for building the circuit breaker component itself - use circuit-breaker-builder instead; do NOT use for handling 429s against third-party APIs - use rate-limit-handler instead; do NOT use for writing user-facing error copy - use error-message-writer instead.
-
sylad Bundle Update Rtk StatsUse when the user wants to refresh the RTK savings stats displayed on the claude-code-codex homepage. Triggers on "/update-rtk-stats", "refresh rtk stats", "maj stats rtk", or after a long session where rtk usage might have meaningfully changed the numbers. Reads `rtk gain --format json`, writes to frontend/src/data/rtk-stats.json, and proposes a commit.
-
windcleaverdev Bundle DiagnosticsRun the full diagnostic battery on a fitted regression model — assumption tests (linearity, homoscedasticity, normality of residuals, independence, multicollinearity), influence analysis (leverage, Cook's distance, DFFITS), and bias/variance assessment via cross-validation. Produces a structured DiagnosticsReport with status flags and ranked remediation recommendations, plus a standalone HTML report. Use this skill whenever a regression has been fitted and the user wants to know if they can trust it, asks "are the assumptions met?", "is this model overfit?", "is this overfitting or underfitting?", or wants to identify influential outliers. Pair with the linear-regression or regularized-regression skills.
-
windcleaverdev Bundle Pre AnalysisAudit tabular data before fitting any regression — target distribution and skewness, feature types and missingness, multicollinearity (pairwise correlation + VIF), suspected nonlinearity, univariate outliers, and concrete modeling recommendations (which transforms to apply, which features to drop or combine, which estimator family to use). Produces a structured PreAnalysisReport and a standalone HTML report. Use this skill whenever the user is about to fit a model and hasn't done EDA yet, asks "what should I do with this data?", "should I transform anything?", "is this data ready to model?", or hands over a CSV with a target in mind but no clear modeling plan. Run this BEFORE linear-regression or logistic-regression to avoid refit cycles.
-
windcleaverdev Bundle Linear RegressionFit a linear regression (OLS) on tabular data and produce a rigorous report — coefficient table with confidence intervals, standardized betas, plain-English interpretation of each coefficient (transform-aware), fit statistics, and a standalone HTML report. Use this skill whenever the user wants to model a continuous outcome from one or more predictors, asks to "fit a regression" or "run OLS" or "model Y from X", or hands over tabular data with a continuous target. Outputs are both a structured JSON (LinearRegressionReport) and a self-contained HTML deliverable. Pair this skill with the diagnostics skill to check assumptions and identify influential observations.
-
addfox Bundle Addfox TestingTest Addfox extensions with Rstest for unit/component tests and Playwright for end-to-end extension loading.
-
addfox Bundle Convert Web Pages To Browser ExtensionsConvert any frontend webpage into a browser extension entry page with an HTML entry. Supports popup, options, sidepanel, devtools, newtab, bookmarks override, history override, and custom entries. Use when the user asks to migrate or adapt an existing web page into extension UI.
-
haibaraaiaptx Bundle Write PluginWrite custom JS plugins for the aptx-ft CLI to add commands, generate code, or analyze OpenAPI specs. Use when: (1) writing or loading a plugin file (.js/.ts), (2) using --plugin/-p CLI flag, (3) creating custom CLI subcommands, (4) accessing parsed OpenAPI data via ctx.getIr/PluginContext/GeneratorInput, (5) building custom code generators (e.g. Axios clients), (6) producing reports from OpenAPI specs, (7) questions about PluginDescriptor/CommandDescriptor/OptionDescriptor. Do NOT use for standard generation (models, react-query, vue-query, barrel files) — use generate-artifacts or generate-models instead.
-
haibaraaiaptx Bundle Generate ArtifactsGenerate frontend artifacts from OpenAPI via aptx-ft, including models and request clients. Use when user wants: (1) to generate API code from OpenAPI/Swagger, (2) React Query hooks from API spec, (3) Vue Query composables from API spec, (4) function-based API clients, (5) a standard flow for frontend projects without framework-specific business adaptation, (6) track generated files with manifest, (7) preview changes before generation, or (8) update barrel files automatically.
-
joaomonteiro100 Bundle Inclusive DesignReviews products, forms, and copy through an inclusive, equitable lens — surfacing who a design excludes and how to widen it — and rewrites language to be more inclusive ("copy that cares"). Use whenever the user wants a design or any writing made more inclusive, equitable, or welcoming; is designing names/identity/gender/pronoun fields or sign-up forms; worries about excluding, misrepresenting, or outing users; or wants copy reviewed for gendered, racialized, ableist, or otherwise non-inclusive language. Reach for it on identity, representation, and inclusive-language questions even when "inclusive design" isn't named. It reasons from patterns (catching "congressman" from the same rule as "fireman") and works in ANY language, not just English. NOT for disability/assistive-tech accessibility (screen readers, keyboard, contrast, WCAG) — that's the accessibility-review skill. Context-aware, centered on user safety, not blanket word-banning.
-
joaomonteiro100 Bundle Accessibility ReviewAudits a digital product against recognized accessibility standards — WCAG (the W3C Web Content Accessibility Guidelines) and IBM's accessibility requirements — and produces a prioritized findings report mapping each issue to the specific success criterion it fails, with severity and a concrete fix. Use this whenever the user wants an accessibility review, a11y audit, WCAG check, Section 508 / EN 301 549 conformance pass, or wants to know whether a screen, component, flow, PDF, or document is accessible; wants to fix contrast, keyboard, screen-reader, focus, alt-text, form-label, or ARIA problems; or asks which WCAG criterion something violates. Reach for it even when "accessibility" isn't named — any request to make a UI usable for people with disabilities, or to meet a legal accessibility requirement, qualifies.
-
kaguara Bundle Localization And Literacy UXUse when building or reviewing any interface that will be translated, or used by people with limited literacy or limited prior exposure to software. Covers text expansion and flexible layout, ICU message formatting and plurals, locale-aware numbers and dates, right-to-left support, icon and label pairing, name and address and phone input, language selection, and error copy. Invoke on new UI, component libraries, forms, i18n setup, and copy review.
-
kayforkind Bundle Reimagine ItContent-Derived Design — reads existing HTML and writes a stronger standalone page from headings, facts, names, dates, numbers, links, emails, and colors already in that file. CLI: npx reimagine-it --auto -i page.html -o out.html; also variations, lock, and audit. Use when the user says /reimagine-it, "reimagine it", "reinvent this", "redesign this page", "make an infographic", wants a content-aware redesign or a visual leap instead of a mood board. All 17 tokens: webpage, infographic, svg, 3js, simulation, artistic, cinematic, dashboard, photography, landing, editorial, gradient, showcase, motion, glass, lookbook, particles — plus leftover words as a brief. Also /reimagine-it audit for quality checks. The agent runs the CLI; it does not hand-author the page. Installed via npx skills add Kayforkind/reimagine-it or plugin marketplace. Not /better. Not a mood board. Does not ingest PDF, PPTX, or DOCX.
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 ai-tech-wechat-writer, Error Handling, update-rtk-stats. 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.