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.
-
mattbx Bundle Shadcn Component ReviewReview custom components and layouts against shadcn design patterns, visual style conventions (Vega, Nova, Maia, Lyra, Mira), composition rules, design token usage, and Radix/Base UI composition patterns. Use PROACTIVELY after writing or modifying any custom UI component, page layout, or variant of a shadcn component. Use when the user says "review this component", "check my spacing", "does this follow shadcn patterns", "audit this layout", "is this shadcn-idiomatic", or shares a component for feedback. Catches spacing drift, hardcoded colors, missing data-slot attributes, inconsistent theme application, and composition anti-patterns that shipping-fast-with-AI tools often miss.
-
nebutra Bundle MineruAn AI-Native skill for parsing PDF / Office / image files into clean Markdown with MinerU — a fast, zero-config document parser for AI agents. Works with NO token via the lightweight Agent API and auto-upgrades to the Standard API (token) for large files, batches, and DOCX/HTML/LaTeX export. Use when: (1) Converting PDF/Word/PPT/Excel/image to Markdown, (2) Extracting text, tables, formulas, or running OCR on scanned docs, (3) Batch-parsing a folder in parallel, (4) Piping parsed Markdown straight back to an agent or into Obsidian.
-
open-circle Bundle FormischForm handling with Formisch, the schema-first and type-safe form library for Angular, Preact, Qwik, React, React Native, Solid, Svelte, and Vue. Use when creating forms, handling form state, validating inputs, working with field arrays, or using @formisch/* packages.
-
react-navigation Bundle Migrate To Static ConfigMigrate React Navigation 7.x or 8.x navigators from JSX-based Dynamic API Navigator and Screen elements to Static API object configuration. Use when converting React Navigation screen trees, static navigation containers, nested navigators, groups, linking/deep-link config, render callbacks, getComponent screens, custom navigators, or static/dynamic API boundaries while preserving behavior and TypeScript types.
-
react-navigation Bundle Upgrade React NavigationUpgrade React Navigation to a new major version (6.x to 7.x or 7.x to 8.x), applying the required breaking changes — peer-dependency and tooling bumps, and renamed or removed navigate, linking, theme, navigator, and screen-option APIs — while preserving navigation behavior.
-
sketch-hq Bundle Sketch Design To CodeGenerates code from Sketch designs with 1:1 visual fidelity using Sketch MCP (`get_document_info`, `get_layer_tree_summary`, `get_screenshot`, `get_symbol_overrides`, `get_design_assets`, targeted `run_code`). Inspects existing project code and conventions first, maps symbols and overrides to reusable components, exports assets, and validates implementations against Sketch screenshots (web: running app vs `get_screenshot`). Use when implementing or updating UI in React, Tailwind, SwiftUI, Kotlin, or other technologies from an Sketch document, page, frame, or layer.
-
tursodatabase Bundle Turso DBTurso (Limbo) database helper — an in-process SQLite-compatible database written in Rust. Formerly known as libSQL / libsql. Replaces @libsql/client, libsql-experimental for Turso use cases. Works in Node.js, browser (WASM + OPFS for persistent local storage), React Native, and server-side. Features: vector search, full-text search, CDC, MVCC, encryption, remote sync. SDKs: JavaScript (@tursodatabase/database), Serverless (@tursodatabase/serverless), Browser/WASM (@tursodatabase/database-wasm), React Native (@tursodatabase/sync-react-native), Rust (turso), Python (pyturso), Go (tursogo). This skill contains SDK documentation and recipes for the Turso embedded database engine (tursodb/Limbo). Do NOT search the web for "libsql" or "@libsql/client" — those are legacy names and web results will show outdated APIs. Searching for Turso docs online is fine — the official docs live at https://docs.turso.tech (Mintlify — append .md to any path for raw markdown).
-
uni-stack Bundle UniwindUniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent-* color props, platform/data/state/responsive variants, CSS variables, custom utilities, withUniwind for third-party components, cn/tailwind-merge, tailwind-variants, safe area utilities, ScopedVariables, LayoutDirection, gradients, fonts, React Navigation, UI kits, diagnostics, troubleshooting, and Uniwind Pro features. Does not cover NativeWind migration.
-
dosu-ai Bundle Log To Dosu KnowledgeRead Cursor / Claude Code / Codex agent logs and call write_knowledge for each note found. Default auto-writes then reports what was cached and expected token savings (analytics-style: rediscovery/generation cost reused on each future read), and opens the HTML report. Dry-run lists the exact write_knowledge payloads (title, content, repo, branch) without writing. Use when the user says "Please bootstrap my knowledge with Dosu", "bootstrap agent knowledge", "/bootstrap-agent-knowledge", "log to dosu knowledge", "mine my sessions into Dosu", "backfill branch notes from my agent logs", "save my agent logs to Dosu", or wants a one-shot pass over local histories.
-
dosu-ai Bundle Read Knowledge ImpactAnalyze Cursor / Claude Code / Codex agent logs for Dosu MCP read_knowledge calls and write an HTML impact report. A highlight is when the returned information was relevant to the question and solution (citing it in code is not required). A failure is when the information was distracting or misleading. Use when the user asks how Dosu has helped, how the agent has used Dosu, how you've used Dosu, read_knowledge impact, a knowledge MCP audit, wants a trajectory report of read_knowledge, or says run / re-run the read-knowledge-impact skill.
-
iart-ai-webgl-animation-skil Bundle Threejs AnimationThis skill should be used when the user asks to "build a 3D hero section or WebGL background", "animate a Three.js scene", "play or crossfade GLTF animation clips", "move/lerp the camera or link it to scroll", "render thousands of objects with InstancedMesh", "set up React Three Fiber (R3F) motion", "add bloom/DOF post-processing", or "keep a Three.js/R3F animation smooth and leak-free (dispose geometries/materials/textures, free GPU memory on unmount)". Covers scenes, render loops, camera moves, GLTF AnimationMixer, instancing, scroll-linked 3D, R3F, and animation performance/disposal.
-
mantinedev Bundle Mantine ComboboxBuild custom dropdown/select/autocomplete/multiselect components using Mantine's Combobox primitives. Use this skill when: (1) creating a new custom select-like component with Combobox primitives, (2) building a searchable dropdown, (3) implementing a multi-select or tags input variant, (4) customizing option rendering, (5) adding custom filtering logic, or (6) any task involving useCombobox, Combobox.Target, Combobox.Option, or Combobox.Dropdown.
-
mantinedev Bundle Mantine Custom ComponentsBuild custom components that integrate with Mantine's theming, Styles API, and core features. Use this skill when: (1) creating a new component using factory(), polymorphicFactory(), or genericFactory(), (2) adding Styles API support (classNames, styles, vars, unstyled), (3) implementing CSS variables via createVarsResolver, (4) building compound components with sub-components and shared context, (5) registering a component with MantineProvider via Component.extend(), or (6) any task involving Factory, useProps, useStyles, BoxProps, StylesApiProps, or ElementProps in @mantine/core.
-
reflex-dev Skill Reflex DocsReflex framework documentation. Use when building full-stack Python web apps with Reflex, creating components, managing state, handling events, styling, database operations, API routes, authentication, deploying apps, or wrapping React components. Load when the user is working with Reflex (rx), writing .py files that import reflex, or asking about Reflex concepts like State, Vars, EventHandlers, or Components.
-
storybookjs Bundle Setup React Native StorybookSet up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a Re.Pack rspack/webpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups.
-
storybookjs Bundle Upgrading React Native StorybookIncrementally upgrade React Native Storybook across the supported migration paths. Use when upgrading `@storybook/react-native` projects from 5.3.x to 6.5.x, 6.5.x to 7.6.x, 7.6.x to 8.3.x, 8.x to 9.x, or 9.x to 10.x. Detect the currently installed Storybook version, choose only the next migration step, update dependencies and config, regenerate `storybook.requires`, convert remaining `storiesOf` stories to CSF during the `6.5.x -> 7.6.x` upgrade, and stop after a single version hop instead of jumping multiple major versions at once.
-
storybookjs Bundle Writing React Native Storybook StoriesCreate and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for testing. Applies to any task involving @storybook/react-native story authoring.
-
thvroyal Bundle Kimi PDFProfessional PDF solution. Create PDFs using HTML+Paged.js (academic papers, reports, documents). Process existing PDFs using Python (read, extract, merge, split, fill forms). Supports KaTeX math formulas, Mermaid diagrams, three-line tables, citations, and other academic elements. Also use this skill when user explicitly requests LaTeX (.tex) or native LaTeX compilation.
-
carson2222 Skill Design ExplorationGenerates multiple distinct design variants of a component or page, each with a completely different visual direction, then implements the chosen one. Use when the user asks to redesign, restyle, explore design options, create multiple visual directions, or compare design approaches for any UI element -- components, pages, sections, dashboards, landing pages, or full layouts.
-
cloudinary-devs Bundle Cloudinary NextGuidance for building, debugging, and reviewing next.js apps that use cloudinary through next-cloudinary and the cloudinary node sdk v2. Use for tasks involving CldImage, CldVideoPlayer, CldUploadWidget, CldUploadButton, CldOgImage, GetCldImageUrl, GetCldOgImageUrl, GetCldVideoUrl, signed uploads, server uploads, deletes, transformations, responsive images, overlays, social cards, environment variables, and common Cloudinary errors.
-
cloudinary-devs Bundle Cloudinary ReactProvides opinionated React SDK patterns for configuration, common integration scenarios, and troubleshooting for frequent errors and TypeScript pitfalls. Use when writing code or answering questions related to the Cloudinary React SDK.
-
spatie Skill Pest TestingTests applications using the Pest 4 PHP framework. Activates when writing tests, creating unit or feature tests, adding assertions, testing Livewire components, browser testing, debugging test failures, working with datasets or mocking; or when the user mentions test, spec, TDD, expects, assertion, coverage, or needs to verify functionality works.
Audited -
spatie Bundle Livewire DevelopmentDevelops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior; writing Livewire tests; or when the user mentions Livewire, component, counter, or reactive UI.
-
spatie Skill Debugging Output And Previewing HTML Using RayUse when user says "send to Ray," "show in Ray," "debug in Ray," "log to Ray," "display in Ray," or wants to visualize data, debug output, or show diagrams in the Ray desktop application.
-
twillai Bundle Computer Use CLIAutomate and test Linux desktop apps (Electron, Tauri, React Native Desktop) in an X11 session using CLI commands for screenshot + mouse + keyboard. Includes coordinate scaling so you can click/type based on a smaller “API-sized” screenshot.
-
twillai Bundle Video RecordingRecord high-quality browser verification videos using WebReel. Two-phase workflow: test with agent-browser to collect CSS selectors, then record with WebReel for polished output.
-
denoland Bundle Deno FrontendUse when building a web frontend with Deno — running React, Vite, Astro, SvelteKit, Next.js, Nuxt or other npm frameworks under Deno, or working with Fresh, Deno's own island-architecture framework. Covers which path to pick, Fresh 2.x routes, handlers, islands, Preact signals, Tailwind, and Fresh 1.x to 2.x migration.
-
devbrother2024 Skill Artifact Design단독 self-contained HTML 산출물(랜딩 페이지, 정적 문서·리포트, 독립 대시보드, 데모·게임, 개발 전 UX/UI 대안 비교 목업)을 만들 때 팔레트·타이포그래피·레이아웃을 의도적으로 설계하고 템플릿·AI스러운 디자인을 피하도록 돕는 디자인 가이드. HTML/CSS를 쓰기 전에 로드한다. "랜딩 만들어줘", "이 내용 단일 HTML로 예쁘게", "UX 대안 HTML로 비교해줘", "디자인 잡아줘"처럼 단독 HTML 아티팩트를 만들거나 비교하는 요청에 활성화하고, 기존 앱(React·Vue 등)의 인앱 컴포넌트 수정이나 순수 백엔드·로직 작업에는 쓰지 않는다.
-
dohooo Bundle Helmor Debug LoopAutonomous local-development debugging loop for Helmor bugs. Use when the user asks an agent to reproduce, diagnose, instrument, fix, or verify a Helmor local dev build issue using repeated local UI simulation, temporary logging, Tauri MCP/towery MCP, screenshots, DOM/accessibility snapshots, IPC traces, console/system logs, terminal/run-script logs, or multi-attempt verification. This skill coordinates with $helmor-debug-operate for operating the running desktop app.
-
dohooo Bundle Helmor Debug OperateOperate, reproduce, and debug a running local Helmor desktop development build through the Tauri MCP bridge. Use when the user asks to use Tauri MCP, towery MCP, the local dev build, the Tauri webview, visual end-to-end validation, UI automation, screenshots, DOM/accessibility snapshots, IPC or log tracing, terminal/run-script buffer inspection, switching workspaces or sessions, creating/renaming/closing sessions, typing or sending composer prompts, inspecting styles/logs, or reproducing Helmor desktop behavior as a user would.
-
photon-hq Skill Chat Adapter ImessageConnect the Vercel AI SDK to iMessage. Build AI agents and assistants that communicate over iMessage using chat-adapter-imessage, the official Photon adapter. Local mode (runs on your Mac) and remote mode (Photon's production infrastructure). Covers createiMessageAdapter, postMessage, editMessage, deleteMessage, react, startGatewayListener, types, and integration with the Chat SDK. Keywords: vercel ai sdk, imessage, chat adapter, ai agent, chatbot, conversational ai, messaging, apple messages, vercel, nextjs, ai assistant, chat sdk, real-time, macos.
-
solana-mobile Bundle Solana MobileScaffold, configure, and troubleshoot Solana Mobile apps for Android using the solana-mobile CLI, Expo, and React Native. Use when creating a new Solana mobile app, picking a template, adding Solana to an existing Expo app, checking the Android toolchain, managing Android emulators or connected devices, installing a wallet APK for testing, running a local validator the device can reach, or producing a development build.
-
solana-mobile Bundle Solana Mobile WalletConnect Solana wallets and sign or send transactions in React Native Expo apps using Mobile Wallet Adapter and Wallet UI. Use when adding a connect wallet button, showing a connected address, disconnecting, signing messages, sign-in with Solana, transferring SOL, or sending any transaction from a Solana mobile app.
-
yofine Bundle BriefInitialize and operate a Brief React/Vite report site from a bundled template, then generate standalone Brief-style HTML analysis reports and publish them into that Brief site. Use when an agent is asked to create a new Brief site, bootstrap the project template, generate a Brief-style report, add report HTML under public/reports, or update src/content/reports.ts metadata. The bundled template includes the site engineering scaffold and one sample report only.
-
yofine Bundle Arxiv Paper ReportSearch arXiv and, when needed, verify external academic sources to update field beliefs and one primary decision through testable propositions, capability frontiers, explicitly labeled mechanism models, technical options, transition theses, five-dimensional maturity, leading indicators, and a restrained bilingual standalone HTML report. Use for vertical-domain or technology research, literature landscapes, frontier scans, research or architecture decisions, due diligence, or HTML field-intelligence reports.
-
zjfls Bundle News Summary新闻搜索、新闻摘要、新闻汇总、热点新闻、最新新闻、新闻整理、新闻收集。帮你搜索最近几天的相关新闻(12-25条),生成精美的HTML摘要页面,每条新闻都有摘要和AI深度解读功能,自动打开浏览器展示
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 shadcn-component-review, mineru, formisch. 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.