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.
-
thebushidocollective Skill React Native Web CoreUse when working with React Native Web projects. Provides core concepts, components, and cross-platform patterns for building web applications with React Native.
-
thebushidocollective Skill Storybook Component DocumentationUse when creating or improving component documentation in Storybook. Helps generate comprehensive docs using MDX, autodocs, and JSDoc comments.
-
thebushidocollective Skill React Native Native ModulesUse when building or integrating native modules in React Native. Covers creating native modules, Turbo Modules, bridging native code, and accessing platform-specific APIs.
-
thebushidocollective Skill React Native Web StylingUse when styling React Native Web components. Provides patterns for StyleSheet API, platform-specific styles, responsive design, and theming.
-
thebushidocollective Skill React Native Web TestingUse when testing React Native Web applications. Provides patterns for Jest, React Native Testing Library, component testing, and web-specific testing strategies.
-
thebushidocollective Skill React Native Web NavigationUse when implementing navigation in React Native Web projects. Provides patterns for React Navigation, deep linking, and web-specific routing.
-
thebushidocollective Skill React Native Web PerformanceUse when optimizing React Native Web performance. Provides patterns for code splitting, bundle optimization, memoization, and web-specific performance improvements.
-
proffesor-for-testing Bundle A11Y AllyUse when running comprehensive WCAG accessibility audits with axe-core + pa11y + Lighthouse, generating context-aware remediation, or testing video accessibility. Supports 3-tier browser cascade with graceful degradation.
-
proffesor-for-testing Bundle Qe BrowserBrowser automation for QE agents using Vibium (WebDriver BiDi) with assertions, batch execution, visual diff, prompt-injection scanning, and semantic intents. Use when any QE skill needs to drive a real browser — visual testing, accessibility audits, E2E flow verification, pentest validation, or exploratory testing.
-
proffesor-for-testing Skill Qe A11Y AllyComprehensive WCAG accessibility auditing with multi-tool testing (axe-core + pa11y + Lighthouse), TRUE PARALLEL execution with Promise.allSettled, graceful degradation, retry with backoff, context-aware remediation, learning integration, and video accessibility. Uses 3-tier browser cascade: Vibium → agent-browser → Playwright+Stealth.
-
proffesor-for-testing Bundle Accessibility TestingWCAG 2.2 compliance testing, screen reader validation, and inclusive design verification. Use when ensuring legal compliance (ADA, Section 508), testing for disabilities, or building accessible applications for 1 billion disabled users globally.
-
proffesor-for-testing Skill Qe Visual AccessibilityVisual regression testing, responsive design validation, and WCAG accessibility compliance testing.
-
proffesor-for-testing Skill Qe Accessibility TestingWCAG 2.2 compliance testing, screen reader validation, and inclusive design verification. Use when ensuring legal compliance (ADA, Section 508), testing for disabilities, or building accessible applications for 1 billion disabled users globally.
-
proffesor-for-testing Bundle Security Visual TestingSecurity-first visual testing combining URL validation, PII detection, and visual regression with parallel viewport support. Use when testing web applications that handle sensitive data, need visual regression coverage, or require WCAG accessibility compliance.
-
proffesor-for-testing Skill Qe Security Visual TestingSecurity-first visual testing combining URL validation, PII detection, and visual regression with parallel viewport support. Use when testing web applications that handle sensitive data, need visual regression coverage, or require WCAG accessibility compliance.
-
iii-hq Skill Iii ObservabilityOpenTelemetry-backed tracing, structured logs, metrics with rollups, alerts, sampling, and baggage for the engine — emit and query telemetry through `engine::*` functions and react to logs with a `log` trigger.
-
bighardperson Bundle IOS Application DeviOS application development guide covering UIKit, SnapKit, and SwiftUI. Includes touch targets, safe areas, navigation patterns, Dynamic Type, Dark Mode, accessibility, collection views, common UI components, and SwiftUI design guidelines. For detailed references on specific topics, see the reference files. Use when: developing iOS apps, implementing UI, reviewing iOS code, working with UIKit/SnapKit/SwiftUI layouts, building iPhone interfaces, Swift mobile development, Apple HIG compliance, iOS accessibility implementation.
-
bighardperson Bundle BrowserwingControl browser automation through HTTP API. Supports page navigation, element interaction (click, type, select), data extraction, accessibility snapshot analysis, screenshot, JavaScript execution, and batch operations.
-
bighardperson Bundle Android Native DevAndroid native application development and UI design guide. Covers Material Design 3, Kotlin/Compose development, project configuration, accessibility, and build troubleshooting. Read this before Android native application development.
-
bighardperson Bundle Fbs Bookwriter福帮手出品 | 高质量长文档手稿工具链:书籍、手册、白皮书、行业指南、长篇报道、深度专题;支持联网查证(宿主允许时启用,离线自动降级)、S/P/C/B 分层审校、中文排版与 MD/HTML 交付。触发词:福帮手、福帮手写书skill、福帮手写书、写书、出书、写长篇、写手册、写白皮书、写行业指南、协作写书、定大纲、写章节、封面、插图、排版构建、导出、去AI味、质量自检、图文书、写报道、写深度稿、写特稿、写专题、写调查报道、写长文、激活原料、原料盘点、整理素材
-
bighardperson Bundle React Native DevReact Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and engineering (project structure, deployment, SDK upgrades, CI/CD). Use when: building React Native or Expo apps, implementing animations or native UI, managing state, fetching data, writing tests, optimizing performance, deploying to App Store/Play Store, setting up CI/CD, upgrading Expo SDK, or configuring Tailwind/NativeWind.
-
bighardperson Bundle Feishu Send File飞书发送文件技能。用于通过飞书向用户发送普通文件附件(HTML、ZIP、PDF、代码文件等)以及处理“本地图片路径被发成路径文本”的可靠补救场景。普通文件必须先上传获取 `file_key` 再发送;当本地图片用 `message`/`media` 发送后在飞书里只显示 `/root/...png` 路径而不显示图片时,改用本技能内的稳定图片上传脚本(`im/v1/images` -> `image_key` -> `msg_type=image`)。
-
bighardperson Bundle Markdown ToolkitSwiss army knife for Markdown — TOC generator, format conversion (MD↔HTML), broken formatting fixer, HTML stripper, file merger, YAML frontmatter validator, orphan link finder. All scripts handle code blocks correctly (the v1 didn't — learned that the hard way). Not for LaTeX, DOCX, or rich document layout.
-
bighardperson Bundle Baoyu Markdown To HTMLConverts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, PlantUML, footnotes, alerts, infographics, and optional bottom citations for external links. Use when user asks for "markdown to html", "convert md to html", "md 转 html", "微信外链转底部引用", or needs styled HTML output from markdown.
-
bighardperson Bundle Tsa Risk腾讯云智能顾问架构风险巡检分析报告生成工具。用于分析用户在腾讯云智能顾问产品下的架构图风险巡检情况,从API拉取数据并生成移动端友好的HTML可视化报告,最终将HTML转换为PNG图片输出。当用户提到智能顾问架构巡检、风险分析、巡检报告、架构图风险、腾讯云巡检等关键词时或对当前报告内容修改时,请务必使用此插件。
-
aaaaqwq Bundle Md2wechatConvert Markdown to WeChat Official Account HTML, inspect supported providers/themes/prompts, generate article images, create drafts, write with creator styles, and remove AI writing traces.
1 -
aaaaqwq Bundle Cua Driver RsDrive a native GUI app (macOS, Windows, Linux) via the cua-driver CLI (default) or MCP server — snapshot its accessibility tree, click/type/scroll by element_index or pixel coords, verify via re-snapshot, all without bringing the target to the foreground. Use when the user asks you to operate, drive, automate, or perform a GUI task in a real application on the host.
1 -
aaaaqwq Bundle Code To Image最强免费生图方案:用前端代码(HTML/CSS/JS/Canvas/SVG)设计画面,通过 Playwright 渲染为任意分辨率高清 PNG。 零API成本、无限分辨率、中文100%准确、代码可复用、Git可追踪。 配合 frontend-design / canvas-design / frontend-design-ultimate 产出 HTML 设计稿后调用。 触发: '生图' '生成图片' '代码生图' '渲染封面' 'render html' 'html to image' 'code to image' '前端生图'。 Author: Daniel Li
1 -
aaaaqwq Bundle Integrate Opencut ClassicSet up, inspect, run, build, or test the archived OpenCut Classic repository and its Bun, Next.js web, Docker services, and optional Rust/WASM paths. Use when the user explicitly mentions OpenCut Classic, opencut-classic, the legacy OpenCut web editor, or evaluating its import, timeline, preview, or export implementation. Do not use for the current OpenCut rewrite.
1 -
aaaaqwq Bundle Integrate AI Website ClonerCreate or inspect a project derived from JCodesMore/ai-website-cloner-template, normalize its bundled clone-website workflow for Codex, and verify its Next.js scaffold. Use when the user explicitly names that repository/template or asks to install its bundled Agent Skill into a project they created from the template. Do not trigger for general website cloning, redesign, screenshot-to-code, or URL-to-code requests.
1 -
aaaaqwq Bundle Automate Windows AccessibilityBuild and validate Windows UI automation with UIA, Win32 input, and CDP evidence. Use for accessibility elements, DPI, Chrome sessions, stale state, or downloads.
1 -
organvm-iv-taxis Skill Turnstile SpinSet up Cloudflare Turnstile end-to-end in a project: scan the codebase, create the widget via the Cloudflare API, deploy the managed siteverify Worker, write the frontend snippets, validate, and persist the skill. Load this when a user asks to add Turnstile, set up CAPTCHA, protect a form from bots, or fix a Turnstile integration. Mirrors developers.cloudflare.com/turnstile/spin.
-
mvanhorn-printing-press-libra Skill Pp AxsSRAM AXS CLI for bikes, components, registrations, ride activities, and synced component-summary analytics. Trigger phrases: `list my SRAM components`, `register a SRAM component`, `show my AXS garage`, `my recent AXS rides`, `use axs`, `run axs`.
-
mvanhorn-printing-press-libra Skill Pp Ht MlThe only ht-ml.app tool that remembers what you published, a local registry of every site, its once-only update_key, and full version history, plus one-command publish-with-assets. Trigger phrases: `publish this HTML`, `get me a public URL for this page`, `host this HTML file`, `update my ht-ml site`, `list my published sites`, `use ht-ml`, `run ht-ml`.
-
mvanhorn-printing-press-libra Skill Pp IrailEvery Belgian rail lookup the existing tools offer, plus transfer-risk, delay history and accessibility data that none of them have. Trigger phrases: `next train from Brussels-Central`, `when is my train to Ghent`, `is my train delayed`, `are there any rail disruptions in Belgium`, `plan a train journey from Leuven to Antwerp`, `will I make my transfer`, `use irail`, `run irail`.
-
mvanhorn-printing-press-libra Skill Pp GreenhousePrinting Press CLI for Greenhouse. Public Greenhouse Job Board API (https://developers.greenhouse.io/job-board.html).
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 qe-security-visual-testing, ios-application-dev, md2wechat. 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.