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.
-
mturac Skill Backend Patterns 2Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
-
mturac Skill Coding Standards 2Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
-
mturac Bundle Frontend Slides 2Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
-
mturac Skill Accessibility 2WCAG 2.2 レベル AA 標準を用いてインクルーシブなデジタルプロダクトを設計・実装・監査します。Web 用のセマンティック ARIA および Web・ネイティブプラットフォーム(iOS/Android)のアクセシビリティトレイトを生成するために使用します。
-
mturac Skill Backend Patterns 3Node.js, Express ve Next.js API routes için backend mimari kalıpları, API tasarımı, veritabanı optimizasyonu ve sunucu tarafı en iyi uygulamalar.
-
mturac Skill Coding Standards 3TypeScript, JavaScript, React ve Node.js geliştirme için evrensel kodlama standartları, en iyi uygulamalar ve kalıplar.
-
mturac Skill Nextjs Turbopack 2Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.
-
mturac Skill Accessibility 3使用 WCAG 2.2 Level AA 标准设计、实施和审计包容性数字产品。运用此技能为 Web 生成语义 ARIA,并为 Web 和原生平台(iOS/Android)生成无障碍特性。
-
mturac Skill Flutter Dart Code ReviewLibrary-agnostic Flutter/Dart code review checklist covering widget best practices, state management patterns (BLoC, Riverpod, Provider, GetX, MobX, Signals), Dart idioms, performance, accessibility, security, and clean architecture.
-
mturac Skill Frontend Patterns 2React, Next.js, state yönetimi, performans optimizasyonu ve UI en iyi uygulamaları için frontend geliştirme kalıpları.
-
mturac Bundle Frontend Slides 3从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式,或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。
-
mturac Skill Nextjs Turbopack 3Next.js 16+とTurbopack — インクリメンタルバンドリング、FSキャッシング、開発速度、Turbopackとwebpackをいつどちらかどうかを選ぶか。
-
yigityildiz0 Bundle Vercel React Native SkillsReact Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance.
-
yigityildiz0 Bundle Vercel Composition PatternsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing.
-
yigityildiz0 Bundle Vercel React Best PracticesReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring.
-
yigityildiz0 Skill Workflow Visualizer 2Create an accessible, self-contained workflow diagram as HTML, Mermaid, or SVG from a process description. Use to map systems, data flows, decisions.
-
yigityildiz0 Bundle Vercel React View TransitionsGuide for implementing smooth, native-feeling animations using React's View Transition API (`[ViewTransition]` component, `addTransitionType`, and CSS view.
-
whyzsm Bundle UI UX Pro MaxUI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
-
whyzsm Bundle Web Development 2Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.
-
wenjunduan Bundle Playwright 2Playwright browser/E2E testing workflow for runtime verification. Use when Claude needs to add, run, debug, or document frontend/browser tests, smoke-test a dev server, verify UI flows during athena-runtime-verify, capture traces/screenshots, or turn manual browser checks into repeatable tests.
-
awesome-genmedia Skill Text To Speech 2Convert text to natural-sounding speech using each::sense AI. Generate high-quality voiceovers with multiple voices, accents, languages, and emotional tones. Supports long-form narration, short clips, and real-time streaming. Use for: audiobooks, accessibility, video narration, language learning, app voice interfaces, automated announcements. Triggers: text to speech, tts, ai voice, speech synthesis, read aloud, voice generator, narration, text reader, convert text to audio, spoken word, voice output, ai narrator
-
ultroncore Skill Expo Skills 2Expo React Native mobile app development with RevenueCat payments, AdMob ads, i18n localization, onboarding flow, paywall, and NativeTabs navigation
-
ultroncore Skill UI Visual Creation Stack 2Use when the task involves UI design, UX ideation, web visuals, app screens, mockups, wireframes, landing pages, design systems, component visuals, visual iteration, layout generation, redesigns, style directions, or handoff-ready design workflows. Activates automatically for any visual product work.
-
ffsshhttiikk Skill Astro PhysicsCelestial objects and cosmic phenomena
-
ffsshhttiikk Skill React Native 2Cross-platform mobile framework using React and JavaScript
-
codyswanngt Bundle Expo BrownfieldIntegrate Expo and React Native…
-
codyswanngt Bundle Expo Tailwind SetupSet up Tailwind CSS v4 in Expo…
-
nevaberry Bundle Astro Knowledge Patch 2Astro
-
nevaberry Bundle React Knowledge Patch 2React
-
nevaberry Bundle Vuejs Knowledge Patch 2Vue.js
-
nevaberry Bundle Nextjs Knowledge Patch 2Next.js
-
nevaberry Bundle Svelte Knowledge Patch 2Svelte
-
ntizar Skill Static Digest Pipeline 2Static Digest Pipeline - Patron de Digest Semanal
-
vril-labs Bundle Tanstack Query 2TanStack Query (React Query) v5
-
s3yed Skill 21st Dev 2Install and use 21st.dev components — the largest shadcn/ui-compatible registry of React + Tailwind + Framer Motion components (Magic UI, Aceternity UI, originui, eldoraui, kokonutui, Skiper UI, etc.). Use when the user wants Awwwards-tier homepage polish, animated heroes, marquees, bento grids, scroll reveals, pricing cards, testimonials, FAQ accordions, or any high-quality landing-page block. Stack: Next.js + Tailwind 4 + React 19 + framer-motion.
-
s3yed Skill Frontend A11YAccessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building any interactive UI component or form.
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 backend-patterns, coding-standards, frontend-slides. 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.