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.
-
xrnavigation Bundle Hostile Pattern DetectionDetects and prevents hostile-by-design UI patterns that disproportionately harm disabled users. Auto-invokes when creating carousels, infinite scroll, hover-only interactions, auto-playing media, CAPTCHAs, cookie consent banners, or when considering accessibility overlay widgets. These patterns may be technically "fixable" but are fundamentally hostile — the skill recommends alternatives.
-
xrnavigation Bundle Accessible Content WritingGuides accessible content writing — link text, error messages, alt text as craft, plain language, headings as navigation, and microcopy. Auto-invokes when writing UI text, link labels, error messages, button labels, form instructions, or heading structures. Content is an interface — bad content is an accessibility barrier.
-
xrnavigation Bundle At Experience VerificationHelps verify accessibility by describing what assistive technology users actually experience — what screen readers announce, what keyboard navigation feels like, what broken focus sounds like. Auto-invokes when writing forms, headings, ARIA, or interactive components. User-invocable for full AT experience walkthrough of a component.
-
xrnavigation Bundle Cognitive Neurodivergent ExperienceGuides understanding of how cognitive disabilities and neurodivergence affect web interaction — why timeouts cause panic, why unpredictability causes distress, why sensory overload is pain not preference. Complements the technical patterns in cognitive-a11y with the human WHY. Auto-invokes when creating animations, multi-step flows, timed interactions, or notification-heavy interfaces.
-
yinqd3 Bundle Frontend Slides创建精美的 HTML 演示文稿,支持从零创建、PPTX 转网页、或增强已有 HTML 演示。零依赖单文件,固定 16:9 比例,34 种设计模板。用户说要"做PPT""做演示文稿""创建slides""转换PPTX"时使用。
Audited -
yugasun Skill UI MockupGenerate HTML/CSS mockups for UI design. Produces browser-previewable mockup files with placeholder data. Use when the user says ui-mockup, mockup, design UI, wireframe, or needs visual reference for a feature.
-
yugasun Bundle Improve Codebase ArchitectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick. Use when the user says architecture review, codebase health, deepening, refactor suggestions, or complains about architectural friction.
-
toy-crane Bundle Expo Dev LoopVerify Expo and React Native changes in a running app with agent-device. Use after editing screens, navigation, interactions, app configuration, config plugins, native dependencies, permissions, startup behavior, or performance, or whenever the user asks to confirm an Expo change on an iOS or Android simulator, emulator, or physical device. Establish target readiness and the scenario's required state, classify whether the change can use the Metro fast path or requires a native rebuild, then finish only with observable runtime evidence.
-
toy-crane Bundle Expo Smoke TestVerify an Expo or React Native change together with the app's core loop on both iOS and Android using agent-device. Use before delivering a change, when the user asks to confirm behavior on both platforms, or when the core loop should be exercised again as a regression. Establish runtime readiness and an explicit state profile, coordinate shared prerequisites, then spawn exactly two isolated platform subagents—prefer the installed expo-smoke-runner profile—wait for both, and finish only with separate runtime evidence for each platform. For verifying one change on a single target during ordinary editing, use expo-dev-loop instead.
-
toy-crane Bundle Build PrototypeBuild a complete dummy-data HTML prototype or a temporary comparison of up to three alternatives for a specific user situation. Use to settle a screen-based product before implementation or resolve a visual or interaction decision during shaping or prototype review. Do not use for production implementation or CLI, terminal, or voice interfaces.
-
mono Bundle Issue TriageTriage a SkiaSharp GitHub issue or PR into structured JSON with classification (type, area, platform, severity), suggested response, automatable actions, and companion Markdown/HTML reports. Triggers: "triage #123", "triage issue", "classify issue", "analyze issue", "what's this issue about". Also triggered when an issue number is given after the issue-triage skill is already mentioned.
Audited -
mono Bundle Security AuditAudit SkiaSharp's native dependencies for security vulnerabilities and CVEs, including Component Governance (CG) alerts from the combined skiasharp-package Azure DevOps pipeline. Read-only investigation that produces a status report with recommendations. Use when user asks to: - Audit security issues or CVEs - Check CVE status across dependencies - Find security-related issues and their PR coverage - Get an overview of open vulnerabilities - See what security work is pending - Check Component Governance alerts - Review CG alerts from the official combined Build pipeline Triggers: "security audit", "audit CVEs", "CVE status", "what security issues are open", "check vulnerability status", "security overview", "what CVEs need fixing", "CG alerts", "component governance", "check container CVEs". This skill is READ-ONLY. To actually fix issues, use the `native-dependency-update` skill.
Audited -
piperubio Bundle PandocConvert documents between 40+ formats using Pandoc. Prioritizes Docker via the pandoc/extra image (no local LaTeX required). Handles Markdown→PDF/DOCX/HTML/LaTeX, Beamer and reveal.js presentations, citations with BibTeX/CSL, Eisvogel template for polished PDFs, YAML frontmatter validation, and batch conversions. Use when user mentions pandoc, document conversion, PDF generation from Markdown, academic papers with citations, Word export, or slide presentations.
Audited -
limecloud Bundle Article Typesetting Master文章排版大师。将原始文章内容排版为视觉精美、阅读舒适、适配多平台的成品格式。 支持Markdown/HTML/排版规则指南三种输出模式,按场景自动切换。 内置标题层级系统、段落节奏引擎、配色方案库、图文混排指导和多平台适配规范。 当用户需要文章排版、美化排版、公众号排版、排版优化、格式美化、 图文排版、文章格式化、内容美化、版式设计时触发。 触发词:排版、美化、格式化、排版优化、公众号排版、文章排版、 图文排版、版面设计、内容美化、格式美化、排版规范
-
aipentest Skill Component Vuln Intel联网情报收集:识别组件后必做CVE/搜索引擎/中文社区/GitHub PoC/资产引擎/即时情报/依赖扩展+受阻换路。Use when a framework/component/version is identified and must search before exploit.
-
akarachen Bundle Eric ReactApply Eric's React and TSX component standards. Use when implementing, refactoring, or reviewing React components, hooks, providers, JSX/TSX props, local component state, memoization, effects, or React-specific tests in Eric's style.
-
akarachen Bundle Eric TauriApply when choosing Tauri or implementing and reviewing Tauri command responsiveness, async execution, contracts, or frontend/native integration.
-
akarachen Bundle Eric ReviewReview code using Eric's standards. Use when the user asks for review, code review, frontend review, backend review, desktop review, React review, architecture review, PR review, or asks whether code matches Eric's style; prioritize concrete bugs, risks, overengineering, style drift, and missing focused tests.
-
akarachen Bundle Eric FrontendApply Eric's frontend coding standards. Use when implementing, refactoring, or reviewing frontend web/app UI code, TanStack Query usage, feature-folder organization, styling boundaries, app-vs-website UI decisions, frontend state, or frontend tests in Eric's style. For React-specific components, hooks, providers, memoization, effects, or local reducer work, also use $eric-react.
-
eho Bundle Expo ScaffoldCreate, bootstrap, initialize, or scaffold a brand-new React Native Expo app or Expo-centered monorepo with Expo Router, Expo SDK 55 by default, expo-dev-client, NativeWind, official gluestack setup via expo-gluestack-setup, starter gluestack components, EAS Build, and EAS Update. Use this skill only when the user is starting a new project/starter/scaffold or explicitly asks to use expo-scaffold. Do not use it for general Expo questions, code review, debugging, verification, postmortems, or existing-project changes unless the user explicitly requests a new scaffold or directly names this skill. For existing Expo apps, use a narrower skill only when the user explicitly asks to configure, set up, install, repair, or verify that specific system.
Audited -
eho Bundle Expo Gluestack SetupAdd, configure, set up, install, repair, or verify gluestack-ui for an existing Expo or React Native project only when the user explicitly asks for gluestack setup/configuration/installation/repair/verification, directly names expo-gluestack-setup, or a new-project scaffold workflow invokes it for a gluestack handoff. Do not use this skill for general gluestack questions, error explanations, code review, postmortems, design advice, or unrelated Expo/NativeWind work unless the user explicitly requests this skill or asks to configure/setup/repair gluestack in the existing project.
-
eho Bundle IOS Simulator AutomationCoordinate reliable iOS Simulator verification across project-native commands, simctl, agent-device, and serve-sim. Use for repeated or cross-agent flows, Expo development clients, authentication, system surfaces, accessibility matrices, recovery, or formal evidence handoff.
Audited -
gr8monk3ys Skill API DevelopmentWHEN to auto-invoke: Creating API routes, building endpoints, adding route.ts files, implementing REST/GraphQL APIs, adding authentication to APIs, rate limiting, API validation with Zod, handling HTTP methods (GET/POST/PUT/DELETE). WHEN NOT to invoke: Pure frontend work, styling, React components without API calls, documentation-only tasks, database migrations without API changes.
-
gr8monk3ys Skill Database OperationsWHEN to auto-invoke: Database schema design, creating migrations, writing SQL queries, query optimization, Supabase operations, Prisma/Drizzle schema changes, PostgreSQL tasks, RLS policies, indexes. WHEN NOT to invoke: Pure frontend work, API logic without database, styling, React components, deployment tasks.
-
gr8monk3ys Skill Frontend DevelopmentWHEN to auto-invoke: Creating UI components, building React/Vue/Svelte components, Next.js pages, styling with Tailwind/CSS, state management setup, form handling, accessibility improvements, client-side interactivity. WHEN NOT to invoke: API-only work, database operations, backend logic, DevOps/deployment, pure testing without UI.
-
lstm-kirigaya Bundle Port Manager为本地开发服务器分配并注入唯一端口号,防止同一台电脑上多个项目的端口冲突。启动任何开发服务器前,务必先通过 portman 脚本从 ~/.port-man 获取端口,并以 PORT=<端口> 原命令 的方式注入启动(例如 PORT=3001 npm run dev)。适用于:(1) 启动 Vite、Webpack、Next.js、后端 API 等开发服务器,(2) 配置多服务项目,(3) 避免与已有项目占用 3000、8080 等常用端口冲突,(4) 查看或更新 ~/.port-man 全局端口注册表。
Audited -
lstm-kirigaya Bundle Rn App Builder基于真实项目沉淀的 React Native 移动端 App 一键构建方案。覆盖 Expo 初始化、monorepo 共享包、鉴权路由、API 适配、主题系统与构建发布。
-
lstm-kirigaya Bundle Tauri Devtools用于调试 Tauri 应用的 MCP 工具集,提供截图、DOM 检查、元素交互、IPC 监控等功能。Use when working with Tauri applications for: (1) Debugging UI issues with screenshots and DOM inspection, (2) Automating UI interactions like clicks and input, (3) Monitoring IPC communication between frontend and backend, (4) Managing Tauri windows and sessions, (5) Reading console and system logs.
-
lstm-kirigaya Bundle Duckduckgo SearchIntegrate DuckDuckGo web search into a Rust project by calling Bing and DuckDuckGo HTTP APIs directly with browser fingerprint simulation. Use when building search functionality that needs text, news, image, or video results without relying on third-party CLI wrappers. Covers the primp HTTP client, vqd token extraction, Bing HTML parsing, DuckDuckGo JSON APIs, and cross-language HTTP concepts.
-
lstm-kirigaya Bundle Dust Tarui Layout通用 Tauri 桌面端 UI 布局模板,复现 DiskRookie 风格的无边框窗口外壳、粘性顶栏、主内容滚动区与专家模式分栏结构。适用于从 0 到 1 快速构建类似布局的客户端软件(如笔记管理、即时通讯等)。基于 Tauri 2 + React + MUI + Tailwind。
-
lstm-kirigaya Bundle Jinhui Stack Debug网站和小程序调试的依赖关系排查指南。当调试陷入僵局时,Use this skill to systematically identify which dependency layer is causing the issue: (1) Data dependencies - verify backend before debugging frontend, (2) Environment differences - local vs production issues, (3) Version compatibility - library/framework mismatches, (4) Configuration errors - missing or incorrect configs, (5) State management - component/app state problems, (6) Network layer - CORS, timeouts, connectivity, (7) Permission/authorization - auth and access control, (8) Caching issues - stale code or data, (9) Build process - compilation and bundling problems, (10) Runtime environment - browser/platform differences.
-
lstm-kirigaya Bundle Admin Console BlueprintUse when you need to design, scaffold, refactor, or document a medium-sized admin console built as an independent Vite/React SPA backed by modular Go admin APIs, Cookie session auth, and CLI-provisioned administrator accounts. Helpful for tasks like planning a new admin console, extracting reusable architecture from an existing console, adding `/api/admin/*` modules, or converting a one-off internal page into a structured admin system.
-
lstm-kirigaya Skill Frontend Coding Standards前端开发准则
-
gabepublic Skill Python Design PatternsPython design patterns including KISS, Separation of Concerns, Single Responsibility, and composition over inheritance. Use this skill when designing a new service or component from scratch and choosing how to layer responsibilities, when refactoring a God class or monolithic function that has grown too large, when deciding whether to add a new abstraction or live with duplication, when evaluating a pull request for structural issues like tight coupling or leaking internal types, when choosing between inheritance and composition for a new class hierarchy, or when a codebase is becoming hard to test because of entangled I/O and business logic.
-
lossless-group Bundle Astro KnotsThe Lossless Group's Astro Knots conventions — vision, tech hierarchy, approved frameworks, and hard prohibitions for the family of ~10+ Astro sites and the Lossless Flavored Markdown ecosystem. Use whenever working on an Astro project in the lossless-monorepo (or any sibling repo), scaffolding new sites, choosing dependencies, building components, integrating LFM, or when the user mentions "Astro Knots", "LFM", "Lossless Flavored Markdown", or "pseudomonorepo". Hard prohibitions on React, JSX, Angular, and unnecessary dependencies.
-
lossless-group Skill Slide TargetLoad the full working context for ONE DidiDecks slide (deck/variant/slot) so an agent can iterate on it slide-by-slide without re-explaining where things live. The first of the `slide-*` skill family (target → improve → rank → decompose). Use whenever the user wants to work on a specific slide of a DidiDecks/Astro deck — "let's work on slide 2", "fix this card", "/slide-target rural-income v1 02", "go slide by slide", "target the funder-pipeline slide" — or when iterating on a client-site deck under dididecks-ai (reach-edu-hub, chroma-decks, etc.). Assembles the section file, the slides.ts slot, the narrative slot, the rank/audit status, the live URLs, and the design-system tokens for exactly that slide, then scopes all work to it. Composes with deck-iteration-workflow and theme-system.
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 pandoc, hostile-pattern-detection, accessible-content-writing. 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.