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.
-
ajbarea Skill Docs SiteMaintain the Zensical-powered documentation site — nav ordering in zensical.toml, the docs GitHub Pages workflow, CSS and JS assets, and link/anchor integrity across docs/**/*.md. Sibling of /techne:docsync (which only verifies prose claims against code). Use when the user wants the site itself audited — config, deploy pipeline, theming, assets, cross-page links — rather than content accuracy.
-
alibaba Skill Riper5 ProtocolThis workflow, known as RIPER-5, is designed exclusively for handling complex software engineering tasks such as system design, architectural refactoring, bug diagnosis, performance optimization, and multi-component integration.
Audited -
analogdevicesinc Skill Scopy Component RelationshipsHow Scopy libraries depend on each other, plugin commonalities, MessageBroker topics, shared widgets, style system flow, and build system relationships. Loaded when determining component interactions or change impact.
Audited -
andreab67 Skill K8S Nextjs DeployKubernetes deployment patterns for Next.js applications — Deployment/Service/Ingress manifests, Harbor image pull secrets, Traefik ingress with cert-manager TLS, Linkerd service mesh, multi-app namespaces, and K8s secret rotation. Use this skill whenever the user mentions deploying a Next.js app to Kubernetes, ImagePullBackOff, CrashLoopBackOff, Harbor pull secret, Traefik ingress, cert-manager, a missing secretKeyRef, or namespace recovery — even if they just say "the pod won't start" or "deploy this to k8s" without further detail.
-
andreab67 Skill Nextjs Monorepo CIDesign, fix, and extend GitLab CI/CD pipelines for Next.js monorepos — multi-stage pipelines (validate, security, build, obfuscate, package, notify), Kaniko image builds, Semgrep SAST/secrets, gitleaks, javascript-obfuscator standalone output, Harbor registry, and IndexNow notify stage. Use this skill whenever the user mentions GitLab CI, a failing CI job, gitleaks, Kaniko, javascript-obfuscator, Harbor push, or any pipeline work in a Next.js monorepo — even if they just say "CI is broken" or "add a new app to the pipeline" without more detail.
-
arch3rpro Bundle Testing TiersChoose the right test tier for a change and keep the suite meaningful — unit, integration, real-entry-path, end-to-end, and snapshot tiers; test the real entry path rather than a hand-built harness; verify the world rather than the component's self-report; prefer the real implementation over a mock; and treat line coverage as necessary, never sufficient. Use when writing, planning, or reviewing tests, deciding what a change needs to be tested, or when a suite is green but the product is broken.
-
ship-with-ai Bundle Pre FlightUse this skill whenever the user wants to verify a side project is ready for its first real user — after `/autopilot` or `/factory` has reported "shipped" but before sending any DM. Also trigger when the user says "/pre-flight", "is my side project ready", "check before I DM users", "first-user readiness check", "the eval my agents skipped", "did my agent actually ship a product", or "ship/fix/rebuild verdict". Takes the live URL + idea.md + scope.md + one named first-user target as input. Runs four eval questions (Output / Trace / Component / Drift) against the live URL, writes pre-flight.md with pass/fail per question, surfaces the top 3 blockers ordered by impact × effort, and outputs a SHIP / FIX / REBUILD verdict. Companion to /autopilot and /factory — the eval rung the Lead the Machine series never wrote.
-
tranz007 Bundle PrCreate a high-quality pull request description for UX-related implementation that explains why the change exists, what behavior changed, design-system usage, states, accessibility, testing, risks, and what reviewers should inspect. Use when design or design-engineering work is ready to become a PR.
-
tranz007 Skill RippleTrace what else a UX, flow, component, content, or design-system change could affect. Use when a designer asks "if we change this, what else moves?", "what else could this affect?", or wants to understand downstream UX impact before committing to a change.
Audited -
tranz007 Skill HandoffPrepare UX work for engineering by preserving user intent, behavior, states, design-system usage, accessibility requirements, dependencies, acceptance behavior, and unresolved questions. Use when a designer says "get this ready for engineering", needs a handoff, behavioral contract, implementation-ready ticket content, or wants to stop engineering from guessing.
Audited -
tranz007 Skill CritiqueReview and compare UX designs, flows, prototypes, specifications, or implementations against user goals, evidence, interaction behavior, accessibility, design-system fit, content, and engineering intent. Use when a designer asks for critique, comparison, tough feedback, review before approval, or wants to check whether implementation preserved the intended experience.
Audited -
tranz007 Skill System FitDecide whether a UX need should reuse, compose, extend, or create a design-system component or pattern. Use when a designer asks whether something needs a new component, how a design fits the current system, or what design-system contribution a feature should make.
Audited -
tranz007 Skill State SweepFind missing interface and service states such as loading, empty, partial, permission, timeout, stale data, validation, failure, interruption, and recovery. Use when a designer asks what states or edge cases are missing from a screen, component, journey, or feature.
Audited -
tranz007 Skill AccessibilityReview UX design intent and available implementation evidence for accessibility barriers, inclusive interaction, WCAG or Section 508 requirements, keyboard and focus behavior, semantics, dynamic announcements, content, motion, zoom/reflow, and recovery. Use when a designer asks for an accessibility review or needs accessibility behavior defined before engineering handoff.
Audited -
verygoodopensource Bundle AccessibilityAudits or remediates Flutter widgets against WCAG 2.2 conformance levels A, AA, or AAA across iOS, Android, Web, macOS, Windows, and Linux, covering Semantics labels and screen reader output under VoiceOver and TalkBack, touch target sizes, dragging alternatives, focus order and keyboard navigation, color contrast, text scaling, animation gating on disableAnimations, and form autofillHints, including the test suite that locks every fix in. Use when building, auditing, or reviewing Flutter widgets for accessibility on one or several of those platforms.
-
zhaoyis Bundle HTML Prototype DesignEnd-to-end workflow for building and iterating single-file HTML product prototypes—wizard flows, async waiting pages, modals, footer state machine, demo toggles, business annotations, and visual polish via ui-ux-pro-max. Use when creating or refining HTML prototypes, 单页原型, wireframe落地, 步骤条, 等待页, 弹窗原型, 原型美化, or preparing prototypes for business review.
-
zhaoyis Bundle Wechat Article Publisher发布 Markdown 或 HTML 文章到微信公众号草稿箱。支持检查 API key、列出已授权公众号账号、按 appid 发布内容、区分普通文章与小绿书图文,并与 wechat-article-writer 串联形成“写作→发布草稿”闭环。当用户提到发布公众号、发到微信公众号草稿箱、把 Markdown/HTML 发到微信公众平台、测试公众号发布时使用此 skill。
-
zhaoyis Bundle HTML Prototype AnnotationsAdds numbered orange markers and a right-side annotation panel to single-file HTML prototypes for business review. Use when the user asks for 功能标注、原型标注、标注说明、annotation panel、proto markers, or wants reviewers to align UI with requirements without opening devtools.
-
aj-geddes Bundle JavascriptGuides JavaScript and TypeScript development with modern tooling and patterns. ALWAYS trigger on "typescript", "javascript", "tsconfig", "eslint", "prettier", "vitest", "jest", "react", "node.js", "express", "npm", "package.json", "type error", "ts error", "js project setup", "frontend testing", "react hooks", "discriminated union", "type guard". Use when configuring TS/JS tooling, writing tests, structuring React or Node apps, or debugging type issues. Different from testing skill which covers general strategy; this covers JS/TS-specific test patterns and framework configs.
-
ry-run Bundle Frontend Dev Plain WebUse when building a webpage with plain HTML and CSS, and only add JavaScript when the requirements clearly need interaction. It fits lightweight code-first work that needs doc lookup, real-image sourcing, browser verification, and required DevTools checks without framework-heavy processes.
-
ricardo-vae Bundle Gpt ImageGenerate high-quality visual assets with GPT Image 2 / OpenAI image models for presentations, academic figures, diagrams, posters, UI mockups, and image-based slide backgrounds. Use when the user wants a PPT to look better, needs a visual style direction, slide background, method diagram, infographic, or image asset that can later be placed into a PPTX/HTML/PDF.
-
ricardo-vae Bundle Nature ReaderBuild full-text bilingual, figure-aware, source-grounded Markdown reading files for journal or conference papers from PDF, DOI, arXiv, publisher HTML, or pasted text. Use whenever the user asks to translate an entire paper, make a complete markdown reader, preserve figure or table placement near the relevant prose, or keep exact source anchors for every block. Do not use this for summaries, bullet-keyword notes, or citation-only tasks.
-
pipixia-labs Bundle Guizang Ppt Skill生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT(单 HTML 文件),含 WebGL 流体背景、衬线标题 + 非衬线正文、章节幕封、数据大字报、图片网格等模板。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT,或提到"杂志风 PPT"、"horizontal swipe deck"、"editorial magazine"、"e-ink presentation"时使用。
-
pipixia-labs Skill Design Canvas ArtifactGenerate Claude Design-style HTML design artifacts with visible sections, artboards, screen states, and visual variants for design review and AI iteration.
-
xingyu4j Bundle VbenVue Vben Admin monorepo 项目专家。适用于 Vben Admin 项目中的页面开发、组件使用、路由配置、API 定义、状态管理、适配器模式、国际化、权限控制等任务。支持所有应用变体(web-antd、web-ele、web-naive)和共享包。
-
xingyu4j Bundle Inspira UI120+ Vue/Nuxt 动画组件,集成 TailwindCSS v4、motion-v、GSAP、Three.js。适用于 Hero 区域、3D 效果、交互式背景,或解决安装配置、CSS 变量、motion-v 集成等错误。
-
arclabs-studio Skill Arc AuditComprehensive audit of ARC Labs Studio projects for standards compliance. Scans 9 domains (Architecture, Presentation, Domain, Data, Testing, Code Style, Documentation, Accessibility, Concurrency) and generates a compliance report with severity levels and a nota del 1 al 10. Use when "project health check", "pre-release audit", "standards compliance", "post-refactor verification", or "onboarding to ARC Labs standards".
Audited -
arclabs-studio Bundle Arc Quality StandardsCode quality standards covering code review checklists, SwiftLint/SwiftFormat configuration, naming conventions, DocC documentation, README templates, package structure, UI/UX guidelines (Apple HIG), accessibility, dark mode, and localization. Use when "reviewing code", "writing documentation", "creating READMEs", "checking naming", "implementing accessibility", or "fixing lint issues".
-
bactopia Bundle Run TestsRun Bactopia nf-tests via bactopia-test and produce a timestamped logs/ directory that /review-tests can interpret. Use when asked to run tests, execute tests, test a module, test a subworkflow, test a workflow, or validate a change. Accepts optional tier and component arguments (e.g., "run tests on snippy", "test abricate_run module", "test amrfinderplus subworkflow").
-
bactopia Bundle Project StatusShow a live snapshot of the Bactopia project state — component counts, GroovyDoc coverage, nf-test coverage, and structural issues. Use when asked about project state, coverage, what's missing, what's documented, or what needs attention.
-
bactopia Bundle Update CatalogRegenerate catalog.json and llms.txt by running bactopia-catalog. Use when asked to update the catalog, rebuild the component index, refresh catalog.json, or sync llms.txt after component changes (new/removed modules, subworkflows, or workflows; tool version bumps; GroovyDoc edits that affect descriptions or contracts).
-
badmuriss Bundle Frontend Visual ValidationVerify rendered UI changes with reproducible screenshots and vision review on their supported platforms.
-
baserow Bundle Baserow RegistryExplain, create, update, or use Baserow registries across backend and frontend code, including Instance/Registry patterns, registration points, model-backed type registries, serializer/API URL/import-export helpers, and the registry mixins in baserow.core.registry.
-
baserow Skill Runtime FormulasExplain, debug, or extend Baserow runtime formulas, including FormulaField/JSONFormulaField storage, FormulaSerializerField validation, runtime formula functions, backend and frontend data providers, formula context dispatch data, import/export path rewriting, and tests.
-
baserow Bundle Add Config Env VarAdd a Baserow configuration environment variable for the backend, frontend, or both, and propagate it through settings, Nuxt runtime config, Docker Compose, documentation, consumers, and tests as applicable. Use when adding or reviewing any env-backed configuration value, including requests that reference `INTEGRATION_LOCAL_BASEROW_PAGE_SIZE_LIMIT` as a pattern.
-
baserow Bundle Manage Baserow PermissionsCreate, edit, or debug Baserow permission operations and permission managers across backend and frontend, including OperationType, PermissionManagerType, PERMISSION_MANAGERS ordering, frontend permission managers, and permission tests.
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 accessibility, docs-site, riper5-protocol. 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.