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.
-
comeonoliver Bundle Tanstack Query 2TanStack Query (React Query) v5
61 - comeonoliver Bundle Tanstack Start 2
TanStack Start (React) — RC-Ready Playbook
61 - comeonoliver Skill Web Artifacts Builder 2
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
61 - comeonoliver Bundle Cloudflare Nextjs 2
Cloudflare Next.js Deployment Skill
61 - comeonoliver Bundle React Hook Form Zod 2
React Hook Form + Zod Validation
61 - comeonoliver Bundle Fastapi App 2
Use when creating FastAPI backend applications - route handlers, dependencies, CORS config, or Pydantic models. NOT when frontend logic, non-Python backends, or unrelated server-side code. Triggers: "FastAPI", "student endpoint", "API route", "dependency injection", "CORS", "Pydantic model".
61 - comeonoliver Bundle Writing Data 2
Use this skill when you need to structure data in `srs/data` for the Next.js app
61 - comeonoliver Bundle Webapp Testing 3
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
61 - comeonoliver Bundle Writing Types 2
Use this skill when you need to write types and interfaces in `srs/types` for the Next.js app
61 - comeonoliver Bundle Writing Utils 2
Use this skill when you need to write utility functions for the Next.js app
61 - comeonoliver Bundle Vue Debug Guides 2
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
61 - comeonoliver Bundle Agent UI 3
Batteries-included agent component for React/Next.js from ui.inference.sh. One component with runtime, tools, streaming, approvals, and widgets built in. Capabilities: drop-in agent, human-in-the-loop, client-side tools, form filling. Use for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants. Triggers: agent component, agent ui, chat agent, shadcn agent, react agent, agentic ui, ai assistant ui, copilot ui, inference ui, human in the loop
61 - comeonoliver Bundle Chat UI 2
"Chat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interfaces, message lists, input handling, streaming. Use for: building custom chat UIs, messaging interfaces, AI assistants. Triggers: chat ui, chat component, message list, chat input, shadcn chat," react chat, chat interface, messaging ui, conversation ui, chat building blocks
61 - comeonoliver Bundle React Doctor 2
Run after making React changes to catch issues early. Use when reviewing code, finishing a feature, or fixing bugs in a React project.
61 - comeonoliver Skill Webapp Testing 4
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
61 - comeonoliver Bundle Agent UI 4
"Batteries-included agent component for React/Next.js from ui.inference.sh. One component with runtime, tools, streaming, approvals, and widgets built in. Capabilities: drop-in agent, human-in-the-loop, client-side tools, form filling. Use for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants. Triggers: agent component, agent ui, chat agent, shadcn agent, react agent," agentic ui, ai assistant ui, copilot ui, inference ui, human in the loop
61 - comeonoliver Bundle Tools UI 2
"Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results," agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending
61 -
mhassan0000 Bundle Article Magazine 2Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
1 - mhassan0000 Bundle Dependency Auditor 2
Audit and manage dependencies across multi-language projects. Identifies vulnerabilities, license conflicts, transitive dependency risks, and safe-upgrade paths. Use when auditing third-party packages before release, investigating a CVE, planning a major version bump, or running a license-compliance review. Examples: 'audit our npm dependencies', 'do we have GPL contamination', 'plan the upgrade to React 19'.
1 - mhassan0000 Skill Web Artifacts Builder 2
Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.
1 - mhassan0000 Bundle Senior Frontend 2
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
1 - mhassan0000 Skill Nutrient Document Processing 2
Process, convert, OCR, extract, redact, sign, and fill documents using the Nutrient DWS API. Works with PDFs, DOCX, XLSX, PPTX, HTML, and images.
1 - mhassan0000 Bundle Senior Fullstack 2
Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring, and stack selection guidance. Use when the user asks to "scaffold a new project", "create a Next.js app", "set up FastAPI with React", "analyze code quality", "audit my codebase", "what stack should I use", "generate project boilerplate", or mentions fullstack development, project setup, or tech stack comparison.
1 - mhassan0000 Bundle UI Styling 2
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
1 -
aibot88 Bundle Coder Convex 2Self-hosted Convex development in Coder workspaces with authentication, queries, mutations, React integration, and environment configuration
3 - aibot88 Bundle Forms Router 2
Router for web form development. Use when creating forms, handling validation, user input, or data entry across React, Vue, or vanilla JavaScript. Routes to 7 specialized skills for accessibility, validation, security, UX patterns, and framework-specific implementations. Start here for form projects.
3 - aibot88 Bundle Pierre Guard 2
Guard against breaking the @pierre/diffs integration in Plannotator's code review UI. Use this skill whenever modifying DiffViewer.tsx, upgrading the @pierre/diffs package, changing unsafeCSS injection, adding new props to FileDiff, or touching shadow DOM selectors or CSS variables that cross into Pierre's shadow boundary. Also trigger when someone asks "will this break the diff viewer", "is this safe to change", or when reviewing PRs that touch the review-editor package.
3 - aibot88 Bundle Zoom Meeting Sdk React Native 2
Zoom Meeting SDK for React Native. Use when embedding Zoom meetings in React Native iOS/Android apps with @zoom/meetingsdk-react-native, JWT auth, join/start flows, platform setup, and native bridge troubleshooting.
3 - aibot88 Bundle Accessibility 2
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
3 - aibot88 Bundle Media Accessibility 2
Media Accessibility Skill
3 - aibot88 Bundle React Audit Grep Patterns 2
Provides the complete, verified grep scan command library for auditing React codebases before a React 18.3.1 or React 19 upgrade. Use this skill whenever running a migration audit - for both the react18-auditor and react19-auditor agents. Contains every grep pattern needed to find deprecated APIs, removed APIs, unsafe lifecycle methods, batching vulnerabilities, test file issues, dependency conflicts, and React 19 specific removals. Always use this skill when writing audit scan commands - do not rely on memory for grep syntax, especially for the multi-line async setState patterns which require context flags.
3 - comeonoliver Bundle Coordinator 2
Autonomous penetration testing coordinator using ReAct methodology. Automatically activates when user provides a target IP or asks to start penetration testing. Orchestrates reconnaissance, exploitation, and privilege escalation until both user and root flags are captured. (project)
61 - comeonoliver Bundle Native Data Fetching 2
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.
61 - comeonoliver Bundle Widgets UI 2
"Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets," dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui
61 - comeonoliver Skill Artifacts Builder 2
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
61 - comeonoliver Bundle Nextjs Devtools 2
Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.
61
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 tanstack-query, tanstack-start, web-artifacts-builder. 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.