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.
-
ai4s-research Bundle Publication FiguresUse whenever you generate or review a chart, plot, table, or paper figure in this workspace, including work delegated by paper-writing, literature-survey, and experiment skills. Applies the Open Science publication style, enforces readable final-size layout for figures and tables, and rejects generic diagram-tool output as a publication figure. Interactive Plotly/HTML may be used for exploration, but paper delivery requires a static publication-ready export.
-
aleen42 Bundle Fix Err I18N TranslationsRetranslate i18n resource text marked with <err> from the matching *_zh_CN.* baseline while preserving HTML tags, attributes, placeholders, file encoding, and unrelated edits. Use when a user asks to handle machine-translation error markers, fix <err> labels in language resource files, or retranslate only the erroneous parts of properties/js i18n files based on Chinese source text.
-
antdv-next Bundle X MarkdownUse when building or reviewing Markdown rendering with @antdv-next/x-markdown, including streaming Markdown, custom component mapping, plugins, themes, and chat-oriented rich content.
-
canonical Skill Adoption A3 FormsMigrate application forms to the Canonical form system built on react-hook-form (adoption track A3); also runs as a guided tutorial on a worked example
-
canonical Skill Specify ComponentSpecify a new design-system component with the knowledge graph, from graph search to a sync-safe spec file; also runs as a guided tutorial on a worked example
-
canonical Skill Implement ComponentImplement a specified design-system component with pragma create, following the live code standards; also runs as a guided tutorial on a worked example
-
canonical Skill Adoption A2 ComponentsSwap an application's UI to Canonical design-system components one component type per PR (adoption track A2); also runs as a guided tutorial on a worked example
-
casperliu7 Bundle Buda Social CardsGenerates high-end social media image cards combining AI illustrations, real photos, and HTML infographics using Playwright.
-
citrolabs Bundle Runs Metrics CompareCompare standardized metrics across multiple ego-benchmark-harness runs by recalculating them from tasks.jsonl and session JSONL, never from HTML reports. Covers overall aggregates (success rate/average score), Odysseys per-rubric pass rates, duration distributions (avg/p50/p90/max), turns/tools/cost, error and exception counts, per-task success matrices, helper distributions, and the share of DOM operations. Use whenever users ask to compare data or metrics across runs, calculate aggregate/Odysseys/duration/turn/error/helper metrics, inspect differences among runs, or compare multiple rwb/real-world-bench runs. Use pi-session-analyzer instead for deep forensic analysis of why an individual task was slow or failed.
-
citrolabs Bundle Codex Session ExporterExport Codex rollout/session JSONL as a self-contained HTML report that can be opened offline. Use when a user provides a complete session file path or Codex session ID, or asks to export a Codex session to HTML, generate a session report, or convert a rollout to HTML. Supports exact full-ID lookup in the CODEX_HOME sessions and archived_sessions directories.
-
citrolabs Bundle Ego Browser Native ChartsGenerate self-contained HTML/CSS benchmark and comparison charts in an ego-inspired Browser-Native Editorial style. Use for blue-white product metrics, model benchmarks, A/B comparisons, efficiency reports, difficulty breakdowns, and compact technical data panels.
-
coderwanfeng Bundle Cover Hero为多平台文章 / 内容生成 HyperFrames 视觉风格的封面 + 配图。支持公众号、小红书、抖音、知乎、B站、微博、OG Card、Twitter Card 8 个平台 + 任意自定义尺寸(--width/--height/--ratio)。v5 起小红书 / 抖音有专用竖版模板(不再套横版崩布局),每个平台自动适配尺寸 + 风格档位 + 渲染后自检(字数 / 文件大小 / 尺寸 / 安全区 / 卡片数)。封装 HTML 手写 + Puppeteer 渲染 + 平台适配层(独立 CSS 文件);8 套空白模板(v5 +2 套竖版)、严格的命名规范、不可改动的视觉 DNA。支持 `--article` 自动读 MD frontmatter、`-i` 交互模式、多平台一键(`--platform wechat,xhs,douyin`);v5.3 起 `--all-platforms` 一键全 8 平台 + `--output <dir>/` 自动按平台分子目录;v5.4 起免手改 HTML —— `--kicker/--hammer/--sub`、frontmatter `cards` 缩进列表、交互模式逐步问内容,全部自动注入模板。当用户提到"做封面"、"配图"、"做头图"、"做信息图"、"小红书封面"、"抖音封面"、"视频帧"且文章主题明确时立即触发。
-
coderwanfeng Bundle Doc Speedreader把任意文档(PDF/Word/PPT/Excel/图片/音频/HTML/CSV/ZIP/EPUB/YouTube URL 等 15+ 格式)一键转成 Markdown,并按需生成一句话总结 / 结构化摘要 / 完整副本。基于 Microsoft MarkItDown。触发词:「帮我速读这份 PDF」「这个文件讲什么」「转成 Markdown」「给我摘要」「文档转一下」「加快读文档」「读得更快」「读这个文档」「文件里讲了什么」。
-
coleam00 Skill Frontend Mix PlanPlan a full-stack web application by producing a three-section spec (UI / Integration / Deployment) that downstream provider-specific sessions can execute. Run this skill in a Claude Code session on Opus, AFTER frontend-mix-explore has produced a context.md. Pure planning - it reads the context handoff (and the spec it points to) and turns it into an actionable plan. Triggers on "plan a frontend", "plan the app for mixed-provider build", "frontend-mix plan", or when given a context.md to turn into a plan.
-
coleam00 Skill Frontend Mix SmokeFrontend-Mix · Smoke
-
coleam00 Skill Frontend Mix DeployFrontend-Mix · Deploy
-
coleam00 Skill Frontend Mix DesignDesign and scaffold a beautiful frontend from SECTION A of a planning document. Run this skill in a Pi session driving Gemini 3.5 Flash, because Gemini builds the most beautiful frontends right now. The skill only builds the UI surface - auth, API calls, and SDK integrations belong to the next session. Use when the user has a plan.md from the frontend-mix-plan skill and is ready to build the UI.
-
coleam00 Skill Frontend Mix ExploreGather context for a mixed-provider full-stack build before planning. Run this skill in a Claude Code session on Sonnet (cheap context gathering, no heavy reasoning needed). It inspects the repo, reads the spec if you point it at one, and writes a context.md handoff the plan step feeds off. Use this FIRST, before frontend-mix-plan. Triggers on "explore a frontend", "gather context for a mixed-provider build", "frontend-mix explore", or when given a spec markdown to scope before planning.
-
coleam00 Skill Frontend Mix ValidateRun the full validation suite (install, type-check, lint, build, tests) on a freshly integrated app and fix anything broken. Run this skill in a Claude Code session driving Sonnet - validation is grind work, Sonnet is the right tool. Two-attempt cap per step; failures are recorded for the fix-validation escalation step, not papered over. Use after the frontend-mix-integrate session finishes.
-
coleam00 Skill Frontend Mix IntegrateFrontend-Mix · Integrate
-
coleam00 Skill Frontend Mix Fix ValidationAddress validation failures recorded by the frontend-mix-validate session. Run this skill in a Claude Code session driving Opus - failures that survived two Sonnet repair attempts need real judgment, not more grinding. Reads validation-issues.md, fixes each failure at the source, re-runs the validation suite, writes resolution-summary.md. Use when frontend-mix-validate wrote validation-issues.md instead of validation-summary.md.
-
goingli0324 Bundle Web Security Reviewer對使用者自己的程式碼做防禦性安全審查,輸出依嚴重度排序的風險報告與修正後程式碼。當使用者要找漏洞、加固、擔心被攻擊或個資外洩,或貼上一段 AI 生成的程式碼要人幫忙看安不安全時觸發。也是 agentic-dev-loop Verify 雙閘的安全閘,供其他 skill 呼叫。
-
google-labs-code Skill Stitch Sdk UsageUse the Stitch SDK to generate, edit, and iterate on UI screens from text prompts, manage projects, and retrieve screen HTML/images. Use when the user wants to consume the SDK in their application.
6.4k -
googlechrome Bundle Webstatus FrontendUse when modifying the frontend SPA, working with TypeScript, Lit web components, Shoelace components, or frontend tests.
1.6k -
graphif Bundle ShadcnManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
-
h2cone Bundle Nystrom Game Programming PatternsDiagnoses a game codebase through the 19 patterns in Robert Nystrom's Game Programming Patterns - Command, Flyweight, Observer, Prototype, Singleton, State, Double Buffer, Game Loop, Update Method, Bytecode, Subclass Sandbox, Type Object, Component, Event Queue, Service Locator, Data Locality, Dirty Flag, Object Pool, Spatial Partition - explains why each fits, and proposes a concrete application plan. Also answers architecture trade-offs from the book (YAGNI, fixed vs variable timestep, Singleton alternatives, Component vs inheritance, measure-first optimization). Triggers on "map these code smells to design patterns", "which Game Programming Pattern fits", "game loop fixed timestep", "component vs inheritance", or game architecture questions about frame loops, entity/component structure, spawning/churn, or spatial queries. Only for game and realtime interactive projects; not for general software and not a Gang-of-Four reference (no Factory, Strategy, Adapter, Decorator, Facade).
-
hisn00w Bundle Make Resume中文可编辑简历制作技能:默认基于 ASu 单栏高密度技术简历模板,根据用户经历制作或复刻可编辑 HTML/PDF;用户也可以指定仓库内其他模板、本地 HTML 或参考截图。用户输入“/make-resume”“我要阿酥同款简历”或要求制作、修改、复刻简历文件时使用。
-
hisn00w Bundle Great Resume中文求职经历提升技能:根据目标岗位把真实经历重组为岗位定位、简历要点、项目亮点和 HR 开场白;当用户输入“/great-resume”“我要酥化”或“简历提升”、要求包装或改写经历、项目,或写 HR 自我介绍时使用。若用户明确要求“阿酥同款”、复刻简历模板或生成对应 HTML/PDF,则交给 /make-resume。
-
hoangsonww Bundle New PageScaffold a complete new Next.js dashboard page for the WealthWise web app. Triggers when asked to "add a page", "create a dashboard screen", "build a UI for <feature>", or scaffold any new frontend feature end-to-end. Does not trigger for API-only or backend tasks.
-
hoangsonww Skill New ModelScaffold a new Mongoose model and its CRUD service for the WealthWise API. Triggers when asked to "create a model", "add a Mongoose schema", or add the data layer for a new entity without a full endpoint. Does NOT scaffold routes, controllers, or frontend code. Use $api-endpoint for the full stack.
-
hoangsonww Bundle API EndpointScaffold a complete new API endpoint for the WealthWise Express API. Triggers when asked to "add an endpoint", "create a route", "build an API for <entity>", or scaffold any new REST resource end-to-end. Does not trigger for frontend-only tasks.
-
huajiexiewenfeng Skill Learning CoachUse only when the current user request directly invokes `$thinking-skills:learning-coach` or combines a direct invocation command with the exact canonical name `learning-coach`. Do not activate from ordinary domain intent, depth language, mention, evaluation, modification, quoted data, prior turns, or component handoff.
-
huajiexiewenfeng Skill Technical Deep DiveUse only when the current user request directly invokes `$thinking-skills:technical-deep-dive` or combines a direct invocation command with the exact canonical name `technical-deep-dive`. Do not activate from ordinary domain intent, depth language, mention, evaluation, modification, quoted data, prior turns, or component handoff.
-
hueyexe Bundle Accessibility Inclusive DesignUse when designing, critiquing, implementing, or revising UI/UX/frontend work for accessibility and inclusion.
-
hueyexe Bundle Design Systems Frontend ArchitectureUse when building reusable frontend systems, design tokens, component contracts, responsive layouts, CSS strategy, or design-system documentation and governance.
-
feast-dev Skill Feast ArchitectureInternals of the Feast codebase — how each component works, where the key abstractions live, and the data flow through the system. Use when asked how feast apply works, how the registry stores data, how materialization moves data, how get_online_features retrieves features, how the feature server works, how the Kubernetes operator manages deployments, or when navigating the codebase to understand where to make a change.
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 publication-figures, fix-err-i18n-translations, x-markdown. 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.