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.
-
lncitador Bundle AdonisjsUse this skill whenever the user is working with AdonisJS v7 backend framework code: controllers, routes, middleware, services, VineJS validators, Transformers, Bouncer policies, events, listeners, mail, cache, queue, exceptions, Ace commands, request/response/session handling, or backend architecture and review. Trigger for "create a controller", "add validation", "create a service", "add a policy", "wire routes", "handle an exception", or AdonisJS backend review/debugging. For Lucid ORM, migrations, schema generation, models, relationships, query builders, transactions, factories, or seeders, use the lucid skill alongside or instead of this one. For Japa tests, use the japa skill. For Inertia frontend patterns, use inertia-react or inertia-vue alongside this one.
-
lncitador Bundle Inertia VueUse this skill alongside the adonisjs skill when the project uses Inertia.js with Vue 3 as the frontend layer. Trigger for anything involving Vue page components in an AdonisJS + Inertia project: the Form or Link components from @adonisjs/inertia/vue, typed props with Data.Post from @generated/data, InertiaMiddleware shared data, deferred/optional/always props, error bags, pagination in Vue, or any inertia.render() frontend pattern. This skill covers only the Vue frontend layer — for all AdonisJS backend patterns (controllers, models, validators, migrations, auth, transformers, events) use the adonisjs skill. Both skills should be active together on Inertia + Vue projects.
-
lncitador Bundle Inertia ReactUse this skill alongside the adonisjs skill when the project uses Inertia.js with React as the frontend layer. Trigger for anything involving React page components in an AdonisJS + Inertia project: the Form or Link components from @adonisjs/inertia/react, typed props with Data.Post from @generated/data, InertiaMiddleware shared data, deferred/optional/always props, error bags, pagination in React, or any inertia.render() frontend pattern. This skill covers only the React frontend layer — for all AdonisJS backend patterns (controllers, models, validators, migrations, auth, transformers, events) use the adonisjs skill. Both skills should be active together on Inertia + React projects.
-
lotfb86 Bundle Workshop FollowupGenerate a polished post-workshop follow-up package for a Ruh AI client engagement: an HTML takeaway document, a PDF export, and a short cover email in Luke's voice. Use this skill whenever the user has just finished a Ruh AI workshop with a client (typically a Claude Code / AI enablement session led by Jesse and/or Luke) and needs to send the attendees a follow-up. Input is a transcript (file path or pasted text) and a recording link; the skill auto-discovers attendees from Google Calendar when available, does light company research from recipient email domains, runs a six-pass extraction over the transcript to capture Jesse-isms, attendee Q&A, identified use cases, prompts shared in chat, commitments, and personalization hooks — then renders the artifacts into the client's working directory under `Workshop-N/`. The output matches the house style established for Taurus Builders and Dondlinger. Triggers on: "workshop follow-up", "workshop followup", "workshop takeaway", "workshop recap", "post-workshop email"
-
ls1intum Bundle Client ConventionsWrite Angular code for Artemis that passes lint and review the first time. Use when creating or changing anything under src/main/webapp/app or packages/tum-ui, when an ESLint localRules check fails, or when migrating a component to signals. Covers signal APIs, the ngOnChanges ban, template control flow, object cloning, and the TUM UI and Tailwind styling rules.
-
makerjackie Bundle Mj Book PDFUse when rendering a technical manuscript into a polished HTML and PDF orange-book with a custom cover, table of contents, book-like spacing, and printable A4 layout.
-
manycoretech Bundle Aholo SiteWork on Aholo Viewer Astro website and Playground surfaces under website/. Use for routes, layouts, components, page chrome, i18n UI copy, scoped CSS, client render runtime, Playground runner, preview canvas, inspector, presets, route-local Monaco, and URL parameters. Use aholo-examples for example content pairs.
-
manycoretech Bundle Aholo ViewerCoordinate Aholo Viewer monorepo work. Use for cross-module tasks, workspace scripts, generated docs/build flow, validation routing, cleanup boundaries, or when work must be routed between examples, site, renderer, docs, and frontend design skills.
-
manycoretech Bundle Frontend DesignDesign and polish Aholo Viewer frontend interfaces with production-grade visual quality. Use for website UI direction, Astro page/component styling, responsive layout, visual refinement, and frontend design reviews in this repository.
-
marketcalls Bundle Security AuditRun OpenAlgo's periodic security audit across backend, frontend, database, cache, routes and dependencies, producing a dated xlsx report. Use for the monthly or twice-monthly review, before a release, after a dependency bump, or when the user asks for a security check, vulnerability scan, or audit report.
-
mattpocock Skill Optimize LoaderOptimize slow React Router loaders by eliminating redundant DB queries, creating slim query variants, and parallelizing independent fetches. Use proactively when writing or reviewing loader code that calls domain operations services (e.g. CourseOperationsService, VideoOperationsService), or when triaging a slow page load.
236k -
melgarafael Bundle Obsidian ForgeUse quando o usuario diz "meu plano de negocio", "matematica do resultado", "abre o painel do negocio", "scanear projetos", "registrar progresso", ou invoca `/obsidian-master-kit:forge-scan|plan|dash`. Conduz entrevista dos 4 passos (3 Ps, precificacao, matematica, 7 acoes macro) conforme metodologia da aula "IA como ferramenta"; mapeia projetos ativos do PC como notas atomicas; sobe dashboard HTML estatico em localhost:4712 com File System Access API para cliques executores. 100% local, zero cloud, zero daemon.
-
rolandbrecht Bundle Structural RefactorUse this skill for any structural code search or replacement task — it is the right choice whenever grep/sed would feel clunky or risky. Trigger on ANY of these patterns: **Structural find-and-replace across a codebase:** "replace all fetch(url, options) calls with the new fetchWithRetry signature", "rename the first argument of every logger.log call from msg to message", "swap the argument order of this helper across all files" **Cross-language or multi-format refactoring:** "update this API pattern in all .js and .ts files", "change all SQL SELECT * to SELECT col1, col2 in our query templates", "modernize these HTML button attributes" **Code migration / deprecated API patterns:** "migrate all createStore() calls to configureStore()", "update all axios.get(url) to the new axios({url, method}) form", "Python 2 print statements to Python 3 print() functions across the whole project", "modernize old Python 2 idioms to Python 3" **Safe multi-file replacements that regex would botch:** multiline expressions, nest
-
rubyevents Skill ViewcomponentsRubyVideo ViewComponents - UI Component Rules
-
salimramirez Bundle Ddd VueStructure a Vue frontend with Domain-Driven Design — bounded-context feature folders, a domain layer of entity and command classes that carry behaviour, assemblers as an anti-corruption layer against the backend API, Pinia stores, and a presentation layer of views and components. Use when organizing or refactoring a Vue app by business domain rather than by technical type, isolating API payloads from the app's own model, or deciding where business logic belongs on the frontend. It carries the DDD design rules it depends on, so it works on its own. Not for styling, Vue framework how-to, or backend domain modeling.
-
salimramirez Bundle Ddd ReactStructure a React frontend with Domain-Driven Design — bounded-context feature folders, a domain layer of immutable entity and command classes that carry behaviour, assemblers as an anti-corruption layer against the backend API, Zustand stores, and a presentation layer of routed views and reusable components. Use when organizing or refactoring a React app by business domain rather than by technical type, isolating API payloads from the app's own model, or deciding where business logic belongs on the frontend. It carries the DDD design rules it depends on, so it works on its own. Not for styling, React framework how-to, or backend domain modeling.
-
salimramirez Bundle Ddd AngularStructure an Angular frontend with Domain-Driven Design — bounded-context feature folders, a domain layer of entities and commands, DTOs and assemblers as an anti-corruption layer against the backend API, signal stores, and a presentation layer of views and components. Use when organizing or refactoring an Angular app by business domain rather than by technical type, isolating API contracts from the app's own model, or deciding where business logic belongs on the frontend. It carries the DDD design rules it depends on, so it works on its own. Not for styling, Angular framework how-to, or backend domain modeling.
-
sanqi-cd Bundle Xhs Image Text Generator将 HTML、Markdown、文章、访谈记录、产品资料或主题转化为可直接发布的 6-10 页小红书/RedNote 图文轮播,完成内容提炼、分页、视觉设计、生图、失败重试和交付校验。适用于“小红书配图”“把文章做成卡片”“直接生图并给发布文案”等请求。Use when the user needs final carousel assets, not only prompts or generic summaries.
-
saurabhdave Bundle Apple Accessibility AdvisorProduction-grade accessibility audit and implementation advisor for Apple platform applications (iOS, iPadOS, macOS, watchOS, visionOS, tvOS).
-
seansmithworks Skill Design BriefGenerate a unified style brief from all active design layers before coding UI. Outputs craft constraints, aesthetic rules, and a11y requirements.
-
selfxyz Skill Pr AuditMulti-agent PR review — component, integration, and routing analysis merged into a structured audit doc with severity and PR buckets.
-
semaphoreui Bundle Semaphore Third Party LicensesGenerate or update the THIRD-PARTY-LICENSES.md file for the Semaphore UI repository. Use this skill whenever the user asks to create, update, regenerate, audit, or refresh third-party license attributions, OSS notices, SBOM-style license inventories, or NOTICE files for Semaphore UI. Trigger on phrases like "third-party licenses", "OSS notices", "license attribution file", "SBOM for licenses", "NOTICE file", "audit dependencies", "licenses for go.mod / package.json", or any request that mentions compliance with customer agreements requiring an OSS components list. Also trigger when the user says "we added a new dependency, regenerate licenses". This skill knows the Semaphore UI layout (Go backend + Vue.js frontend), the project's license policy (allowlist/denylist), and the canonical output format.
-
unity-technologies Skill Memory Snapshot ReportGenerate and view Unity memory snapshot reports. Use when the user wants to analyze a Unity memory snapshot, export it to a database, validate an export against Unity golden values, or generate/view an HTML report.
-
unity-technologies Bundle Run Memory Snapshot Data ToolBuild, run, screenshot, and test the Memory Snapshot Data Tool — the .NET 10 CLI that exports Unity .snap memory snapshots to DuckDB/SQLite and renders an HTML report. Use when asked to run, start, build, or test the tool, export a snapshot, generate or screenshot a report, or confirm a change works in the real app.
-
usmanasifbutt Bundle Production React EngineeringHow to build a production, server-rendered React frontend the disciplined way — a multi-tenant/multi-brand layered structure, hand-rolled component primitives with CSS Modules, a custom SSR router, plain Redux + a custom Fetcher framework (no React Query), Keycloak-via-BFF-cookie auth with role predicates, an HTTPApi/fetch client, a Redux-integrated search abstraction over a hosted search SaaS or Elasticsearch, Formik+Yup forms, lightweight SVG charts, and code-split loadable components. Load this BEFORE writing or reviewing ANY frontend code — components, hooks, routes, Redux state, API calls, auth/protected routes, forms, search, charts, config/feature flags, or tests — and when scaffolding a new React frontend that should follow these conventions.
-
vercel-labs Bundle Nextjs Fix IssueImplement and validate the smallest correct fix for a confirmed issue in vercel/next.js after reproduction, canary verification, and regression-test work. Use when a focused failing Next.js regression test exists and the product code must be corrected without weakening that test.
28.7k -
vercel-labs Bundle Nextjs Verify CanaryCompare a validated Next.js reproduction on its reported version and the latest published next@canary under equivalent conditions. Use when determining whether a confirmed vercel/next.js issue still reproduces on canary or appears fixed there.
28.7k -
vercel-labs Bundle Nextjs Reproduce IssueReproduce and validate a reported Next.js issue using real code and runtime evidence. Use when investigating whether a vercel/next.js bug report is reproducible, repairing an incomplete reproduction, or creating the smallest standalone reproduction when none is provided.
28.7k -
vercel-labs Bundle Nextjs Bisect RegressionLocate the introduction or fix boundary for a validated Next.js regression using releases or commits and an executable reproduction. Use after reported-version-versus-canary verification when a vercel/next.js maintainer needs the last unchanged and first changed version or commit.
28.7k -
vercel-labs Bundle Nextjs Create Regression TestTurn a validated Next.js reproduction and canary verification into the smallest appropriate regression test in vercel/next.js. Use when a confirmed issue needs a focused test that proves the reported behavior and fits the existing Next.js test suite.
28.7k -
vinayakkulkarni Bundle Vue Best PracticesVue.js performance optimization guidelines for building fast, maintainable applications. This skill should be used when writing, reviewing, or refactoring Vue.js code to ensure optimal performance patterns. Triggers on tasks involving Vue components, reactivity, Composition API, state management, or performance improvements.
-
viy1204 Bundle Feishu Org Chart从飞书通讯录实时拉取部门树和成员,在飞书画板上画出公司组织架构图——展示部门层级、每个员工, 可叠加岗位(按花名册姓名匹配)、标注部门负责人,并嵌入飞书云文档交付。当用户想把公司/团队的 组织结构、部门层级、汇报关系可视化成一张层级图时就用本 skill,典型说法:"画组织架构图""组织结构图" "org chart""部门架构图""把团队画成图""各部门都有谁画出来""标上每个组的 leader""谁汇报给谁画成图"—— 即使没明说"飞书"或"画板"也应触发;HR 做全员架构图、招人后重出架构图等场景同样适用。它封装了 contact API 拉数、岗位匹配、dagre 自动布局、画板上传的全流程,并规避了权限配置与 Windows 路径的坑。 边界(这些不走本 skill):单纯查某个人的部门/open_id 走 lark-contact;把已有的图/截图/mermaid 渲染或下载成图片、总结飞书文档内容、画业务流程图、做组织架构 PPT、用 HTML 搭可交互组织网页,均非本 skill。
-
viy1204 Bundle Feishu Attendance Analyzer飞书考勤数据分析:从飞书考勤统计接口拉取全员打卡记录,分析平均下班时间排行榜、 异常预警(连续加班、深夜打卡、作息异常)、部门对比等多维度报表,输出终端排行榜 + Excel 报表 + 自包含可视化 HTML 报表。当用户提到"考勤分析""谁下班最晚""加班排行" "打卡统计""考勤报表""谁经常加班""考勤异常""部门考勤对比"时,必须使用此 skill; 即使只说"看看大家几点下班""谁最卷"也应触发。依赖 feishu-roster 提供在职员工工号清单。 边界(这些不走本 skill):单纯拉花名册/在职名单走 feishu-roster;把组织结构画成架构图走 feishu-org-chart;本 skill 只统计有打卡记录的员工,免打卡员工不在统计范围内,也不涉及 请假/审批/排班数据。
-
vmos-dev Bundle Workflow Skill CreatorUse when creating Android UI automation workflows, recording tap sequences, or building replayable device scripts. Triggers on tasks involving Android device interaction, accessibility selectors, or workflow-script.json files. Do NOT use for pure canvas games, OpenGL rendering, or custom drawing surfaces without standard UI elements.
-
wellwelwel Bundle CdpVisual verification of a running page through Chrome's DevTools Protocol, capturing screenshots and measuring the rendered DOM. Use when a frontend change can only be confirmed once rendered, for layout, spacing, alignment, overflow, or theme tokens.
-
wellwelwel Skill ImagesResponsive image generation and audit through a deterministic hook. It encodes every declared master into AVIF and WebP at the widths devices actually render, detects drift between masters and their generated variants, and pairs with the Picture component so pages serve the smallest fitting source. Use when adding, changing, or auditing raster images.
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 adonisjs, inertia-vue, inertia-react. 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.