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.
-
netresearch Bundle Markdown To PDFUse when converting one or more Markdown files into PDFs. Triggers on "convert to PDF", "make PDF", "export PDF", "markdown to PDF". Generic conversion via WeasyPrint with a neutral default stylesheet; pass `--css` to apply your own branded styling.
-
nedcodes-ok Bundle Cursor Rules CollectionBattle-tested rules for AI coding agents. 10 skills covering React, Next.js, TypeScript, Express, Python, error handling, testing, security, API design, and performance. Each rule targets specific, concrete behaviors that actually change agent output — not generic best practices. Use when writing, reviewing, or refactoring code in any of these stacks.
-
neddtu Bundle Zalo Mini AppBuild Zalo Mini Apps - lightweight React web apps running inside the Zalo super-app. Use for Zalo Mini App setup, zmp-cli/devtools, ZaUI 1.11.x components, zmp-sdk APIs, permissions, token-based phone number flow, user info, storage, local file storage, camera/media, document preview, payment/Checkout, Open APIs, partner APIs, KYB/eKYC, publication, testing, and Zalo design guidelines.
-
needle-tools Bundle Needle EngineProvides Needle Engine context for web-based 3D projects built on Three.js with the @needle-tools/engine component system. Use this skill whenever the user is working with Needle Engine components, GLB files exported from Unity or Blender, Vite configs with needlePlugins, TypeScript classes extending Behaviour, or anything involving @needle-tools/engine imports. Also trigger when the user mentions "needle engine", "needle tools", serializable decorators (@serializable, @syncField, @registerType), the <needle-engine> web component, 3D web apps using a component system on Three.js, or 3D scenes loaded from GLB in a web context — even if they don't explicitly name the engine. Trigger even when the user is just reporting a bug or error without mentioning Needle Engine — check if @needle-tools/engine is in package.json or imports. If the project uses Needle Engine, always load this skill.
-
netresearch Bundle Typo3 A11YUse when building accessible navigation, forms, filters, tables, skip links, disclosure widgets, or reviewing frontend code for accessibility in TYPO3 v13/v14 LTS projects. Also covers frontend implementation patterns: sticky header, lazy loading, breadcrumb, language switcher, animations, scroll-to-anchor, skeleton loading, toast notifications, back-to-top. Covers WCAG 2.2 AA: ARIA attributes, focus management, keyboard navigation, screen reader support, color contrast, link identification, heading hierarchy, native dialog element modal (#107443), Camino theme a11y.
-
neethanwu Bundle SlidesBuilds beautiful single-file HTML presentations with professional design, animations, and interactive effects. Triggers when the user wants to create slides, a presentation, a deck, a pitch deck, a talk, a keynote, or a lecture. Activates on "make slides", "build a presentation", "slide deck", "create a deck", "presentation about", "slides for my talk", "pitch deck for", "turn this into slides", "present this", "/slides". Also triggers when user has accumulated content (notes, outlines, research) and wants it turned into a visual presentation.
-
nextaltair Bundle Calibre Catalog ReadRead Calibre catalog data via calibredb over a Content server, and run one-book analysis workflow that writes HTML analysis block back to comments while caching analysis state in SQLite. Use for list/search/id lookups and AI reading pipeline for a selected book.
-
netresearch Bundle Typo3 Frontend PatternsUse when implementing common UI components in TYPO3 v13/v14 LTS sitepackages with Fluid 4/5, TypeScript, and SCSS — sticky header, lazy loading, breadcrumb, language switcher, animations, scroll-to-anchor, skeleton loading, toast notifications, back-to-top. Also triggers for: Fluid 5 strict-typed ViewHelpers, Camino theme, native dialog modal, post-v14 external build tools (#108055; see typo3-vite-skill).
-
netresearch Bundle Typo3 Typoscript RefUse when writing, editing, reviewing or debugging TypoScript, TSconfig or Fluid templates in TYPO3 projects (v14.3 LTS is the current target). Also use for code reviews of .typoscript, .tsconfig and Fluid .html files, v13->v14 migration (INCLUDE_TYPOSCRIPT->@import, userFunc opt-in #108054, getTSFE() condition removed, updateReferenceIndex toggle removed, site.locale expression), Fluid 4->5 breaking changes, and when suggesting improvements or checking for deprecated patterns.
-
ng-alain Skill Angular 22 Test Upgrade将测试包装组件的普通属性改为 signal(signal 化)以适配 Angular 22 变更检测,及修复 NzDateAdapter 缺失等 DI 错误。Use when: 测试里 fixture.componentInstance.xxx = value 赋值后 fixture.detectChanges() 不刷新、pipe/component 测试断言拿到旧值、需要把测试组件属性改成 signal、TestBed 强制 OnPush/zoneless 兼容、No provider found for NzDateAdapter、NG0201。
-
ng-select Skill VerifyUse when verifying an ng-select change at runtime — launching the demo app, driving a component behavior in the browser, or running the repo's test/lint/build pipeline before claiming a change works.
-
netresearch Bundle Typo3 ViteUse when configuring Vite 7 for TYPO3 v13/v14 LTS projects, setting up SCSS architecture with Bootstrap 5.3 theming, creating entrypoints per content element, optimizing SVGs, configuring PostCSS (autoprefixer, cssnano), loading local fonts, or customizing Bootstrap variables. v14 removed core asset concat/compression (#108055) — external build tool is now mandatory. Also triggers for: asset hashing, Gzip/Brotli compression, SCSS import chain, post-v14 frontend build pipelines, stale page cache after a build.
-
nhxhnhq Bundle Pattern5This skill should be used when the user is creating a new feature, choosing an implementation approach, setting up a project, making a technology decision, adding a new component or module, onboarding to a codebase, or discussing architectural trade-offs. It should NOT be used for syntax questions, debugging runtime errors, general programming knowledge, or tasks unrelated to the connected codebase.
-
nlj626 Bundle HTML To PPTX将 html-ppt 演示文稿一键转换为 PPTX。触发词:导出 PPTX、转成 PPT、HTML 变 PPTX、convert to pptx、导出给同事、PPTX 导出。当用户有一份 html-ppt 生成的 HTML 演示文稿(index.html),想要转换为 .pptx 格式时使用。也适用于用户说'把这个 HTML 发给同事'、'他们只接受 PPT'等场景。
-
nikistyxx Bundle Comms DashboardBuild a personalized communications dashboard that pulls Slack messages, Outlook emails, and Google Docs activity, extracts action items by priority, and renders everything as an interactive HTML file. User chooses between a Standard (clean, professional) or Creative (bold Memphis style with daily tarot card) design. Auto-refreshes hourly during work hours. Use this skill whenever someone asks for a communications dashboard, wants to see what needs their attention across Slack/email/docs, asks about unread messages or action items, says things like 'what's on my plate', 'what do I need to respond to', 'show me my inbox', 'communications overview', 'activity dashboard', or wants a summary of their Slack, email, and Google Docs. Also triggers on: 'standard dashboard', 'clean dashboard', 'professional dashboard', 'creative dashboard', 'fun dashboard', 'colorful dashboard', 'Memphis dashboard', 'whimsical dashboard', 'tarot dashboard'.
-
nilskj Bundle IOS Simulator DebugDebug React Native app in iOS simulator. Execute JavaScript functions via WebSocket, tap/swipe UI elements, take screenshots, inspect accessibility tree, control GPS, and manage app lifecycle. Use when testing or debugging the app during development.
-
nolangz Bundle Data2motion LiteLightweight, script-driven variant of data2motion for turning data into a smooth, on-brand animated chart (one self-contained HTML) — built for a TEXT-ONLY model that cannot see its own output. You never write HTML/CSS/SVG/animation; you extract the data, pick a chart, fill a small JSON spec, and run one build script that owns 100% of the look and the motion, so the result cannot drift from the house template style or lose its smoothness. Use to turn a number/stat/table/CSV/paragraph into a quick animated chart, data reveal, or KPI when you want guaranteed template fidelity with minimal reasoning and no image feedback.
-
nozomio-labs Bundle Nia Public SearchSearch any public code repository or documentation with AI — no API key needed. Query 10k+ indexed sources including React, Next.js, Stripe, Supabase, and more. Powered by Nia (trynia.ai).
-
nvidia Bundle Cutedsl Kernel IntegrationUse when integrating a CuTeDSL/CUTE DSL kernel into cuDNN Frontend as a frontend-only Python API, including APIBase wrappers, lazy cudnn exports, optional cutedsl dependencies, FE OSS documentation, and pytest coverage.
2.2k -
nolangz Bundle Pixel2svg HTMLPixel2SVG-HTML (v2)
-
nolly-studio Bundle Components BuildBuild modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.
-
ningzimu Bundle Awesome AI PptFind, compare, and contribute AI presentation generation, PowerPoint automation, PPTX editing, and slide workflow tools using the awesome-ai-ppt repository. Use this skill when the user asks to choose AI PPT tools, compare HTML-first/image-first/PPTX-native/infrastructure approaches, evaluate whether a GitHub project belongs in awesome-ai-ppt, update the awesome-ai-ppt list, prepare contribution suggestions, report list issues, or help submit an issue or PR for the awesome-ai-ppt repository.
-
nullclaw Skill Nullhub AdminTeach managed nullclaw agents to discover NullHub routes first and then use nullhub api for instance, provider, component, and NullBoiler workflow tasks.
-
nullswan Bundle Pr ScreenshotsCapture before/after screenshots for pull requests to document visual changes. Supports both agent-browser CLI and Playwright Python approaches. Use when creating PRs with UI changes, comparing visual states between branches, documenting frontend changes for code review, or generating visual diff reports.
-
nxxxsooo Bundle Wechat Mp PublisherPrepare blog posts or Markdown for WeChat Official Account, validate and preview WeChat-safe HTML, upload images, and create a draft through the official API. Use when the user asks to publish to 微信公众号, create a WeChat draft, adapt an article for 公众号, or check WeChat HTML compatibility.
-
nyblnet Skill Bento SlidesCreate and edit Bento presentations — single-file .bento.html decks whose document is plain JSON in a "#bento-doc" script block. Use whenever the user wants a slide deck or presentation: starting from NOTHING (it downloads the latest Bento app from bento.page automatically), from source material, or by improving an existing .bento.html. Maps content to the right feature (charts, morph transitions, state slides, ken-burns, motion paths) instead of static text slides, then writes the document JSON in place. Full schema + recipes at https://bento.page/agents.md.
-
noriginmedia Skill Norigin Spatial Navigation ReactUse when building or modifying UIs that need directional focus (arrow keys, TV remotes, gamepads) with the Norigin Spatial Navigation library. Covers `useFocusable`, `FocusContext`, programmatic focus, and common Smart TV / set-top-box patterns.
-
nynuz Bundle Hf Model To APITurns a Hugging Face model that already works in a notebook (text classifier, NER/token-classification, text embedder, or image generator) into a production-grade local FastAPI service, with layered app structure, lifespan model loading + warm-up, batching, input/output validation, health/readiness probes, and correctness + performance evaluation scripts. Use whenever the user wants to "wrap", "serve locally", "turn into an API", or "expose as a FastAPI service" a Hugging Face model or model_id (e.g. BERT classifiers, NER models, sentence-transformers embedders, Stable Diffusion / diffusers image generators), even if they only mention it works in a Jupyter notebook and don't say "FastAPI" explicitly. Does NOT cover frontend/client code, Docker, or cloud deployment — local FastAPI serving only.
-
normlstudio Bundle Norml Wp DeveloperNorml WordPress Copilot Advanced: rebuild Squarespace captures and HTML mockups as editable WordPress in Local, with local-only onboarding before hosting. The CLI-only WordPress development skill for Claude Code, Codex, and Gemini CLI. Develop themes locally and deploy through SSH + Git + GitHub Actions. WP Local is the default local environment (DDEV / Lando / Valet recognized too). Per-project onboarding connects GitHub and SSH, verifies remote WP-CLI, chooses the CI/CD pattern, scaffolds .claude/ inside the theme repo, generates capabilities.md, and records a five-file architecture snapshot. The everyday workflow is edit locally, commit, push, stage, smoke test, promote to prod. **Does NOT make backups.** Every production write gates on a backup acknowledgement. Direct-on-server work is permitted but flagged and logged. Local-first is the default. Use when the user says "build a WordPress theme," "develop a WP site," "set up a new WP project," "init this WP project," "ship to staging," "deploy to productio
-
o0000-code Bundle Paper Search ProFind academic papers across up to 7 sources (OpenAlex / Semantic Scholar / CrossRef / PubMed / arXiv for English, plus native-Chinese retrieval via NSSD 国家哲社文献中心 + yiigle 中华医学期刊) with adjustable depth — Quick scan (5 min) to Audit prep (3 hr). Use when the user wants to find papers, run a literature search, gather references, scope a research topic, search Chinese-language / 中文原生 literature (中文文献/中文核心/CSSCI/C刊/国内研究/国内文献/中华××期刊/心理学报/经济研究), or filter results by journal tier (中科院分区/一区/几区, Q1, JCR/SJR quartile, 影响因子/impact factor, 期刊分区, 顶刊/top journal, '按分区筛'). Triggers on search verbs ('find papers', 'literature search', 'papers about X'), review types ('scoping review', 'systematic review', 'SR prep', 'literature review', 'lit review', 'help me write a lit review'), Chinese ('找文献', '找论文', '论文搜索', '学术检索', '文献检索', '文献综述', '综述前期', '求文献', '中文文献', '中文核心', 'CSSCI', 'C刊', '国内研究', '找中文的'). Outputs Shadcn HTML report + BibTeX/RIS/CSV + PRISMA-S log. Do NOT use for: concept explanations ('what is X' / 'X 是什么', e.g. '影响因子
-
oekazuma Skill Analyzer Bump PrTake a Renovate PR that bumps `svelte-vitals` / `@svelte-vitals/core` from red CI to merge-ready in this repo — rebuild the committed `dist/`, write the changeset the release requires, verify, and push. Use this whenever a dependency-update PR here is mentioned at all: "handle this Renovate PR", "CI is failing on PR #N", "write the changeset for the analyzer update", "it says dist is stale", or a bare PR link. Also use it when bumping those two packages by hand. Reach for it even when the ask sounds like a one-line fix ("just rebuild dist") — the rebuild alone leaves the release silently broken, and this skill covers the rest. Step 1 tells you how to bow out if the PR turns out to bump something else, so a wrong guess costs one command.
-
ofershap Skill Expo Best PracticesExpo and React Native done right. Expo Router, EAS Build, native modules, platform-specific patterns, and navigation.
-
ofershap Skill Shadcn Best Practicesshadcn/ui done right. Component customization, form patterns, theming, accessibility, and composition patterns.
-
ofershap Skill Sveltekit Best PracticesSvelteKit and Svelte 5 done right. Runes, load functions, form actions, SSR patterns, and modern Svelte.
-
ofershap Skill Tailwind Best PracticesStop your AI agent from generating Tailwind CSS v3 code. Rules for v4 syntax, CSS-first config, modern utility patterns, and common anti-patterns.
-
ocyss Bundle Nuxt UIBuild UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
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 markdown-to-pdf, cursor-rules-collection, zalo-mini-app. 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.