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.
-
alexknowshtml Bundle Pretty PageConvert markdown to a beautifully styled, shareable HTML page and upload to S3-compatible storage
-
alvinindra Bundle Modern Frontend NightsideDirection for moody premium dark pages — restaurants, hospitality, luxury services, after-hours brand worlds, refined dark SaaS, and any product that should feel late-night, considered, and exclusive. Enter through the parent pack at ../SKILL.md.
-
alvinindra Bundle Modern Frontend Cinematic ScrollDirection for scroll-driven cinematic pages — hardware launches, premium tech, brand showcases, agency case studies, immersive product narratives, and Awwwards-grade landing pages where the product is the protagonist of the page. Enter through the parent pack at ../SKILL.md.
-
alvinindra Bundle Modern Frontend Considered ModernDirection for humane, polished company sites that should read "real people, considered work" instead of "tech startup". Use for agencies, professional service brands (legal, finance, consultancy, architecture), consumer products with maker-led tone, modern company sites, and any brand whose page should feel contemporary without being cold. Enter through the parent pack at ../SKILL.md.
-
amanaiproduct Bundle Deploy Private Cloudflare SiteDeploy, protect, debug, and verify a private Cloudflare Workers site for an exact user or email allowlist. Use for Workers or framework sites that must require Cloudflare Access, Google OAuth, or another SSO boundary; when protecting Workers Static Assets and framework chunks; when Wrangler/headless OAuth, secrets, workers.dev routes, errors 1042/1101, or unhydrated pages cause trouble; and when proving that anonymous users cannot retrieve sensitive HTML or assets.
-
ananthanandanan Bundle Review BoardGenerate a single-file HTML "story-paced" walkthrough of a finished feature for human code review. Use after completing a feature or merging a PR — produces docs/review/<slug>.html with sidebar nav, Why/Tradeoff/Deferred callouts, status pills, and a reviewer's checklist.
-
ananthanandanan Bundle Visualise PlanProduce a visual HTML implementation plan for a feature BEFORE writing any code. Use this skill whenever the user invokes /ank:visualise-plan, asks for an "implementation plan", says "plan this out before you build it", asks you to "visualise the plan", or otherwise signals they want to review the approach as a document before code is written. The skill assumes all clarifying questions about the feature have already been answered in this conversation — its job is to crystallise that context into a single reviewable HTML file at docs/plan/<feature-slug>.html and then HARD STOP, waiting for the user to type "approved" (or send edits) before any implementation begins.
-
mzored Skill Skiphow Fast FixesIterate on a local screen or other visible result with the owner before delivery. Use for small copy, layout, and frontend changes shown on a running dev preview, with feedback checkpoints and deferred delivery tests. A request to ship uses the delivery workflow.
-
neeeophytee Bundle Map Provenance SurvivalCompare an original asset with resized, converted, uploaded, or downloaded derivatives and produce a JSON, Markdown, or HTML provenance-survival report. Use when testing whether a CMS, image optimizer, social network, editor, screenshot, watermark-removal tool, or publishing workflow preserves Content Credentials.
-
nethermindeth Skill PortingGuides Go→Rust porting for Pluto. Invoke when asked to port, implement parity for, or translate a Go component.
-
nethermindeth Skill Charon GuideUse when porting Charon components to understand Go codebase architecture, workflow, design patterns, or component responsibilities
-
nextcloud Bundle Nextcloud PHP AppBuilds a Nextcloud app in PHP, the kind that runs inside the Nextcloud process, from an empty directory to a release tarball: manifest and bootstrap class, attribute routes, templates and page scripts, navigation, database migrations and entities, admin settings, a Vue and Vite frontend, PHPUnit, Psalm and php-cs-fixer, packaging, and browser-level verification with Playwright against a real instance. Use when creating a Nextcloud app, adding a page, route, table or settings section to one, or setting up tests and a release for it. For services that run in their own container, use exapp-development instead.
-
nextcloud Bundle Nextcloud AI StackInstalls, verifies and debugs Nextcloud's AI features end to end: the Assistant frontend, the server's Task Processing engine, and the provider apps behind it (llm2, translate2, stt_whisper2, text2image_stablediffusion2, context_chat) whether they run as local ExApps or as external API integrations. Use for "set up AI on my Nextcloud", "which app provides which task type", "the Assistant shows nothing", "my AI task never finishes", GPU versus CPU decisions, and model storage or download problems.
-
ng-zorro Skill Feature SyncSync an Ant Design React component or feature into NG-ZORRO. Use when checking or porting upstream APIs, behavior, styles, demos, documentation, or tests.
-
nicknisi Bundle IdeationYou MUST use this before building any new feature, planning a migration, designing a system, or turning a decided-on idea into a plan. Triggers on: feature requests, project ideas, brain dumps, 'help me plan,' 'spec this out,' 'interview me,' 'I want to build,' 'let's design,' or any unstructured idea you're ready to turn into code. Covers small single-spec projects through multi-phase initiatives. Runs a conversational interview, writes an interactive HTML contract, then generates implementation-ready Markdown specs. This is the planning-HOW stage: if the user is still deciding WHETHER to build — weighing options, pressure-testing a rough idea, 'should I…' — that's the lighter-weight /ideation:brainstorm skill, and ideation takes over once they've committed to build — its intake carries a brainstorm conclusion forward as starting evidence. Skip ONLY for well-defined implementation tasks (writing code to a known spec, fixing bugs, refactoring, explaining code).
-
product-on-purpose Bundle Critique UsabilityReviews HTML or markdown UI specs, wireframe write-ups, and page mockups against Nielsen's 10 usability heuristics: system status, user control and exits, consistency, error prevention and recovery, recognition over recall, and minimalist design. Judges the interface's flow, controls, and states, not the wording of error or empty-state message text (critique-microcopy covers that), and not conformance against accessibility standards such as contrast or screen-reader access (critique-accessibility covers that). Use when the user asks for a usability review, design feedback, a second opinion, a red-line pass, a heuristic evaluation, or a quality check on a screen, a flow, or an interface spec before it goes to build. Covers static specs and mockups, not live running applications.
-
product-on-purpose Bundle Critique AccessibilityReviews HTML pages and fragments (markdown where mappable) against WCAG 2.2 AA: contrast, alt text, heading hierarchy for screen readers, link text, and keyboard and screen-reader access. Judges conformance against WCAG, not an interface's general usability, flow, or controls (critique-usability covers that). Use when the user asks for an accessibility review, feedback, a second opinion, a red-line pass, an a11y audit, or a pre-launch quality check on a page or component.
-
rilldata Bundle Svelte Core BestpracticesGuidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.
-
riwonswain-ovo Bundle Resume Tailor制作、重排或更新中文简历时使用。先询问用户是否已有简历:已有简历时保留原有内容,只迁移到固定 ASu 单栏 HTML/PDF 版式;从零制作时,以 experience-deepthink 的项目介绍逐字稿为实习/项目正文来源,并把用户补充素材默认归入项目经历候选。先确认 Markdown,再生成可编辑 HTML 和最多两页 A4 PDF;不得擅自改写已有简历、替用户选择经历、编造事实或代为投递。
-
rssnext Skill Update DepsUpdate all dependencies across frontend and backend projects. Reads changelogs for breaking changes, checks affected code, runs tests, and provides a summary. Use when updating npm dependencies across the monorepo.
-
ruhedanghaoyigexuesheng Bundle Performance Test Report根据用户提供的性能测试结果截图(1张或多张)和文字描述进行性能分析,识别可能瓶颈并给出优化建议,输出一份 HTML 格式的性能分析报告。当用户提供压测截图、性能测试结果并要求分析或生成报告时使用。
-
the-vibe-company Bundle Design Frontend DevClean Impeccable frontend design skill. Use when the user wants to design, redesign, critique, audit, polish, harden, optimize, adapt, clarify, colorize, animate, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, onboarding, empty states, accessibility, responsive behavior, visual hierarchy, UX copy, motion, design systems, anti-pattern detection, and AI-looking UI cleanup. This clean Companion edition is agent-only: no CLI, no hooks, no live mode, no install commands, no external commercial workflow.
-
thejdubb02 Bundle Visual ExplainerGenerate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
-
thericardoli Bundle Zama SdkUse this when a TypeScript application needs to interact with Zama FHEVM/confidential contracts. Covers browser and React dApps with @zama-fhe/sdk and @zama-fhe/react-sdk, wagmi/viem/ethers wallet integration, Node scripts or backend services, local cleartext development, relayer configuration, encrypted inputs, user/public/delegated decryption, and ERC7984 confidential token workflows.
-
thericardoli Bundle Zama Fullstack DappUse when orchestrating a complete Zama FHEVM dApp across Solidity contracts, Hardhat or Foundry, local development chains, Sepolia/mainnet deployment, @zama-fhe/sdk or @zama-fhe/react-sdk, React/Node clients, ABI/address artifacts, monorepo structure, and end-to-end validation.
-
thericardoli Bundle Zama Fhevm Security ReviewUse for audits, reviews, threat modeling, or fixes involving Zama FHEVM confidential contracts and SDK/frontend integrations. Covers encrypted input proofs, ACL/handle permissions, user/public decryption, async callback replay, silent failures, unchecked encrypted arithmetic, transient allowances, account abstraction/reorg/finality risks, HCU, ERC7984/wrappers, Relayer SDK, React/wagmi, Node services, deployment issues, and testing gaps.
-
tonylofgren Bundle EsphomeESPHome device configuration, firmware, and IoT product development. Covers ESP32, ESP32-S3, ESP32-C3, ESP32-C6, ESP32-H2, ESP32-P4, ESP8266, RP2040, RP2350, nRF52, LibreTiny, Shelly, Sonoff, Tuya, BLE proxy, Matter firmware, Thread, Zigbee, GPIO, sensor YAML, LVGL displays, LED strips, voice assistant hardware, device flashing, Arduino conversion, alarm_control_panel, lock, valve, media_player, microphone, speaker, audio DAC, event entities, datetime entities, Z-Wave proxy, MIPI DSI displays, and DLMS smart meters. Also covers designing new ESPHome-based products: hardware selection, component sourcing, PCB design (KiCad), enclosures, 3D printing, CE/FCC certification, BOM optimization, and manufacturing from prototype to production scale.
-
tonylofgren Bundle Ha Dashboard DesignBeautiful, copy-paste-ready Home Assistant dashboard designs with complete CSS themes, card-mod styles, and button-card templates. Nine distinct visual styles: Glassmorphism, Dark Minimal, Material You, Nordic, Neon/Cyberpunk, Warm Home, Soft Pastel, Luxury Gold, and Retro Terminal. Use this skill whenever the user wants to make their dashboard look good, asks about card styling, CSS for Home Assistant, card-mod, button-card templates, Lovelace themes, dashboard aesthetics, or wants a specific visual style - even if they don't use the words "design" or "CSS".
-
trugurpala Bundle Quality ReviewReview an implementation or diff for material engineering quality issues after code is written or before it is declared ready. Focus on correctness, maintainability, type design, architecture, data integrity, reliability, security, product UX, testing, accessibility, and unnecessary complexity.
-
unlayer Bundle Unlayer ExportExports content from the Unlayer editor — HTML, PDF, image, plain text, saving and loading design JSON, auto-save patterns, server-side Cloud API export.
-
unlayer Bundle Unlayer ElementsBuild emails, pages, and documents in code with @unlayer/react-elements — React components that render to email-safe (table) HTML, responsive web HTML, or print/PDF. Use when generating templates programmatically without the visual editor.
-
unlayer Skill Unlayer IntegrationIntegrates Unlayer's email, page, popup, and document builders into web applications through React, Vue, Angular, or plain JavaScript. Use for builder component setup, props, editor access patterns, and multiple instances. For the standalone Image Editor or @unlayer/react-image-editor, use unlayer-image-editor.
-
unlayer Skill Unlayer Custom ToolsBuilds custom drag-and-drop tools for the Unlayer editor — registering tools, adding property editors, creating custom widgets, head CSS/JS injection, tool configuration, and the custom# prefix convention.
-
unlayer Bundle Unlayer Image EditorIntegrates and configures Unlayer's standalone Image Editor through the JavaScript embed or the official @unlayer/react-image-editor component. Use for mounting the standalone editor, editing or resetting images, handling save/cancel/error callbacks, configuring manual tools, icons, dock position, theme, localization, and enabling the paid AI Assistant. Do not use for the image editor built into Unlayer's email, page, popup, or document builders; route that configuration to unlayer-config.
-
vercel-labs Skill Python On VercelCompanion skill for the Python on Vercel course on Vercel Academy. Use when the user mentions "Python on Vercel", "the course", "teach me", or asks about FastAPI, Next.js, vercel dev, or deploying Python and Next.js together in the context of the Academy course.
28.7k -
viacheslav-tronko Skill Concept ExplanationEvidence-bound investigation producing a falsifiable architectural mental model of a code concept, pattern, term, or component in large legacy codebases. Use WHENEVER user asks WHAT/HOW/WHERE about code — /explain, "explain X", "what is X", "how does X work", "trace this concept across layers", "preflight before bug-fix", "build mental model", "architectural overview", "layer-by-layer explanation", "F/B/D-XXX pattern explanation", or pastes a domain term or component name asking what it does or how it fits. Four modes — --teach (default educational), --brief (≤5pp preflight), --for-bug-fix (≤3pp "Where to dig" 1-pager feeding /bug.why), --deep (full + alternative-design). Falsification-first, anti-hallucination — Step-Back + Architectural Hypothesis BEFORE any code, AST-aware retrieval, hybrid grep+graph subagent fan-out, Cross-Layer Contract Violation Detector, Layer Activation Matrix, ≥1 ◆◆◆ per key claim with Mutation Counterfactual, CoVe Gate 2 factored verification, Citation-Grounded re-read, Mental-Real
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 nextcloud-ai-stack, critique-accessibility, python-on-vercel. 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.