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.
-
shubhashjha Skill Astro Web---
- shubhashjha Skill React Web
---
-
bekhruztursunboev Skill Bexa MobilePremium mobile UI skill for React Native and Expo apps. Enforces native-grade interaction patterns, platform-specific motion, gesture physics, and non-generic visual systems for iOS and Android.
- shubhashjha Skill CSS Basics
---
- shubhashjha Skill Sentry Web
Basic skill for Sentry error monitoring, frontend exception tracking, and production issue visibility in web applications. Use when Codex needs a basic starting point for this web development area.
-
zllovesuki Skill Full Stack AppsBuild full-stack Cloudflare apps with Workers, static assets, SSR, API routes, SPA/hybrid rendering, cache headers, and binding-backed data. Use when implementing frontend-plus-backend applications on Cloudflare Workers.
- shubhashjha Skill Svelte Web
---
- shubhashjha Skill Vercel Web
Basic skill for Vercel deployment, frontend hosting, and framework friendly web application delivery. Use when Codex needs a basic starting point for this web development area.
- shubhashjha Skill Vue Router
---
- shubhashjha Skill CSS Flexbox
---
- shubhashjha Skill HTML Basics
---
- shubhashjha Skill Netlify Web
Basic skill for Netlify deployment, static site hosting, and frontend delivery workflows. Use when Codex needs a basic starting point for this web development area.
-
darshan-yadav Bundle DesignerUse when the user needs UX/UI design work — flows, screens, states, component behaviour, copy, accessibility, and engineering handoff. Prefer this over `design-reviewer` when the work is to create the design.
- darshan-yadav Bundle Design Reviewer
Use when the user wants a reviewer-style critique of mocks, flows, wireframes, or handoff specs, focused on user outcome, state coverage, accessibility, copy, and handoff readiness.
-
bluekidds Bundle Anime PilgrimageCreate interactive anime pilgrimage travel guides with real-location maps, anime-vs-reality photo comparisons, and multi-day itineraries. Use this skill whenever the user mentions: pilgrimage guide, anime locations, real-life anime spots, filming locations for anime, seichi junrei, location scouting for any anime/movie, anime travel itinerary, or wants to visit places from an anime. Supports output as interactive HTML (with Leaflet maps and comparison sliders), PDF print guide, and PPTX.
-
iamfourh2e Bundle Frontend WebTanStack Router + React frontend patterns, ConnectRPC gRPC-Web client, Zustand stores, Tailwind v4, i18n, and AppearancePanel theming for the Anachak platform.
-
sudotsu Bundle Frontend ExpertSpecialized in building modern, accessible, and performant web interfaces. Use when designing UI components, implementing React features, styling with CSS, or auditing accessibility.
-
agent-skills Bundle Frontend Design创建具有高设计水准、生产级的独特前端界面。当用户要求构建 Web 组件、页面、Artifact、海报或应用程序（例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或对任何 Web UI 进行美化/样式调整）时，应使用此技能。生成富有创意、打磨精细的代码和 UI 设计，避免平庸的 AI 审美。
- agent-skills Bundle Vercel React Best Practices
来自 Vercel 工程团队的 React 和 Next.js 性能优化指南。在编写、审查或重构 React/Next.js 代码以确保最佳性能模式时，应使用此技能。适用于涉及 React 组件、Next.js 页面、数据获取、包体积优化或性能提升的任务。
-
wimblerobotics Bundle Component Composition<!--
-
heldinhow Bundle Svelte KitBuild full-stack web applications using SvelteKit with server-side rendering.
-
minhtran3124 Bundle VisualSkill graph visualizer — scans all SKILL.md files in skills/, builds a directed relationship graph from explicit `relationships` frontmatter (falling back to content inference), and generates both a Mermaid markdown summary and an interactive HTML graph at .docs/skill-graph.html. Trigger: /visual
- minhtran3124 Bundle Create Wiki
Deep-investigate a codebase and generate a single-page project wiki at .docs/index.html. Use this skill whenever the user asks to "create a wiki", "generate docs", "document this project", "explain this codebase", "make a project wiki", or wants a comprehensive HTML overview of a repository. Also trigger when the user says /create-wiki. Even if the user just says "wiki" in the context of documentation, use this skill.
- heldinhow Bundle Astro Framework
Build fast websites with Astro framework. Perfect for content-focused sites, blogs, and landing pages.
- heldinhow Bundle Frontend Design
Create professional, distinctive frontend designs. Use for any UI work, component creation, or design decisions.
-
lisovet Bundle IOS Frontend DesignDesign and build distinctive, production-grade iOS interfaces in SwiftUI. Use this skill when the user asks to create iOS screens, views, navigation flows, component systems, or full applications. Produces creative, polished SwiftUI code that honors Apple Human Interface Guidelines while rejecting generic AI-generated aesthetics. Standalone — no dependencies on other skills.
- heldinhow Skill Pulumi
Use when provisioning cloud infrastructure with Pulumi using TypeScript or Python. Covers AWS, GCP, Azure resources, stacks, state management, and component resources as Infrastructure as Code.
- heldinhow Skill Vitest
Use when writing or running unit tests with Vitest in TypeScript/JavaScript projects. Covers test setup, assertions, mocking, coverage, and integration with React Testing Library.
- heldinhow Bundle T3 Stack
Build full-stack TypeScript applications using T3 Stack (Next.js, tRPC, Prisma, Tailwind).
- heldinhow Skill Shadcn UI
Use when building UIs with shadcn/ui components in React/Next.js projects. Covers setup, component usage, theming, customization, and composition patterns with Tailwind CSS.
- heldinhow Skill Storybook
Use when setting up or writing Storybook stories for React components, building component documentation, or creating visual test scenarios with controls, decorators, and play functions.
- heldinhow Bundle React Vite Patterns
Build React applications with Vite for fast development and optimized builds.
- heldinhow Bundle Web Artifacts Builder
Build production-quality HTML artifacts using React, Tailwind CSS, and shadcn/ui.
-
ckulwik Skill Front End Best PracticesApplies framework-agnostic web UI guidelines for layout, spacing, modals, accessibility, loading states, and motion. Use when writing or reviewing HTML/CSS/JS front ends, design systems, component libraries, or UI in any framework (React, Vue, Svelte, Angular, Lit, etc.).
-
tonyyu470 Skill Wechat Article De AI检测并弱化微信公众号文章的「AI生成感」表述，在保留事实与结构的前提下改写正文，降低平台对机器生成内容的判定风险。 针对 wechat-article-writer 产出的 minimax-output/article.md 与 article.html 做审计与修订。 Use when: 用户提到 AI味、去AI味、人味、机器味、降AI率、公众号原创度、内容审查、润色防检测、 humanize、de-AI、文章像AI写的、改写得更自然，或在 wechat-article-writer 成稿后要求二次处理。
- tonyyu470 Bundle Wechat Article Writer
撰写微信公众号文章，方向为 AI+教育应用、中高考志愿填报与政策解读，面向 30-50 岁家长用户。 接收选题和要求后，搜集全网内容，整理成 800-5000 字的深度图文文章，从网络搜索配图， 输出微信富文本 HTML（可直接粘贴到公众号编辑器二次编辑）和 Markdown 两种格式。 Use when: 用户提到公众号文章、写文章、推文、AI教育、高考志愿、升学政策、中考政策、教育文章、 WeChat article、公众号推文、写推文、家长文章、教育内容创作。
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 astro-web, react-web, bexa-mobile. 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.