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.
-
codexstar69 Bundle CLI GodmodeInstantly transforms any developer's terminal environment into a 100x God-Tier setup. Performs a comprehensive, read-only system scan (shell configs, aliases, multiplexers, background proxies, Git workflows, and resource bottlenecks) and generates a beautiful, offline, interactive HTML dashboard. Works natively via skills.sh (npx skills), Claude Code, Cursor, Windsurf, AMP, Antigravity, Pi, Aider, and 18+ other autonomous coding agents.
-
codingfeng101 Bundle Slide AlchemyUse when converting image-based PPT/PPTX files, slide screenshots, scanned slide pages, or visual decks into editable component-based PowerPoint files; restoring slide images into editable text, shapes, and generated PNG assets; or running a lightweight image-to-editable-PPT workflow.
-
cogine-ai Bundle AI Slide TemplatesUse the Cogine AI ai-slide-templates repository to help users create polished slide decks from real content. Trigger when the user asks to make slides, a PPT, a presentation deck, an HTML deck, choose a presentation template, use Cogine AI slide templates, or install/use the ai-slide-templates workflow in Codex, OpenClaw, or another agent.
-
cogine-ai Bundle Image2 With CodexRoute image generation to the local image2-with-codex HTTP service at http://127.0.0.1:4312, which delegates to the user's Codex CLI. Use only when the user explicitly asks for this route. Default behavior is raw prompt pass-through; do not substitute HTML layout, infographic tooling, or other image tools.
-
cogpros Bundle Field ReportManually invoked when the user asks for a "field report" or says "use field-report for this". Generates an interactive HTML report (textareas after every question, three export buttons, light/dark, localStorage) from a canonical template — 15 baseline features + 2 optional patterns. Do NOT auto-fire on description match; manual invocation only. NOT for: read-only audit logs with no user input, non-HTML outputs.
-
colbymchenry Bundle Frontend AuditVisual design verification loop for matching a goal PNG to a live render. Use when the user shares a design mock / goal image and asks to match the UI to it, asks to "iterate on this design" or "match this 1:1", or calls out visual drift in a previous UI iteration. Provides histogram color sampling, shape inspection (radius/border/shadow/bg-mode/fill-vs-context), computed-style checking on the live render, snap, and side-by-side diff. After every UI change the assistant MUST snap the live render and Read the snap with the Read tool before reporting the change done — skipping that is the
-
comeonzhj Bundle Damncool HTML SlidesCreate bold, animated, browser-ready HTML slide decks from a user topic, outline, notes, or source material. Use when Codex needs to make cool/cinematic/炫酷幻灯片, HTML presentations, browser-openable slide shows, or visual storytelling decks with varied layouts, random-feeling 3D transitions, large icons or emoji, and reusable CSS/JS rather than rewriting a slide engine.
-
brunodantas Bundle How Am I DrivingScore your recent Claude Code prompting and produce a graded, evidence-backed report card — how good were my prompts, measured? Reads your recent session transcripts, computes deterministic measures (prompt length, prompts/session, context front-loading), then judges the semantic measures (rework rate, clarification, steering) and five 1–5 qualitative grades with quoted evidence. Renders a Markdown Full Report, an optional HTML report, and a shareable HTML Scorecard (scores only, no quotes). Use when the user asks "how am I driving", "grade my prompting", "score my prompts", "make a scorecard", or wants measured feedback on their own Claude Code prompting.
-
bryan31 Bundle How2useliteflow当用户提到 LiteFlow(Java 轻量级规则引擎/业务编排框架)时启用。覆盖:组件、EL 规则(THEN/WHEN/IF/SWITCH/FOR/WHILE/ITERATOR 等)、上下文、脚本组件、规则配置源、Rule-DB 统一规则数据库(v2.16.1:SQL/PostgreSQL/MongoDB/Redis/ZooKeeper/etcd/Nacos 七后端、发布 API、多节点一致性)、指标监控(liteflow-metrics、Micrometer、Prometheus、/actuator/liteflow 端点)、配置项、执行器、AI Agent 编排(ReAct Agent / liteflow-react-agent)、测试与调试、源码细节。
-
bryce1188 Bundle Codex Ppt Skill从一句话主题、文章、报告、论文、笔记、大纲、公开活动/画展信息或软件项目文件夹生成视觉统一的 PPT/PPTX。适用于基于 codex-ppt 流程的图片式整页幻灯片、需要联网调研画展/人物/品牌/事件等公开主题的资料型 PPT、需要识别项目代码和运行证据的项目汇报 PPT,以及需要 image2/imagegen 生成无文字背景图、再用 HTML/PPT 独立文字层方便后期编辑的演示文稿。
-
btc-vision Bundle Crypto Frontend DesignCSS-first directive for crypto, web3, DeFi, airdrop, dashboard, and token project frontends. Produces stylesheets, layout, animation, theming, and responsive HTML. Triggers on landing pages, dashboards, airdrop claims, staking UIs, DEX frontends, bridge UIs, NFT galleries, token launches, or any crypto web interface. Also triggers on matrix-style, cyberpunk, neon-glow, hacker terminal, or dark fintech dashboard aesthetics. Multi-theme CSS, mobile/tablet/desktop support, zero emojis. For OPNet frontends, use alongside opnet-development skill (which owns TypeScript, React logic, wallet, providers). This skill owns visuals; opnet-development owns logic. Always gathers user context (images, theme, brand colors, audience) before generating code.
-
btc-vision Bundle Opnet DevelopmentBuild on Bitcoin Layer 1 with OP_NET - Bitcoin L1 consensus layer for trustless smart contracts. Use when building AssemblyScript smart contracts, TypeScript libraries, React frontends, or Node plugins for OPNet. Triggers on Bitcoin smart contract development, OP20 tokens, OP721 NFTs, WebAssembly contracts, verify-dont-custody patterns, epoch mining, and OPNet architecture questions.
-
buainoai Bundle Remotion Best PracticesRemotion 最佳实践 - 使用 React 创建视频
-
buda-ai Bundle API Claws CreatorBuild an agent harness on top of Buda API Claws — the hosted Agent API at /api/v1 that provides the runtime, durable Drive memory, sessions, and tenant isolation, so you only build the surface your users touch. Use when someone wants to add an AI agent to a device, mini program, browser extension, SaaS product, support widget, or internal tool and asks how to start, how to structure it, or how to wire sessions, memory, tenancy, or a frontend-safe chat surface. Do not use for questions about the Buda consumer app that do not involve building an integration.
-
buff-m Bundle Email Sender支持SMTP和API的邮件自动发送工具,内置Jinja2模板引擎,适用于自动化工作流、批量邮件发送、系统通知等场景。支持HTML邮件、多附件、模板变量、错误重试等企业级功能。
-
buiducnhat Skill Better ModalGuide for using @buiducnhat/better-modal — the headless, Promise-based React modal state management library. Apply when writing, reviewing, or refactoring modal code in any React app that uses this package. Covers installation, all public APIs, React/Vercel best practices, TypeScript patterns, and common anti-patterns to avoid.
-
cabbage2000-lab Bundle Data Analysis Skills当用户提供数据文件(CSV / Excel / JSON / TSV)或表格数据,想要做分析、找洞察或要一份报告时使用——例如「分析数据」「做数据报告」「帮我看看这份数据」「这批订单数据说明什么」,以及销售 / 经营 / 运营数据复盘、探索性分析(EDA)、A/B 实验评估、趋势预测,或要一份可交互的 HTML 数据报告。不适用于:搭建 dashboard 应用、网页爬取、连接线上数据库。
-
callstackincubator Bundle React Native AI SkillsProvides integration recipes for the React Native AI @react-native-ai packages that wrap the Llama.rn (Llama.cpp), MLC-LLM, Apple Foundation backends. Use when integrating local on-device AI in React Native, setting up providers, model management.
-
callstackincubator Bundle CordieriteConnect a Cordierite-enabled React Native app to your machine and drive it from the terminal (or MCP) using tools the app registers — useful for agents, scripts, and dev automation. Reach for this when the user mentions Cordierite, bootstrapping/pairing with the app, or invoking app-defined capabilities from the CLI or MCP.
-
callstackincubator Bundle React Native HarnessWrite and debug React Native Harness tests for app code. Use when the user asks to create or fix tests that import from react-native-harness, mock modules, spy on functions, render React Native components on-device, use setupFiles or setupFilesAfterEnv, or add optional UI tests with @react-native-harness/ui.
-
callstackincubator Bundle VoltraBuild, review, refactor, configure, or debug Voltra code using Voltra JSX, Voltra JS APIs, the Expo config plugin, and the Voltra CLI. Use when the user asks about charts, Live Activities, Dynamic Island UI, iOS widgets, scheduled widgets, Android widgets, ongoing notifications, image handling, app.json plugin config, React Native CLI setup, or Voltra push update flows.
-
caomeiyouren Bundle Vision Augment视觉增强 MCP —— 为无视觉能力的 LLM(如 DeepSeek、GLM)提供看图、OCR 与文档解析。当用户需要分析图片/截图内容、识别图片中的文字、解析 docx/pdf/pptx/xlsx/html 文档时使用。工具:mcp_vision_augment_vision(task_type=reasoning|ocr|document)、mcp_vision_augment_health(环境探测)、mcp_vision_augment_clear_cache。
-
capraidev Bundle Shadcn UIThis skill should be used when the user asks to "add a shadcn component", "create a form with shadcn", "build a dashboard with shadcn", "add a data table", "configure shadcn ui", "set up dark mode with shadcn", "create a chart with shadcn", "use shadcn blocks", "theme a next.js app with shadcn", "install shadcn ui", "add a sidebar", "create a login page with shadcn", or when building any Next.js application that uses Shadcn UI components, Radix UI primitives, or Tailwind CSS-based component patterns.
-
carlos7ags Skill Using FolioHow to generate PDFs with the folio Go library (HTML to PDF). Use when writing Go code that calls github.com/carlos7ags/folio to render HTML/CSS into a PDF, configure pages/fonts/PDF-A, or when a generated PDF is missing content (page numbers, headers/footers, fixed/absolute elements). Teaches the canonical AddHTML path and how to verify output.
-
casemark Bundle Iolta ManagerDevelopment skill for CaseMark's IOLTA Manager application - a trust account management system for law firms to maintain IOLTA compliance. Features client/matter management, transaction tracking, trust holds, compliance reports, and audit trails. Built with Next.js 15, PostgreSQL, Drizzle ORM, and Tailwind CSS. Use this skill when: (1) Working on or extending the iolta-manager codebase, (2) Adding transaction or accounting features, (3) Modifying the database schema, (4) Building compliance reports, (5) Working with state-specific IOLTA rules, or (6) Implementing audit/security features.
34 -
cassiozen Bundle UX AntipatternsUse when reviewing, building, or refactoring frontend UI — components, pages, forms, or interactive flows. Triggers on code review, pull requests, and new feature implementation involving user-facing interfaces.
-
cathrynlavery Bundle Diagram DesignCreate branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap, bar, waterfall, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, or database schema diagrams as standalone HTML/SVG/PNG. Redraw .drawio/.drawio.png/.drawio.svg, Mermaid .mmd, or Excalidraw .excalidraw sources at a chosen size/detail; onboard brand tokens from a website; add lifecycle phase maps, semantic patterns, callouts, accessible motion, or sketchy/hand-drawn styling.
-
alper-dev Bundle Build For Good UXUse when building, reviewing, or improving user-facing UI, frontend components, pages, forms, flows, loading states, error handling, empty states, success feedback, graceful degradation, familiar layouts, or choice-heavy interfaces.
-
ammar-hasan Bundle Urdu Voice DirectorRecover the living Urdu scene, then refine and direct it for believable spoken delivery while preserving meaning, character, relationships, cultural context, pronunciation intent, and caption cleanliness. Use for naturalizing written or Roman Urdu; preparing conversation, children’s or family material, fiction, drama, dubbing, narration, explainers, education, accessibility, animation, games, news, public speech, religious or moral work, poetry, code-switching, or TTS; correcting ambiguous vowels or consonant substitutions; and adapting clean Urdu to an exact speech model without making provider markup the source text.
-
amunozdev Bundle Nextjs Swr HooksEnforces hook development conventions for Next.js projects using SWR (stale-while-revalidate): file structure, fetcher patterns, key factories, SSR fallback, typing, and anti-pattern prevention. Use when creating, modifying, or reviewing custom React hooks with SWR in a Next.js project, or when user mentions "swr", "useSWR", "stale while revalidate", "swr hook", "swr mutation", "useSWRMutation", "swr infinite", "swr middleware". Do NOT use for TanStack Query projects — use nextjs-tanstack-hooks instead. Do NOT use for non-Next.js projects — use react-swr-hooks instead. Do NOT use for client state management (Zustand, Redux, Recoil, Jotai).
-
amunozdev Bundle React Swr HooksEnforces hook development conventions for React projects using SWR (stale-while-revalidate): file structure, fetcher patterns, key factories, typing, and anti-pattern prevention. Works with React Native, Expo, Vite + React, CRA, Remix (client-side), and any React 18/19 app. Use when creating, modifying, or reviewing custom React hooks with SWR, or when user mentions "swr", "useSWR", "stale while revalidate", "swr hook", "swr mutation", "useSWRMutation", "swr infinite", "swr middleware". Do NOT use for TanStack Query projects — use react-tanstack-hooks instead. Do NOT use for general React component development or non-hook utilities. Do NOT use for client state management (Zustand, Redux, Recoil, Jotai).
-
andfanilo Bundle Developing With StreamlitUse for ALL Streamlit tasks: creating, editing, debugging, beautifying, styling, theming, optimizing, or deploying Streamlit apps. Also custom components, st.components.v2, HTML/JS/CSS work. Discovers and loads version-matched reference docs from the user's installed Streamlit (>=1.57). Triggers: streamlit, st., dashboard, app.py, beautify, style, CSS, color, background, theme, button, widget styling, custom component, st.components, CCv2, session state, performance, cache, fragment, slow rerun, deploy.
-
andrii-myronenko Skill Export HTMLExport Session to HTML
-
andyhuo520 Bundle HTML Ppt DesignerHTML PPT 精致演示文稿设计器 - 将用户内容转化为精致的HTML演示文稿页面,LLM 智能设计优先,支持多种视觉风格、动效设计、色彩认知系统。触发词:PPT、演示文稿、HTML幻灯片、slide、presentation、做PPT、制作演示。
-
andyqiu847-ai Bundle High Quality SlidesUse this skill when the user asks for a "high-quality" / "professional" / "Genspark-style" / "投资人级别" / "演示级" deck, or when they reference Genspark, Gamma, beautiful HTML slides, or pixel-perfect presentations. Trigger on requests like "做一份PPT", "生成幻灯片", "pitch deck", "做汇报", or when the user uploads research material (PDF/Excel/Word/notes/URL) and wants it turned into slides. Produces HTML decks (pixel-perfect, animation-capable, fully self-contained) and/or .pptx (editable). Do NOT trigger for plain Word docs or generic "summarize this" — only when a slide-shaped artifact is the deliverable.
-
angelapaia Bundle Salgadoia Tutor SkillsTutor interactivo y adaptativo que enseña a crear skills de Claude desde cero a cualquier persona que nunca ha hecho una, subiendo por una escalera de 5 niveles de complejidad y construyendo skills reales con el alumno (modelo "yo lo hago / lo hacemos / lo haces tú"). Genera material explicativo en HTML siempre con la identidad de marca SalgadoIA. USAR SIEMPRE cuando el usuario diga "enséñame a crear skills", "tutoría de skills", "sesión de skills", "quiero aprender a hacer una skill", "no he hecho nunca una skill", "cómo se crea una skill", "mi primera skill", "forma a [alumno] en skills", "clase de skills", o cuando un formador prepare o imparta una sesión sobre creación de skills. También cuando alguien quiera crear su primera skill —por ejemplo, una skill que capture su imagen de marca— y necesite acompañamiento paso a paso. | Builded by SalgadoIA
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 cli-godmode, slide-alchemy, ai-slide-templates. 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.