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.
-
caiyujie007 Bundle Hardware HTML DocumentationUse when creating or refactoring self-contained HTML documentation for RTL, digital circuits, microarchitecture, NoC/interconnect demos, or verification notes. The document should first explain the principle clearly, optionally with diagrams or animation, then describe circuit interfaces, map key principle-level ideas to RTL implementation, and finally summarize verification cases, waveform expectations, and artifacts.
-
qredence Skill OpenuiUse for building, debugging, integrating, migrating, or documenting OpenUI, OpenUI Lang, Agent Interface, OpenUI Cloud, @openuidev packages, streaming generative UI rendering, component libraries, existing-project Cloud integration, self-hosted-to-Cloud migration, migrations from JSON UI formats, Cloud tools (web/image search, artifacts), remote MCP servers, custom function tools and tool loops, and multi-user or multi-app identity (frontend tokens, app_id/user_id, conversation APIs, Responses metadata).
-
qredence Skill Agent UI WorkflowsBuild or modify Fleet Pi's React Agent Elements UI, including InputBar controls, tool cards, question prompts, resource drawer, model picker, mode selector, and streaming state.
-
nmnmcc Bundle Line 2Make all needed parts of one technical domain follow one clear rule. Use when one rule, shared design, interface, migration, or review covers several parts of frontend, backend, data, infrastructure, testing, security, or another single domain, and separate local fixes may become different. Use it with point for small cause-and-effect work. Use it with plane when the rule is part of a result that crosses technical domains.
-
mgoericke Bundle Frontend 2Creates modern web UIs with Tailwind CSS. Three modes – Simple HTML pages (no JS), Dashboards/Admin Panels with TailAdmin (Alpine.js + ApexCharts), and Websites/Landing Pages with Tailwind CSS CDN. Use this skill for "create a dashboard", "landing page", "admin UI", "frontend", "website", "build a UI", "portfolio page", "create an HTML page", "simple website", "static page", "build me a form" or when a responsive HTML page with Tailwind CSS is needed. Do not use for complex SPAs with React/Vue/Angular.
-
gongyijie85 Bundle Improve Codebase Architecture 2Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
-
liujiayi3703 Bundle Deep Analysis个股深度分析的核心工作流。当用户要求"深度分析 / 全面分析 / 帮我看看 / 值不值得买 / DCF / 机构建模 / 首次覆盖 / 投委会备忘录"等涉及个股研究的请求时触发。覆盖 A 股、港股、美股,产出 22 维数据 + 65 位大佬量化评审 + 6 种机构级估值建模 (DCF/Comps/LBO/3-Stmt/Merger) + 7 种研究产物 (首次覆盖/财报解读/催化剂日历/投资逻辑追踪/晨报/量化筛选/行业综述) + 6 种决策方法 (IC Memo/DD/Porter/单位经济/VCP/再平衡) + 杀猪盘检测,最终生成 Bloomberg 风格 HTML 报告 + 社交分享战报。关键词:股票、个股、深度分析、估值、DCF、comps、首次覆盖、IC memo、杀猪盘、龙虎榜、akshare。
-
op0ai Skill Convex Components 3Guide for authoring Convex components - isolated, reusable backend modules with their own schema and functions. Use when building reusable libraries, packaging Convex functionality for NPM, creating isolated sub-systems, or integrating third-party components. Activates for component authoring, convex.config.ts setup, component testing, or NPM publishing tasks.
-
cogine-ai Bundle Vercel React Best Practices 2Use when writing, reviewing, or refactoring React or Next.js code and you need performance-oriented guidance for components, data fetching, rendering, or bundle size decisions.
-
kreuzberg-dev Skill Converting HTML 4Use when converting HTML to Markdown, Djot, or plain text. Covers output formats, heading and code-block styles, lists, escaping, wrapping, and HTML preprocessing.
-
kreuzberg-dev Bundle HTML To Markdown 4Convert HTML to Markdown, Djot, or plain text with structured extraction. Use when writing code that calls html-to-markdown APIs in Rust, Python, TypeScript, Go, Ruby, PHP, Java, C#, Elixir, R, C, or WASM. Covers installation, conversion, configuration, metadata extraction, tables, document structure, inline images, URL fetching, and CLI usage.
-
kreuzberg-dev Skill Extracting Tables 5Use when extracting tabular data from HTML. Covers GFM Markdown tables, the structured tables array (grid cells plus pre-rendered markdown), and HTML line breaks in table cells.
-
kreuzberg-dev Skill Extracting Metadata 4Use when extracting metadata from HTML — title, description, language, Open Graph, JSON-LD / Microdata / RDFa, headers, links, and images. Covers the --json output shape and the --extract-metadata flag.
-
rsign1279 Skill Pagespages (living docs — pages and docs people read, edit, comment on and share; the default for a page, doc, memo, plan, notes, tracker, report or write-up; a pasted claude.ai/code/artifact/… link may be a page — check it with the pages tools first; not HTML pages, apps or plain chat answers, and not a .docx/.pptx/.xlsx/PDF file asked for by name — those go to that format's skill): nothing to load here — the pages tools serve their own instructions: call the pages `guide` tool with ["topic.index"] before your first pages call and follow it.
-
rsign1279 Bundle MorningRender the user's morning brief as a styled HTML artifact, or set it up as a recurring weekday task. Use only when the user explicitly asks to run, see, or set up their morning brief, or if they invoke /morning by name. A question about their day, schedule, or calendar is not by itself a request for the brief; answer it directly instead.
-
fengshao1227 Skill Mobile移动开发。iOS、Android、SwiftUI、Jetpack Compose、React Native、Flutter、跨平台。当用户提到移动开发、iOS、Android、跨平台时路由到此。
-
hwj123hwj Bundle Impeccable 2Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. Covers websites, landing pages, dashboards, product UI, components, forms, and design systems.
-
hwj123hwj Skill Taste Skill 2Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
-
zaxbyhub Bundle Codebase Review Swarm 4Run a rigorous, quote-grounded codebase review or security/QA/accessibility/performance/AI-slop/enhancement audit. Adapter pointing to the canonical opencode-swarm skill; refer to that for the full protocol.
-
zaxbyhub Skill Codebase Review Swarm 5Run a rigorous, quote-grounded codebase review or security/QA/accessibility/performance/AI-slop/enhancement audit. Adapter pointing to the canonical opencode-swarm skill; refer to that for the full protocol.
-
zaxbyhub Bundle Codebase Review Swarm 6Run a rigorous, quote-grounded codebase review or security/QA/accessibility/performance/AI-slop/enhancement audit. Use for full-repo or large-subsystem review reports; not for normal implementation. Performs Phase 0 inventory, selected exhaustive tracks with non-diluting depth, coverage closure, reviewer/critic validation, and writes .swarm/review-v8 artifacts without modifying source files.
-
ronald-koh Bundle Improve Codebase ArchitectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
-
schalkneethling Bundle Code Review 2Review code changes for correctness, security, performance, accessibility, maintainability, tests, dependencies, design-system adherence, and localization. Use when the user asks for a code review, PR review, review of local changes, risk assessment, code quality feedback, or actionable findings before merge.
-
schalkneethling Bundle Frontend Testing 2Write tests that start with acceptance criteria, then add implementation tests for robustness. Use when writing unit tests (Vitest), end-to-end tests (Playwright), visual regression tests, or accessibility tests. Emphasizes user-centric testing, semantic locators, accessibility validation, and the balance between acceptance and implementation testing.
-
schalkneethling Bundle Frontend Security 2Audit frontend codebases for security vulnerabilities and bad practices. Use when performing security reviews, auditing code for XSS/CSRF/DOM vulnerabilities, checking Content Security Policy configurations, validating input handling, reviewing file upload security, or examining Node.js/NPM dependencies. Target frameworks include web platform (vanilla HTML/CSS/JS), React, Astro, Twig templates, Node.js, and Bun. Based on OWASP security guidelines.
-
schalkneethling Bundle Github Goal Issue Triage 2Triage open GitHub issues across one or more repositories against each repository's GOAL.md, create missing p0/p1/p2/p3 priority labels, apply exactly one priority label to each open issue, nominate the next issue to work on per repository, and generate a clean HTML report grouped by project. Use when asked to prioritize, label, rank, audit, or report on GitHub issues based on project goals.
-
stiron92-byte Bundle Doc Automation다양한 형식의 파일(CSV, 엑셀, PDF, Word, PPT, HTML, Markdown 등)을 분석하여 주간 보고 PPT와 요약 이메일을 자동 생성합니다. 보고서 작성, PPT 생성, 데이터 분석, 문서 요약이 필요할 때 사용하세요.
-
neversight Bundle Compiler Development 2Build NeverC or other LLVM compilers across frontend, IR, optimization, code generation, ABI, and target support. Use when the compiler pipeline is the subject; use narrower LLVM skills for isolated tooling or analysis.
-
first-fluke Bundle QA Agent 2Quality assurance specialist for security, performance, accessibility, and comprehensive testing
-
first-fluke Bundle Mobile Agent 2Mobile specialist for Flutter, React Native, and cross-platform mobile development
-
first-fluke Bundle Frontend Agent 2Frontend specialist for React, Next.js, TypeScript, and modern UI development
-
first-fluke Bundle Multi Agent Workflow 2Guide for coordinating PM, Frontend, Backend, Mobile, and QA agents on complex projects using Antigravity's Agent Manager UI
-
haowjy Bundle Structured Artifact 2Load when building a static HTML artifact: single page or multi-page site to make structured information explorable through layout and navigation.
-
theworstprogrammerever Bundle Coding StyleApply Ryan Hayward's engineering preferences to fixes, refactors, accessibility, tests, security, host-diagnostic evidence, fixtures, pagination and keyset cursors, structured config, artifact conformance, downloadable skill artifacts, lockfiles, artifact caches and promotion, launcher checks, global npm CLIs, filesystem modes, stale locks, destructive devices, secret hydration and CLI isolation, temporary credential namespaces, reversible credential rotation, no-echo PTY handoff, elevated launchers, external effects, persistent host-profile inboxes, atomic replacement, sensitive-file migration, durable-state and recovery validation, replay, retry, clock and process identity, Codex errors, URL/path validation, subprocesses, systemd activation transactions, timers and TTYs, live checkpoints, cancellation and orchestration, GitHub Actions containers, Bash, reviews, templates, React, TypeScript, and validation planning.
-
theworstprogrammerever Bundle Supabase React TSBuild, scaffold, or refactor Supabase-backed React TypeScript apps in Ryan Hayward's MicroSaaS style. Use when Codex is asked to create a Vite React TSX app with Supabase Auth, Supabase Edge Functions, Row Level Security, private Realtime Broadcast authorization or externally minted short-lived sessions, local/LAN Supabase development, Netlify runtime config, command/query dispatch, semantic app UI, security integration tests, or to replace the older Day Painter React starter with a Supabase-backed starter.
-
theworstprogrammerever Bundle Linear Review WorkflowRun evidence-backed Linear issue and agent artifact reviews, including GitHub PR reviews, research/spec reviews, ops/local-host reviews, durable-note/shared-guidance reviews, UI/accessibility reviews, security/auth/data reviews, and long-running-job handoff reviews. Use when Codex is asked to review a Linear issue, act as a reviewer agent, validate a submitted artifact without editing it, run no-side-effect advise-mode review, route review outcomes back through Linear/GitHub, or verify reviewer independence and merge readiness.
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 hardware-html-documentation, openui, agent-ui-workflows. 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.