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.
-
mvanhorn-printing-press-libra Skill Agent DesktopDesktop automation through the real Rust agent-desktop CLI, published in Printing Press through a small bridge. Use when an agent needs to observe, inspect, or control native desktop applications with accessibility trees: snapshots, refs, clicks, typing, scrolling, windows, notifications, screenshots, clipboard, waits, and bundled version-matched skill docs.
-
mvanhorn-printing-press-libra Skill Pp Elezioni SiciliaDati elettorali siciliani da riga di comando — senza copiare tabelle HTML. Trigger phrases: `elezioni sicilia`, `risultati elezioni comunali sicilia`, `affluenza elettorale sicilia`, `candidati sindaco sicilia`, `voti lista sicilia`.
-
aiskillstore Bundle OpentuiOpenTUI skill for building terminal user interfaces with the Core, React, or Solid APIs. Use for any TUI task including components, layout, keyboard and keymap handling, animations, and testing.
-
aiskillstore Bundle ArchifyCreate polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.
-
aiskillstore Bundle Orca CLIUse the `h0x` CLI to operate h0x-ADE-managed worktrees, folder contexts, terminals, repos, automations, artifacts, skill sharing, worktree comments, and h0x-ADE's embedded browser. Use when the user says "$orca-cli", "use h0x cli", "h0x-ADE worktree", "child worktree", "cardStatus", "spawn codex/claude in a worktree", "read/wait/send h0x-ADE terminal", "terminal send", "full handoff", "handover", "give this to another agent", "another worktree", "h0x-ADE browser", "h0x artifacts", "share HTML/Markdown", "public artifact link", "share skills", or "control the browser inside h0x-ADE". Prefer this over raw `git worktree`, ad hoc PTYs, Playwright, or Computer Use when the task touches h0x-ADE-managed state. Use Computer Use for external browser windows, webviews, or desktop UI only when the task requires OS/window-level control such as focus, menus, dialogs, coordinates, or screenshots. Use `orca-cli` for h0x-ADE's embedded pages and a page-automation tool such as Playwright or CDP for external pages.
-
aiskillstore Bundle Design Lint결정론적(no-LLM) 디자인 안티패턴 린터. 렌더된 HTML/CSS(또는 standalone 프로토타입 HTML, 라이브 URL)를 DESIGN-TOKENS.md Ground Truth 대비 검사해 토큰 위생·색/폰트/스페이싱 일관성·AI-default 클리셰(beige 배경·text gradient·uppercase eyebrow 등)를 pass/fail로 판정한다. LLM 디자인 리뷰는 비재현적이라 게이트로 못 쓰지만 이 스킬은 동일 입력→동일 판정·0토큰이라 CI/파이프라인 게이트로 쓸 수 있다. '/design-lint', '디자인 린트', '디자인 검사', '토큰 위생 검사', 'design-lint', '안티패턴 검사', 'AI-default 검사', '디자인 일관성 검사' 언급 시, 그리고 리팩토링/리디자인 파이프라인이 시각 산출물을 검증할 때 호출한다.
-
aiskillstore Bundle LavishTurn complex or visual agent responses into rich, reviewable HTML artifacts the user can annotate and send feedback on, using the lavish-axi CLI. Use when about to give a plan, comparison, diagram, table, code diff, report, or anything easier to grasp visually than as prose.
-
aiskillstore Bundle Lark Apps妙搭(Spark/Miaoda)应用开发与托管:应用创建、HTML静态站点发布、本地全栈开发、云端生成迭代、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理。当用户要开发/新建一个系统·工具·平台·应用,或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接,或用 HTML 做页面·网站·部署到妙搭,或提到妙搭/Spark/Miaoda(应用运行时域名形如 *.aiforce.cloud)、应用数据库、应用文件存储、开放 API Key、可见范围、线上日志、接口请求量、错误量、延迟、访问量、环境变量时使用。不负责普通云盘文件上传(lark-drive)、飞书文档编辑(lark-doc)、原生幻灯片创建(lark-slides)。
-
aiskillstore Bundle ShareoneHost HTML/Markdown pages and share PDF, Word, or PowerPoint docs as ShareOne short links. Use when publishing pages/docs, adding passwords/watermarks, comments, downloads, or updates.
-
aiskillstore Bundle Pluto PairPair Codex with Pluto.jl notebooks using MCP tools. Use for discovering visible Pluto servers, attaching to running notebooks, opening notebooks headlessly, inspecting @bind controls, setting bond values, reading compact state, or exporting HTML.
-
aiskillstore Bundle Jstodocx APIGenerate Microsoft Word DOCX files through the jstodocx.com API. Use when Codex needs to create or download .docx files from basic HTML, JavaScript source text, or controlled document template fields; when a user asks for HTML to DOCX, JS source to Word, or template-based DOCX generation via an API; or when integrating a lightweight Cloudflare Worker DOCX conversion endpoint into scripts, tests, or agent workflows.
-
aiskillstore Bundle Prism Skill棱镜 - 多学科动态适配分析引擎。支持真实性核查、片段补全、结构化输出(表格/流程图/列表)、HTML/Markdown导出,柔和化交互,多语言自适应。
-
aiskillstore Bundle Limrun XcodeBuild an iOS / Apple app on remote Xcode with `lim xcode build` instead of local xcodebuild, from any environment (Linux, Windows, macOS, VM, container). Use for non-Bazel projects (an `.xcodeproj` / `.xcworkspace`, an XcodeGen `project.yml` with a gitignored project, React Native / Expo native build) when the user wants to build, compile, reload, produce a preview build, or ship a signed device IPA. To run, tap, screenshot, or otherwise interact with the result on a simulator, use limrun-ios-simulator. For Bazel workspaces, use limrun-xcode-bazel.
-
aiskillstore Bundle ReactbitsSearch, browse, and install animated React components from ReactBits.dev (135+ components). Use when the user wants to add UI effects, animations, backgrounds, or interactive components to their React/Next.js project.
-
aiskillstore Bundle CodexemailskillUse when Codex, Hermes, OpenClaw, Claude Code, Cowork, or another AI agent needs to plan, review, implement, audit, or improve email work focused on repo-aware email implementation workflows for codebases, content systems, templates, and tests. Triggers include requests about template implementation, React Email edits, MDX content changes, QA scripts, codebase diffs, and testable email fixes.
-
aiskillstore Bundle Remotion RenderRender videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video
-
aiskillstore Bundle Nature ReaderBuild full-paper Chinese-English side-by-side, figure/table-aware, source-grounded Markdown readers for journal or conference papers from PDF, DOI, arXiv, publisher HTML, or pasted text. Use whenever the user asks to translate or read a paper, make 中英文对照/原文对照/全文翻译解读, extract figures or tables into the right positions, preserve figure/table placement near relevant prose, or keep exact source anchors for every block. This skill must not degrade into a summary-only output unless the user explicitly asks for a summary. Also trigger on general paper-reading and translation requests even without the word "Nature", such as reading/translating an academic paper, literature reading, understanding a paper, and Chinese phrasings like 读论文、精读论文、论文翻译、文献翻译、文献阅读、学术阅读、帮我读这篇文章、翻译这篇paper.
-
aiskillstore Bundle Adscrawl BrowserRead, capture, or interact with browser-rendered websites through AdsCrawl. Use when an AI agent needs to extract a page as Markdown, structured article JSON, or HTML; capture a viewport or full-page PNG screenshot; or create a remote CDP browser session for multi-step interaction, JavaScript-heavy applications, login flows, Playwright, Puppeteer, Selenium, or browser debugging.
-
aiskillstore Bundle Animate ExpoBuild animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.
-
aiskillstore Bundle EmaildesignskillUse when Codex, Hermes, OpenClaw, Claude Code, Cowork, or another AI agent needs to plan, review, implement, audit, or improve email work focused on responsive email design, component systems, dark-mode behavior, and accessibility checks. Triggers include requests about template critique, module system planning, dark-mode QA, layout fixes, accessibility reviews, and design-to-email handoff.
-
aiskillstore Bundle Markstream VueIntegrate markstream-vue into a Vue 3 app. Use when Codex needs to add the Vue 3 renderer, import CSS in the right order, choose `mode="chat"`, `mode="docs"`, or `mode="minimal"`, choose between `content` and `nodes`, coordinate long AI timelines with `MarkstreamVirtualTimeline`, `useMarkstreamVirtualAdapter`, or `vue-virtual-scroller`, enable optional peers like Mermaid, KaTeX, D2, Monaco, or stream-markdown, or wire scoped custom components in a non-Nuxt Vue repository.
-
aiskillstore Bundle Valet PublishPublish files, folders, and artifacts to the web. Static hosting for HTML sites, images, PDFs, reports, dashboards, and any file type. Use when asked to publish, host, upload, serve, or share work at a live URL. Also use to propose a rendered page when a report, comparison, chart, design document, or status page would work better than terminal text, but do not create or update a remote site until the user asks or agrees. Account publishing gives a permanent, private-by-default URL visible to org members; --anonymous gives a temporary public URL with no account. Use the valet CLI when available and its MCP server when the CLI cannot run. For deploying an AI agent rather than static files, use the `valet` skill instead.
-
aiskillstore Bundle Markstream NuxtIntegrate markstream-vue into a Nuxt 3 or Nuxt 4 app. Use when Codex needs client-only boundaries, SSR-safe setup, browser-only peer gating, worker-aware initialization, renderer `mode` selection, or a safe `MarkdownRender` integration inside pages, components, or Nuxt plugins.
-
aiskillstore Bundle Markstream Vue2Integrate markstream-vue2 into a Vue 2.6 or 2.7 app. Use when Codex needs Vue 2-compatible setup, `@vue/composition-api` decisions, CSS wiring, optional peer setup, or scoped Markstream overrides in a Vue 2 repository that is not specifically Vue CLI / Webpack 4 constrained.
-
aiskillstore Bundle CloudbaseUse this skill when you develop, design, build, deploy, debug, migrate, or troubleshoot CloudBase (腾讯云开发, 云开发, TCB, 微信云开发) projects. Covers Web apps (React, Vue, Vite, Next, Nuxt, dashboards, 管理后台), 微信小程序, 小程序, uni-app, native/mobile (iOS, Android, Flutter, React Native) via HTTP API. Includes UI (页面, 界面, 登录页, 表单, form, dashboard, prototype, 原型), auth (登录, 注册, OAuth, 微信登录, publishable key), databases (NoSQL 文档数据库, MySQL, PostgreSQL/CloudBase PG, app.rdb(), queryPgDatabase/managePgDatabase, CRUD, security rules), 云函数 (serverless, scf_bootstrap, HTTP Functions), CloudRun (云托管, Dockerfile), 云存储 (file upload, hosting, 静态托管). Built-in AI (内置大模型, streaming, 流式输出, image generation, 图片生成, generateText, streamText, createModel, generateImage, TokenHub, Hunyuan, hunyuan-exp, DeepSeek, GLM, Token Credits 资源包, 小程序成长计划), 第三方大模型, 大模型接入, 大模型调用, LLM API, chatbot, AI 助手, AI agent, 智能体, AG-UI, LangGraph, LangChain. Ops (巡检, 诊断, health check, 日志, troubleshooting). Spec workflow (需求文档, 技术方案, requirements, tasks.md).
-
aiskillstore Bundle Frontend ReviewReview frontend code for accessibility, UI security, missing states, and UX regressions. Use when asked to review React components, run a pre-merge frontend review, or check a11y and unsafe rendering.
-
aiskillstore Skill Technical ClarityReview technical content for clarity, accessibility, learner comprehension, jargon, context, and grade-level fit.
-
aiskillstore Bundle Ckm SlidesCreate strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
-
aiskillstore Bundle Markstream ReactIntegrate markstream-react into a React 18+ or Next app. Use when Codex needs to add the React renderer, import CSS correctly, choose between `content` and `nodes`, keep Next client boundaries safe, convert renderer overrides, or prepare a repo for `react-markdown` migration.
-
aiskillstore Bundle Solana MobileScaffold, configure, and troubleshoot Solana Mobile apps for Android using the solana-mobile CLI, Expo, and React Native. Use when creating a new Solana mobile app, picking a template, adding Solana to an existing Expo app, checking the Android toolchain, managing Android emulators, or producing a development build.
-
aiskillstore Bundle Url Citation SearchFind papers and preprints that cite a given URL, especially blogs, docs pages, project pages, or other web content that standard citation indexes often miss. Use when the user provides a URL and wants confirmed citing works, evidence from PDF or HTML references, DOI or arXiv links, BibTeX, or a deduplicated citation report.
-
aiskillstore Bundle Transitions DevProduction-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, card hover tilt, plus-to-menu morph, accordions, toasts, like buttons, learn-more hovers, checkbox checks, spinning counters, toggles, AI thinking states, reasoning streams, streaming text, matrix dot loaders, or banner stacking. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", "open / close transition", "make it animate", "fade between", "success animation", "form error", "shake on invalid", "hover lift", "avatar stack hover", "clear the search", "skeleton loader", "loading shimmer", "shimmer text", "sliding tabs", "segmented control", "tooltip", "reveal text", "tilt card", "3
-
aiskillstore Bundle Markstream SvelteIntegrate markstream-svelte in Svelte 5 apps. Svelte 4 unsupported.
-
aiskillstore Bundle Vanilla WebpageBuild webpages with vanilla HTML/CSS/JS — no frameworks, no build steps. Covers modern CSS (nesting, @layer, :has, clamp, container queries), vanilla JS, design tokens, accessibility, responsive design.
-
aiskillstore Bundle Mobile Engineer移动端工程师 Agent — 覆盖 iOS/Android/跨平台应用开发、架构设计、UI实现、网络与数据层、性能优化、安全加固、测试与CI/CD、发布运维全流程。支持Flutter、React Native、Swift、Kotlin等主流技术栈。
-
aiskillstore Skill Portfolio ContextAuto-loaded context for Portfolio Buddy 2 development. Use for ANY task involving: React 19 development, TypeScript, portfolio analysis features, metrics calculations, trading strategy comparison, or working with the Portfolio Buddy 2 codebase. Contains tech stack, known issues, and architectural constraints.
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 archify, technical-clarity, nature-reader. 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.