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.
-
johannesrabauer Bundle Fxgl IntelligenceIntegrate ML-powered intelligence features into an FXGL game via the fxgl-intelligence module — face detection from webcam, hand gesture recognition, hand landmark tracking, speech recognition for voice commands, and platform text-to-speech. Use this skill when building accessibility features, gesture-controlled games, voice-commanded gameplay, facial-expression-driven mechanics, or spoken NPC dialogue.
-
nikoxkx Skill Nextjs App ScaffoldScaffolds a production Next.js 14+ App Router project with TypeScript, Tailwind, ESLint, Prettier, testing, and CI. Use when starting a new Next.js project from scratch.
-
nikoxkx Skill Accessibility AuditorAudits web interfaces for WCAG 2.1 AA compliance and generates a prioritized fix list. Use when auditing accessibility, preparing for legal compliance, or improving inclusivity.
-
nikoxkx Skill CSS Animation CrafterCreates CSS keyframe animations, transitions, and micro-interactions. Use when adding motion to web UIs without JavaScript animation libraries.
-
nikoxkx Skill HTML Component BuilderBuilds reusable, semantic HTML components from descriptions or wireframes. Use when creating UI elements like cards, modals, navbars, footers, forms, or any HTML structure without a JS framework.
-
ralfnick Bundle Baoyu DiagramCreate professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system, process flow, data flow, component relationship, network topology, decision tree, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Output is always a standalone .svg file.
-
nikoxkx Skill Responsive Layout SystemCreates a responsive layout using CSS Grid and Flexbox with mobile-first breakpoints. Use when building page layouts that must work across all screen sizes.
-
nikoxkx Skill React Component GeneratorGenerates production-ready React functional components with TypeScript, props interface, default props, and JSDoc. Use when scaffolding new React components from descriptions or design specs.
-
johannesrabauer Bundle Fxgl Entity ComponentFXGL Entity-Component System
-
johannesrabauer Skill Javafx Fxml Controls CSSCompose JavaFX views with FXML, controller injection, and control wiring.
-
tybiefh-beep Skill Local Standalone HTML Applocal-standalone-html-app
-
johannesrabauer Skill Javafx Devtools Inspection DebuggingImprove JavaFX development with scene inspection, CSS debugging, state-devtools, and diagnostic overlays.
-
leinatorx Bundle Anxin Ppt为 OpenClaw 生成蓝白企业汇报风 HTML PPT,适合公司介绍、解决方案汇报、项目路演、业务复盘、产品矩阵、技术架构和安信科创安全应急领域材料。用户提到“企业汇报 PPT”“安信 PPT”“蓝白风 PPT”“公司介绍”“解决方案汇报”“路演材料”“OpenClaw 配置 PPT 技能”时使用。生成配图时可调用同级 anxin-image-gen 辅助,但 PPT 页面文案默认使用简体中文,不做不必要的英文或中英混排。
-
leinatorx Bundle Wechat Article HTML Style将应急科普公众号文章整理成项目统一风格的本地 HTML 排版页,适用于生成可打开、可复制到微信公众平台的公众号正文页面。用户提到公众号 HTML、公众号排版版、复制到公众号、保持每期文章风格一致、统一排版模板时使用。
-
nugrahalabib Bundle Agentbuff PresentationCreate stunning presentations and deliver them in any format — an interactive HTML deck, PDF, PNG/JPG images, or PPTX (PowerPoint) — with every export pixel-identical to the HTML. Build from scratch or convert an existing PowerPoint. Works with ANY coding agent that has filesystem and shell access (Claude Code, Codex, Hermes, OpenClaw, Gemini CLI, and others), not just Claude. Use when the user wants a presentation, slides, a deck, a pitch, or to export/convert slides to PDF, images, or PowerPoint. Helps non-designers discover their aesthetic by seeing visual previews rather than describing taste.
-
shreyas70773 Bundle Oracle Dba Rac High AvailabilityUSE THIS SKILL WHENEVER the user mentions RAC, Real Application Clusters, Grid Infrastructure / GI, Clusterware, CRS, OHASD, crsctl / srvctl / olsnodes / cluvfy, OCR (Oracle Cluster Registry) or voting disk, SCAN / SCAN listener, node VIP, cluster interconnect / private network / Cache Fusion / GCS / GES, node eviction or split-brain or reboot/fence, instance start/stop on a cluster, cluster-managed database SERVICES, TAF / Transparent Application Failover, Application Continuity (AC) / FAN / ONS / FCF, connection or runtime load balancing (CLB / RLB), policy-managed vs admin-managed databases, or ANY of the codes CRS-xxxx, ORA-29740 (eviction/reconfiguration), ORA-481/ORA-29702 (CSS/clusterware), ORA-12545/ORA-12516 (SCAN/listener), or "gc blocks lost" / high "gc cr/current block receive time" — EVEN IF they do not name a specific task or tool. Covers read-only cluster/interconnect/service/eviction diagnostics, OCR manual backup, RAC instance and service start/stop/relocate, VIP & SCAN runtime ops, SCAN port
-
imcitizen13 Bundle React Native Dev Cache ScanRead-only scan-and-report of reclaimable disk space from React Native / Expo + Xcode/Android developer caches on macOS. Use this whenever a Mac dev machine is low on disk and the user wants to know what is safe to clean — phrases like "running out of disk space", "what's eating my disk", "free up space", "clean up Xcode/DerivedData/simulators/gradle/node_modules", or "my Mac is almost full". Measures DerivedData, iOS DeviceSupport, simulator runtimes/devices, Gradle/CocoaPods/Expo/Bun/npm caches (and optionally per-project node_modules), ranks them by size, and tags each with a deletion-severity tier. This skill ONLY scans and reports — it never deletes. Use it first, before any cleanup.
-
amit-sw Bundle Codebase To CourseTurn any codebase into a polished, interactive HTML course that teaches how the code works to non-technical and technical-curious learners. Use this skill whenever someone wants an interactive course, tutorial, walkthrough, or explainer generated from a repo or project. Also trigger when users mention 'turn this into a course,' 'explain this codebase interactively,' 'teach this code,' 'interactive tutorial from code,' 'codebase walkthrough,' or 'make a course from this project.' This skill produces a directory-based course with structured modules, animated visualizations, code-with-plain-English translations, and multi-level quizzes.
-
amit-sw Bundle Document To QuizTurn a document into a polished, interactive HTML quiz experience. Use this skill whenever someone wants to create a quiz, comprehension check, assessment, review activity, or study-and-quiz walkthrough from a document such as a paragraph, lesson, transcript, paper, article, notes, or URL. Also trigger when users mention 'turn this into a quiz,' 'quiz me on this lesson,' 'make an assessment from this transcript,' or 'create questions from this document.' This skill produces a directory-based HTML quiz with inferred sections, study summaries, three difficulty levels, immediate answer checking, and running section/global score counts.
-
amit-sw Bundle Cloudflare App ArchitectureDesign, review, and scaffold Cloudflare-first applications that should follow the Schovia single-Worker pattern: React SPA + Hono API + queue consumer in one deployable, D1/R2/Queues storage split, shared Zod contracts, explicit routes/services/repositories/adapters layering, and Cloudflare Access authentication. Use when creating a new Cloudflare app, evaluating whether an app matches this standard, planning project layout, defining storage and async job patterns, or implementing SSE-based LLM features on Cloudflare infrastructure.
-
aiskilloftheweek Skill Honest Thinking PartnerActivates a brutally honest thinking partner mode that sharpens reasoning, surfaces blind spots, dismantles flawed logic, and forces concrete action planning. Use this skill every time the user wants honest feedback on a plan, decision, or idea — especially when they seem to be rationalizing, avoiding something, or stuck. Also trigger when the user says things like "be honest with me", "tell me what you really think", "am I thinking about this wrong", "what am I missing", "stress-test this", "play devil's advocate", "challenge my thinking", "I need brutal feedback", or pastes a plan, decision, or idea asking for feedback. Trigger even when the request is casual — if the user shares a plan and seems to want validation, this skill is what they actually need. Do NOT use for pure information requests with no decision or reasoning component.
-
bearcoder6 Bundle Resume2siteLightweight Agent Skill for turning resumes, GitHub projects, papers, and optional style references into polished GitHub Pages personal websites. Use when Codex, Claude Code, Cursor, or another coding agent needs to extract a structured profile, choose academic homepage or personal landing-page mode, plan site narrative, generate static HTML/CSS output, recommend licensed assets, protect privacy, and run a lightweight file-based final quality review.
-
akmarinov Bundle Codemagic WatchInspect and monitor Codemagic builds with the `codemagic-watch` CLI. Use when asked to fetch a build snapshot, watch a Codemagic build until completion, stream Codemagic JSON events into another tool, or react to build success/failure from a Codemagic build ID or build URL.
-
akmarinov Bundle Bg Tax FilingBulgarian NRA annual personal income tax filing workflow. Use when preparing, checking, or correcting a Bulgarian tax declaration from broker, ETF, stock, crypto, rent, dividend, sale, or foreign-asset documents; deciding which NRA appendices to use; extracting data from broker PDFs/HTML/CSV; generating Appendix 8 import files; or estimating missed tax and compliance risk by year.
-
akmarinov Skill Swift AI Code FixFix and modernize AI-generated Swift/SwiftUI code for iOS 18+ targets. Use when reviewing or refactoring LLM output (Claude/Codex/Gemini) for deprecated APIs, SwiftUI best practices, accessibility, SwiftData/CloudKit constraints, Swift concurrency misuse, and modern navigation/tab/font patterns.
-
yangyuchen-work Skill HTML CSS Reading Repackager阅读材料重打包成极简 HTML/CSS 阅读器
-
hashstacs-global Bundle Feishu DOCX Download下载并提取**附件文件**正文:Word(.docx/.doc)、PDF、PPT(.pptx/.ppt)、Excel(.xlsx/.xls)、html/rtf/epub/txt/csv 等。 仅处理云盘文件 (`/file/`) 和 Wiki 附件 (`/wiki/` 中 obj_type=file)。**飞书在线云文档(URL 含 `/docx/` `/docs/`)请用 feishu-fetch-doc。**
-
yangyuchen-work Skill Telegram Notion Astro MigrationTelegram 远程站点迁移(Notion → Astro + DNS)
-
zuoguyoupan2023 Bundle KreuzbergExtract text, tables, metadata, and images from 91+ document formats (PDF, Office, images, HTML, email, archives, academic) using Kreuzberg. Use when writing code that calls Kreuzberg APIs in Python, Node.js/TypeScript, Rust, or CLI. Covers installation, extraction (sync/async), configuration (OCR, chunking, output format), batch processing, error handling, and plugins.
-
hashstacs-global Bundle Feishu Im File Analyze下载并解析飞书 IM 消息里的附件(pdf / docx / pptx / xlsx / xls / doc / ppt / rtf / epub / html / txt / csv / md / zip), 返回结构化文本供 AI 分析。zip 会自动解压后递归处理支持的类型。 适用场景(凡是"用户把文件直接发给机器人让它读/总结/对比/提炼"都走本 skill): - 简历筛选:HR/老板把 PDF 简历或打包简历 zip 甩给机器人,让机器人提炼候选人亮点 - 合同/协议审阅:法务/业务发 Word、PDF 合同给机器人,让机器人抽关键条款、找风险点 - 会议/访谈材料:把 pptx 培训资料、doc 纪要、md 笔记发进群,让机器人生成摘要或问答 - 数据表汇总:把 xlsx/xls/csv 报表发给机器人,让它读表头和样例、给解读或对比 - 技术文档问答:把需求文档、接口说明(docx/html/md)发给机器人,让它回答具体问题 - 批量附件分析:群里发一个 zip 打包的多份材料,机器人解压后逐份抽文本汇总 - 小说/电子书阅读:epub/txt 发给机器人问剧情或提炼观点 - 日志排查:log/txt/json 日志发给机器人,让它找异常或时间线
-
kevinke93 Bundle Frontend UI EngineeringUse when building, modifying, or reviewing user-facing UI, responsive states, accessibility, visual fidelity, functional QA, monkey testing, or product-grade frontend polish.
-
zuoguyoupan2023 Bundle Component RefactoringRefactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.
-
zuoguyoupan2023 Skill Typescript RulesReact/TypeScript frontend development rules including type safety, component design, state management, and error handling. Use when implementing React components, TypeScript code, or frontend features.
-
zuoguyoupan2023 Skill Playwright SkillBattle-tested Playwright patterns for writing, debugging, and scaling reliable test suites. Use when you need guidance for E2E, API, component, visual, accessibility, or security testing, plus CI/CD, CLI automation, page objects, and migration from Cypress or Selenium. TypeScript and JavaScript.
-
zuoguyoupan2023 Bundle Frontend TestingGenerate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
-
zuoguyoupan2023 Bundle GenimlThis skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
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 fxgl-intelligence, nextjs-app-scaffold, accessibility-auditor. 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.