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.
-
oimiragieo Bundle MarkitdownConvert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more.
0 -
g1joshi Skill BlazorBlazor .NET WebAssembly and Server framework. Use for C# frontend.
- oimiragieo Bundle Vue Expert
Vue.js ecosystem expert including Vue 3, Composition API, Nuxt, and Pinia
0 - g1joshi Skill Gatsby
Gatsby React static site generator with GraphQL. Use for static sites.
- g1joshi Skill Nextjs
Next.js React framework with SSR, App Router, and server components. Use for full-stack React.
- g1joshi Skill Svelte
Svelte compile-time framework with reactive declarations. Use for .svelte files.
- g1joshi Skill Nextauth
NextAuth.js authentication for Next.js. Use for Next.js auth.
- g1joshi Skill Storybook
Storybook UI component development and testing. Use for component testing.
- oimiragieo Bundle Design And User Experience Guidelines
Specifies design and user experience guidelines, including dark mode compatibility, responsive design, performance optimization, modern UI, and accessibility. This rule promotes a user-friendly and vi
0 - g1joshi Skill Solidjs
SolidJS reactive UI library with fine-grained reactivity and JSX. Use for performant React-like apps.
- g1joshi Skill Vuetify
Vuetify Material Design component framework for Vue. Use for Vue UI.
- g1joshi Skill HTML CSS
HTML5 and CSS3 for web structure, styling, flexbox, grid, and responsive layouts. Use for .html and .css files.
- g1joshi Skill Chakraui
Chakra UI accessible React components. Use for React UI.
- g1joshi Skill Shadcnui
shadcn/ui copy-paste React components. Use for modern React UI.
- g1joshi Skill React Native
React Native cross-platform mobile with JavaScript. Use for iOS/Android.
- g1joshi Skill Bootstrap
Bootstrap CSS framework for responsive design. Use for quick styling.
- g1joshi Skill Sveltekit
SvelteKit full-stack Svelte framework with SSR and routing. Use for Svelte applications.
- g1joshi Skill Materialui
Material UI React component library. Use for React UI.
- oimiragieo Bundle Nativewind And Tailwind CSS Compatibility
Provides specific version compatibility notes for NativeWind and Tailwind CSS to prevent common installation errors.
0 - oimiragieo Bundle Astro Expert
Astro framework expert including components, content collections, and integrations
0 - g1joshi Skill Tailwindcss
Tailwind CSS utility-first framework. Use for custom designs.
- g1joshi Skill Testing Library
Testing Library user-centric testing. Use for React testing.
-
ariffazil Skill Forge Nextjs MasteryNext.js App Router engineering — server components, streaming, and edge patterns.
- ariffazil Skill Forge Komda Color Law
Komda Color Law lint — enforces SOVEREIGN_DECREES §04 (territory color families). Use when generating, editing, or auditing any visual artifact (HTML/SVG/CSS) that claims a federation territory (arifos / geox / wealth / well / aaa). Foreign-family color in territory DOM = violation per F13 SOVEREIGN doctrine (2026-08-01).
- oimiragieo Bundle Next Upgrade
Structured workflow for upgrading Next.js applications across major versions. Use when migrating a Next.js project from one major version to another (e.g., 13 to 14, 14 to 15, 15 to 16). Covers codemod automation, breaking change detection, incremental migration paths, and post-upgrade validation.
0 - oimiragieo Bundle React Expert
React ecosystem expert including hooks, state management, component patterns, React 19 features, Shadcn UI, and Radix primitives
0 - oimiragieo Bundle Accessibility
Ensure accessibility in UI components including semantic HTML, ARIA attributes, keyboard navigation, and WCAG 2.2 AA compliance.
0 - oimiragieo Bundle HTML Tailwind CSS And Javascript Expert Rule
Sets the AI to act as an expert in HTML, Tailwind CSS, and vanilla JavaScript, focusing on clarity and readability for all HTML, JS, and CSS files.
0 -
boshi-xixixi Bundle Artifacts Builder当用户需要创建复杂的多组件 HTML Artifacts（包含 React、Tailwind CSS、shadcn/ui）时使用。此 Skill 用于需要状态管理、路由或 shadcn/ui 组件的复杂 Artifacts，不适用于简单的单文件 HTML/JSX。
- boshi-xixixi Bundle Vercel React Best Practices
当用户需要编写、审查或重构 React/Next.js 代码时使用。此 Skill 提供来自 Vercel Engineering 的 React 和 Next.js 性能优化指南，包含 45 条规则，涵盖组件优化、bundle 大小、数据获取等方面。
- oimiragieo Bundle Nextjs Expert
Next.js framework expert including App Router, Server Components, and API routes
0 - oimiragieo Bundle Svelte Expert
Svelte and SvelteKit expert including components, stores, and routing
0 - boshi-xixixi Bundle Frontend Design
当用户需要构建网页组件、页面、应用程序或任何 Web UI（网站、着陆页、仪表板、React 组件、HTML/CSS 布局）时使用。此 Skill 生成独特、生产级的前端界面，注重高质量设计和避免通用 AI 风格。
- oimiragieo Bundle User Research
UX research methodology skill — usability testing protocols, user interview frameworks, persona development, journey mapping, heuristic evaluation (Nielsen's 10), A/B test analysis, accessibility auditing, and research synthesis using NNGroup methodology.
0 - oimiragieo Bundle Vercel Deploy
Zero-auth Vercel deployment workflow with automatic framework detection for 20+ frameworks. Use when deploying web applications to Vercel, creating preview deployments, or setting up deployment pipelines. Supports Next.js, Vite, Remix, SvelteKit, Astro, Nuxt, and more.
0 -
tibsfox Bundle Vision To MissionTransform a user's builder vision into a complete, executable GSD mission package. Use this skill whenever a user has described what they want to BUILD (a product, tool, feature, system, educational pack, or ecosystem component) and wants it structured for GSD execution. Triggers include: 'structure this for GSD', 'make this into a milestone', 'turn this vision into a mission', 'package this up for Claude Code', 'create the mission files', 'I want to hand this to GSD', 'make me a mission package', or any request to decompose a described system into wave-based executable tasks. Also trigger when the user has a vision doc already written and needs mission decomposition. Prefer this skill over generic document creation whenever the GSD ecosystem is mentioned alongside building something.
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 markitdown, blazor, vue-expert. 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.