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.
-
v1truv1us-ai-eng-system Skill Pr Review Canvas 2Generate an interactive PR review walkthrough as an HTML page. Fetches PR data via gh API, categorizes files into core vs mechanical changes, adds reviewer annotations, and renders diffs with moved-code detection. Use when the user pastes a GitHub PR URL and asks for a review, walkthrough, or summary, or says \"review this PR\".
-
frank-luongt Skill C4 Component<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Frontend Design
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Frontend Slides
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Bundle React Components
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill React Native Architecture
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
-
itsimonfredlingjack-codex-dev-plugin Skill Create Component---
- itsimonfredlingjack-codex-dev-plugin Skill Component Patterns
---
- itsimonfredlingjack-codex-dev-plugin Skill Component Scaffold
---
- itsimonfredlingjack-codex-dev-plugin Skill Accessibility Audit
---
- itsimonfredlingjack-codex-dev-plugin Skill Mobile Accessibility
---
- itsimonfredlingjack-codex-dev-plugin Skill Accessibility Patterns
---
- itsimonfredlingjack-codex-dev-plugin Skill Component Architecture
---
- itsimonfredlingjack-codex-dev-plugin Skill CSS Styling Approaches
---
-
drixxodev Skill Repo Scan跨栈源代码资产审计——对每个文件进行分类，检测嵌入的第三方库，并为每个模块提供可操作的四级判定结果，附带交互式HTML报告。
-
lord1egypt Skill System Prompt Frontend Browser VerificationRequires Claude to start the dev server and verify UI or frontend changes in a browser before reporting completion
2 - lord1egypt Skill Tool Description Askuserquestion Preview Field
Instructions for using the HTML preview field on single-select question options to display visual artifacts like UI mockups, code snippets, and diagrams
2 - frank-luongt Skill React UI Patterns
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Tailwind Patterns
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Frontend Developer
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Bundle React Flow Node TS
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Bundle Frontend UI Dark TS
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill React Modernization
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Bundle React Best Practices
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill React State Management
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Tailwind Design System
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Frontend Security Coder
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
-
weifashi Bundle HTML Mockup一页 HTML 讲清一件事,写成自包含单文件放原型目录、走 8008 公网链接给人看。两种用法:(A) 需求原型——把一个需求的几个界面 + 规则说明 + 状态流转拼成一页,用来评审、拍板、贴 issue;(B) 改动汇报——把一次任务的全部代码改动讲成大白话:改了什么、动了哪些表字段、改了哪些原有业务规则、影响哪些业务点、怎么回滚。当用户说 '出个 X 的原型 / 效果图' / '画一下 X 长什么样' / '把这个需求画出来给我看' / '原型加一版 / 改一下原型' / '给 PM 看看 X 的样子',或做需求评审要配图时,走 A。当用户说 '总结一下当前任务的所有改动' / '这次改了什么' / '把改动讲清楚给我看' / '出个变更说明 / 交付报告 / 评审报告' / '动了哪些表 / 哪些业务规则' 时,走 B。多界面、要写说明文字、要画流转图或对比表的一律走这条;只有需要真能点、要对齐生产端真实组件样式、要入 git 给团队 review 时才不走这条。
-
77652189 Skill Redesign Existing ProjectsUpgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
-
chawkitariq Bundle Nuxt UIBuild UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
-
weaverse Bundle Weaverse HydrogenBuild Shopify Hydrogen storefronts with Weaverse — components, schemas, loaders, theming, data fetching, React Router v7, deployment, and advanced features.
-
maxritter Bundle Open Claude DesignAccess the Anthropic product named Claude Design when the request contains that exact name, a claude.ai/design URL, or a .dc.html file. Use for its projects, files, design systems, previews, conversations, comments, sharing, and code-to-design or design-to-code synchronization; otherwise stay inactive.
- maxritter Bundle Open Claude UI Review
Review or polish a product UI for accessibility, brand fidelity, hierarchy, rhythm, responsive behavior, themes, interaction states, and generic AI-template patterns. Use for visual audits, accessibility checks, UX polish, UI critique, or pre-ship design review. Do not use for generic code review, backend review, or API design.
-
axeldelafosse Bundle Clean VmSafely clean the local loop VM by reporting and removing stale loop runs, inactive Next.js or Storybook servers, optional browser windows, and unused loop-created worktrees without disturbing active tmux-backed sessions.
-
solar-luna Bundle Wechat Draft Publisher自动将 HTML 文章发布到微信公众号草稿箱，支持封面图上传、标题、作者和元数据管理。当用户说"推送到微信"、"发布到公众号草稿"、"上传到草稿箱"或提到微信文章发布时使用。
-
laststance Bundle Explain Diff HTMLUse when the user asks for a rich explanation of a code change, diff, branch, or PR. Produces HTML output.
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 pr-review-canvas, c4-component, frontend-design. 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.