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.
-
stellar Bundle DappStellar dApp / frontend development. Covers the JavaScript stellar-sdk (browser + Node.js), Freighter wallet, Stellar Wallets Kit (multi-wallet), Wallet Standard, smart accounts with passkeys, transaction building / signing / submission, smart contract invocation from the client, simulation, and error handling. Use when building a React/Next.js/Node.js app that talks to Stellar — classic operations or smart contracts.
-
steveclarke Bundle KisoBuild UIs with Kiso — accessible Rails UI components with Tailwind CSS theming. Use when creating interfaces, customizing themes, building forms, or composing page layouts in Rails + Hotwire apps.
-
steveclarke Skill ContributingKiso component conventions and development workflow. Points to the right docs for building, reviewing, and shipping components.
-
steveclarke Skill Component CreateBuild a Kiso component from scratch. Reads shadcn/Nuxt UI sources, creates theme module, ERB partials, Lookbook previews, docs, E2E tests. Use when building a new component or picking up where a previous attempt left off.
-
steveclarke Skill Component FactoryAgentic Component Factory — build multiple Kiso components in parallel using builder and reviewer agents in isolated worktrees. Usage: /factory #47 #48 or /factory #47 #48 #49 (pass issue numbers)
-
stevysmith Bundle Stacktree PublishPublish HTML to a private link that opens in any browser, no account needed for the viewer. Use when the user says "publish this", "publish html", "host this html", "share this page privately", "share an html file", "send this to the client", or asks for a link to something you built. Pages can be passcode-gated on every plan, restricted to a company email domain, or given a public slug; links are private by default and replace in place, so a shared URL always shows the current version.
-
stevysmith Bundle StacktreePublish HTML to a private, unguessable link your human can open in any browser — no account for the viewer, passcode optional. Built for the pages a personal agent produces: a morning brief, a dashboard, a report, field notes, a visualization, anything a chat message can't hold. Free anonymous pages (24 hours), or pay $0.50 in USDC over x402 for a permanent page with no account at all — and an unclaimed page hands back a token that keeps updating that same URL free, with no account, for as long as the page lives. This skill publishes content to stacktr.ee, and makes paid HTTP requests only on the paths that say so. USE FOR: - "publish this", "host this html", "put this on a page", "give me a link" - Delivering a report, brief, dashboard, or write-up as a link instead of an attachment - A standing page you refresh on every run — same link, new content, no re-pay - Sharing privately: unguessable URL, optional passcode, optional expiry - Publishing with no API key and no human present (x402, USDC on Base or Sola
-
stevysmith Skill Stacktree Agent Run ReportPublish what your agent just produced as a private web page, shareable with anyone who has the link. Use right after a run produces a report, audit, analysis, or a dashboard the agent built on demand, the kind that reads better in a browser than dumped in the chat, and the user wants a link to send to colleagues with no account or workspace required. Fits the throwaway, on-demand dashboard pattern (gather the data, render the HTML, share a private link that expires on its own) as well as longer run reports. Produces a page in the Agent run report shape (KPI header, findings, recommended order), keeps it unlisted with a sensible default expiry, and is built to be refreshed in place on re-run.
-
switch-dimension Skill Check LogsDiagnose errors from dev server logs (Next.js, Vite, etc.) and fix them. Use this skill whenever the user mentions checking logs, server errors, terminal errors, build failures, or asks things like "why is my server crashing", "check my logs", "what's this error", "fix the build error", "the dev server is broken", "something's wrong with my app", "check the terminal", "I'm getting an error", or "debug the server output". Also trigger when the user asks you to monitor running tasks for errors, review background task output, or wants help understanding any error in terminal or task logs — even if they don't say "logs" explicitly.
-
tavus-engineering Skill Tavus Cvi UIIntegrate Tavus CVI into React apps using @tavus/cvi-ui components. Use when embedding conversations in web apps, customizing the video UI, using React hooks for CVI events, or building custom conversation interfaces with Vite/Next.js.
-
themattberman Bundle Page QAFinal landing-page QA pass against strategy, proof provenance, mechanism clarity, trust preservation, accessibility, and anti-slop. Gates whether a page is shippable or draft-only.
-
themattberman Bundle Page BuildBuild a deployable landing page from strategy, copy, visuals, and brand profile using category-aware routing, preservation hierarchy, and explicit QA. Single-file HTML output.
-
thinkgem Skill Frontend Vue检索JeeSite Vue前端开发文档(CRUD、表单、表格、组件、权限等)。Invoke when user asks about Vue frontend, form development, table components, or Vue3 development.
-
thinkgem Skill Frontend Beetl检索JeeSite经典前端开发文档(Beetl视图、DataGrid、JS框架等)。Invoke when user asks about classic frontend, Beetl templates, DataGrid, or legacy JS framework.
-
jdf2e Bundle Nutui React当用户的任务涉及 NutUI React(@nutui/nutui-react)时使用 —— 编写 NutUI React 组件、调试 NutUI 问题,或查询 NutUI 组件的 API/属性/文档/示例/设计变量(Design Token)。触发场景:与 NutUI 相关的代码、从 '@nutui/nutui-react' 导入,或明确的 NutUI 相关提问。NutUI React 是京东的轻量级移动端(H5)组件库。
-
jdf2e Bundle Nutui React To Taro当需要把项目(或代码片段)从 NutUI React(@nutui/nutui-react,H5)迁移到 NutUI React Taro(@nutui/nutui-react-taro,小程序 / 跨端 Taro)时使用。触发场景如「把 NutUI React 迁移到 Taro」「让这个 H5 的 NutUI 页面能在小程序里跑」,或将 H5 的 NutUI 组件转换到 Taro 运行时。两个包共用同一套组件,绝大多数组件一一对应——真正的工作是包名 / import 改写、原生标签 → Taro 组件替换、样式单位修正,以及对少数两端 props 不同的组件做交叉核对。
-
jdf2e Bundle Nutui React Taro当用户的任务涉及 NutUI React Taro(@nutui/nutui-react-taro)时使用 —— 为小程序 / 跨端(Taro)应用编写 NutUI React Taro 组件、调试 NutUI Taro 问题,或查询 NutUI Taro 组件的 API/属性/文档/示例/设计变量(Design Token)。 触发场景:与 NutUI Taro 相关的代码、从 '@nutui/nutui-react-taro' 导入,或明确的 NutUI Taro 相关提问。NutUI React Taro 是京东面向 Taro(小程序 / 多端)的移动端组件库,一套代码同时支持 H5 与小程序。
-
jtenniswood Skill Expert ResetReimagine this repository from first principles using the current product and user experience as the target. Use when the user says "/expert-reset", asks how the project should be rebuilt if starting again, wants bold architecture or component-structure recommendations, or wants a research-only reset plan unconstrained by current implementation details.
-
jtenniswood Skill ExpertreviewProvide an expert codebase review for this repository. Use when the user says "/expertreview", asks for an expert review, wants refactoring or codebase improvement recommendations, wants consistency and quality assessed, or asks how to reduce duplication, improve component use, preserve the end-user experience, and keep upgrades cleanly migratable.
-
kayac Skill Np Design体験設計の壁打ちと UI デザイン案の提案。「こういう機能を作る」「この画面を良くしたい」を受けて、 どんな体験にするかを壁打ちして体験方針に合意し、方針に沿った UI 案を デザイン憲法(DESIGN.md)とトークンに準拠した 1 枚の HTML で提示する。 Use when: - /np-design を実行した場合 - 「デザイン案がほしい」「この画面のデザインを考えて」「どんな体験にすべきか相談したい」等の依頼 - 実装前にデザイン・体験の方向性を検討したいとき NOT for: - 実装そのもの(このスキルは提案まで。採用後の実装は別タスク) - 文言だけの微修正
-
kevinchamplin Skill SuperteamLaunch a super team of parallel specialist agents to audit, fix, and level up the entire project simultaneously. Covers security, performance, UI/UX, mobile, accessibility, code quality, and testing. Use when the user says /superteam, wants a full project audit, or asks to 'level up' the project.
-
kevinchamplin Bundle UX DesignerApply modern UX best practices when designing and reviewing interfaces. Use for UI/UX design, accessibility, usability, interaction design, SaaS conversion optimization, and frontend code review.
-
kevinchamplin Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
yusukebe Skill Hono ReactWhen a project on Hono needs real React — for the React component ecosystem, SSR, or an SPA — drop hono/jsx and wire React in via vite-ssr-components.
-
zerodeng01 Skill Theme CheckTheme adaptation checklist for light/dark mode and UI component changes. Use when modifying colors, surfaces, dialogs, or theme infrastructure. Not for simple text changes.
-
zerodeng01 Skill Cross Layer SyncCross-layer synchronization guide for backend, frontend, and documentation changes. Invoked by post-dev-workflow when changes affect multiple layers. Not for direct user invocation.
-
zotero Skill Inspect PageInspect a live web page using headless Chrome. Gets screenshots, meta tags, accessibility tree, and runs CSS selectors or JS expressions against the rendered DOM.
-
lwaetzig Bundle Theme FactoryToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
-
lwaetzig Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
-
whitphx Skill Checking ChangesValidates all code changes before committing by running format, lint, type, and unit test checks. Use after making backend (Python) or frontend (TypeScript) changes, before committing or finishing a work session.
-
whitphx Skill Debugging StreamlitDebug Streamlit frontend and backend changes using make debug with hot-reload. Use when testing code changes, investigating bugs, checking UI behavior, or needing screenshots of the running app.
-
whitphx Skill Implementing New FeaturesImplementation guide for new Streamlit features. Use when adding new elements, widgets, or features that span backend, frontend, and protobufs.
-
will-ness-ai Bundle Code StoryBuild a wizard-style HTML page that teaches how and why a change works.
-
will-ness-ai Bundle Grill DesignConverge on a frontend look through rounds of prototypes and grilling verdicts. Use when the user wants to iterate on UI/visual taste against concrete variants, or a wayfinder prototype ticket names this skill.
-
will-ness-ai Skill Grilling Frontend Prototyping<!--
-
xirothedev Bundle Nextjs Secure BffUse for security-sensitive Next.js backend-for-frontend work involving Route Handlers, Proxy, Server Actions, webhooks, callbacks, data access layers, server-only modules, request validation, rate limits, or public API boundaries. Prefer this skill when a Next.js task exposes HTTP endpoints or moves privileged data across server/client boundaries.
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 dapp, kiso, contributing. 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.