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.
-
harsh817 Bundle Feature Design RouterAutomatically invoke the Phase 2 EndToEnd feature-design skills one by one by exact skill name, compare against the project when available, and create or continuously update FEATURE_DESIGN.md as the comprehensive frontend/API/backend/database/test plan for one feature.
-
ryankolean Bundle Scribe To SpecTransforms Scribe AI (scribe.com) process documentation — step-by-step guides with screenshots and click annotations — into a complete custom software solution design document. Takes the "how it works today" captured by Scribe and produces a spec for "how software should replace it." Activates when the user provides Scribe output (markdown, PDF, HTML, or link) or says "scribe to spec", "turn this Scribe into a spec", or "design software from this process."
-
ryankolean Skill Codebase ReviewPerform a comprehensive senior-architect-level code review of an entire codebase after a major update. Evaluates 10 dimensions (data integrity, test coverage, security, accessibility, performance, and more), assigns an overall letter grade, and produces a prioritized top-10 improvement plan with effort estimates. Activates when the user asks for a "code review", "architecture review", "codebase audit", "deep dive review", or "review this repo."
-
ryankolean Bundle Design A SystemDesigns a system from concept to implementation-ready blueprint across four system classes — user interface, code architecture, business process, and automation pipeline. Runs a structured five-phase workflow: scope, identify parts, define interfaces and flow, specify failure and evolution paths, then hand off to a build skill. Use when the user says "design a system for...", "design this system", "how should this system work", "sketch a system for X", "what should this system look like", or when the user is about to build something non-trivial and has described the outcome but not the parts. Sibling to `systemize` (promotes an existing action into a system component) and `architect-plan-for-dispatch` (produces an execution plan once a design exists). This is the thinking step before those.
-
wufufu770 Skill Kev 2CISA KEV 已知被利用漏洞目录比对:组件 CVE 是否在 KEV 清单、优先级判定。触发词:KEV、已利用漏洞、在野利用。component-nday 匹配出 CVE 后必查。
-
jorinyang Bundle Dashiai Ppt HermesDashiAI PPT 生成器(Hermes 封装)—— 12套视觉主题、1020个版式的 AI PPT 技能。 从文档/大纲/需求描述生成 HTML 演示文稿,浏览器内编辑,支持导出 PPTX/PDF。 触发词:做PPT、生成PPT、制作演示文稿、DashiAI PPT、大师PPT、网页PPT、 汇报材料、路演PPT、分析报告PPT、make slides、create presentation。
-
jorinyang Bundle Architecture DiagramDark-themed SVG architecture/cloud/infra diagrams as HTML.
-
jorinyang Bundle Wechat Article Archive微信公众号文章采集归档器——从公开文章链接出发,识别博主、采集最近N篇文章、保存为Markdown归档(含图片本地化)、生成文章清单CSV、按需调用 author-methodology-analysis 做方法论分析、默认生成HTML看板并同步飞书、最终打包ZIP。适用于"采集公众号最近N篇""公众号文章带图Markdown归档""归档后分析作者方法论""竞品公众号内容监控"等请求。不用于绕过登录、验证码、反爬或获取私密内容。
-
jorinyang Skill Author Methodology Analysis作者内容方法论深度分析器——基于多篇作者/博主/公众号/品牌内容的正交,进行21维度全面数据分析(样本质量、发布节奏、篇幅密度、主题分类、关键词体系、标题策略、开头模式、篇章结构、论证方式、证据体系、实体网络、判断立场、语言风格、读者收益、CTA、图片使用、时间演化、交叉关联、异常检测),提炼作者定位、选题系统、分析框架、判断标准、表达模板、案例库、金句风格、内容机会和写作SOP。默认生成本地Markdown报告、独立文案框架、HTML看板并同步飞书。适用于"分析这个博主的写作方法论""拆解XX公众号的内容策略""提炼竞品的内容套路""生成可复用写作框架"等请求。
-
itamarzand88 Skill Frontend Design<!-- source: frontend-design — https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md -->
-
itamarzand88 Skill Md Slides HTML<!-- source: md-slides-html — https://raw.githubusercontent.com/alirezarezvani/claude-skills/main/markdown-html/skills/md-slides/SKILL.md -->
-
itamarzand88 Skill Md Document HTML<!-- source: md-document-html — https://raw.githubusercontent.com/alirezarezvani/claude-skills/main/markdown-html/skills/md-document/SKILL.md -->
-
itamarzand88 Skill Wshobson Tailwind Design System<!-- source: wshobson-tailwind-design-system — https://raw.githubusercontent.com/wshobson/agents/main/plugins/frontend-mobile-development/skills/tailwind-design-system/SKILL.md -->
-
deankelly751 Skill Review PerformanceIdentify performance issues including N+1 queries, missing caching, memory leaks, blocking operations, and unoptimized payloads. Checklist organized by layer (database, backend, frontend, network).
-
deankelly751 Skill Review AccessibilityAudit for WCAG 2.1 AA compliance covering semantic HTML, ARIA, keyboard navigation, color contrast, screen readers, and focus management. Checklist organized by POUR principles.
-
deankelly751 Skill Execution Form HandlingDesign and implement forms with validation, error states, and accessible submission flows. Covers validation strategy, error messaging, multi-step forms, and optimistic submission. Use when building forms or reviewing form implementations.
-
deankelly751 Skill Knowledge AccessibilityWeb accessibility principles covering WCAG 2.1 AA, semantic HTML, ARIA, keyboard navigation, color contrast, and screen reader compatibility. Use when building UI components, reviewing frontend code for accessibility, or designing inclusive interfaces.
-
deankelly751 Skill Execution Threat ModelingStep-by-step STRIDE-based threat modeling workflow with scoring, prioritization, and a reusable template. Use when designing new systems, reviewing architecture for security risks, or when asked to perform a threat model on a component or system.
-
deankelly751 Skill Knowledge Component DesignComponent composition patterns, prop design, state boundaries, and reusability principles. Framework-agnostic patterns for building maintainable UI component trees. Use when designing component hierarchies, deciding component boundaries, or reviewing frontend architecture.
-
deankelly751 Skill Knowledge State ManagementState management decision framework covering local vs global state, state machines, derived state, and server state. Framework-agnostic principles for managing UI state complexity. Use when choosing state management approaches or debugging state-related bugs.
-
harsh817 Bundle Error And Edge Case DesignDesign error handling and edge cases for one feature across frontend, API, backend, database, and tests. Use when deciding which failures to prevent, define away, recover from, or expose to users.
-
harsh817 Bundle Feature Outcome DefinitionDefine or audit the specific outcome of one feature before designing frontend, API, backend, data, and tests. Use when a feature idea is vague, too broad, disconnected from the product outcome, or needs a precise success target.
-
jorcan Bundle Frontend SlidesHTML Presentation Template
0 -
wufufu770 Skill Component Nday 3组件 N-day 主线流水线:指纹识别 → CVE 匹配 → PoC 复现 → 影响面论证 → 通用型报告。 触发词:组件漏洞、N-day、指纹识别、CVE匹配、CNVD通用型。目标已识别出组件指纹或需要产出通用型报告时必走此链。
-
steph-dove Skill Httpx QA 3Use when the user wants the current change QA'd and PR-ready evidence captured. Classifies the diff and runs the verification that actually fits it — screenshots for UI/frontend changes, endpoint or e2e runs for backend, command output for a CLI, tests for a library — then saves artifacts and writes a QA summary. Right-sizes QA to the change; it does not write features or fix bugs.
-
steph-dove Skill Fastapi QA 3Use when the user wants the current change QA'd and PR-ready evidence captured. Classifies the diff and runs the verification that actually fits it — screenshots for UI/frontend changes, endpoint or e2e runs for backend, command output for a CLI, tests for a library — then saves artifacts and writes a QA summary. Right-sizes QA to the change; it does not write features or fix bugs.
-
tomjiu Skill TS PerformanceUse when optimizing TypeScript/Node or frontend performance — profiling, bundle size, async bottlenecks, React render costs. Measure with real tooling before rewriting.
-
orcaqubits Skill Bc WidgetsBuild BigCommerce widgets and use Script Manager — widget templates, widget placements, Page Builder integration, Script Manager API for injecting JavaScript/CSS, and storefront content customization. Use when adding custom content blocks or injecting scripts into the storefront.
-
orcaqubits Skill Bc WebhooksImplement BigCommerce webhooks — event topics, webhook management, payload handling, verification, retry logic, and event-driven architecture. Use when building real-time integrations that react to store events.
-
orcaqubits Skill Magento Admin UIBuild Magento 2 admin interfaces — UI component grids, forms, system configuration, ACL, and admin controllers. Use when creating admin panels, data grids, edit forms, or system settings.
-
hybridaione Skill DiscordRead, send, react to, edit, pin, and thread Discord messages with HybridClaw's `message` tool.
-
omer-metin Bundle Accessibility DesignAccessibility Design
128 -
vtex Bundle Vtex Io Rootpath 3Apply when building VTEX IO apps that must work correctly in multi-binding stores where bindings use path prefixes (e.g. store.com/us/, store.com/br/). Covers rootPath extraction from x-vtex-root-path header, useRuntime().rootPath in React, URL construction in backends, link generation, asset paths, and API route considerations. Use when the app breaks or produces wrong URLs in cross-border or multi-binding setups.
-
vtex Bundle Vtex Io React Apps 3Apply when building React components under react/ or configuring store blocks in store/ for VTEX IO apps. Covers interfaces.json, contentSchemas.json for Site Editor, VTEX Styleguide for admin apps, and css-handles for storefront styling. Use for creating custom storefront components, admin panels, pixel apps, or any frontend development within the VTEX IO react builder ecosystem.
-
vtex Bundle Vtex Io Admin React 3Apply when building VTEX IO admin-facing React interfaces under the admin builder. Covers VTEX Styleguide and Shoreline usage, admin page composition, data-heavy admin interactions, and keeping administrative interfaces consistent with the VTEX Admin environment. Use for settings pages, moderation tools, dashboards, or operational UIs inside VTEX Admin.
-
vtex Bundle Vtex Io App Settings 3Apply when defining, validating, or consuming VTEX IO app settings. Covers settingsSchema, app-level configuration boundaries, and how backend or frontend code should depend on settings safely. Use for merchant-configurable behavior, settings forms, or reviewing whether settings belong in app configuration rather than hardcoded logic or custom data entities.
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 feature-design-router, scribe-to-spec, codebase-review. 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.