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.
-
majiayu000 Bundle Vercel React Best Practices 3React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
567 - majiayu000 Bundle Interview Cheatsheet 2
Generate a long-form Chinese interview-prep cheat sheet on a specific ML/LLM topic — formulas with derivations, from-scratch PyTorch code, comparison tables, and 25 高频面试题 (L1 必会 / L2 进阶 / L3 顶级 lab). Cross-model codex review checks math, code, historical citations, and style discipline; then /render-html produces a single-file HTML with academic-newspaper template. Output: docs/tutorials/<slug>_tutorial.{md,html,review.json}. Use when the user says '写面试 cheat sheet', '写一份 X 教程', '帮我准备 Y 面试题', '出一份 X 速查', or wants a 600-1000 line Chinese tutorial on a specific ML topic.
567 - majiayu000 Bundle React Native Architecture 2
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
567 - majiayu000 Bundle Bmad Wds Modular Component Architecture 2
Reference guides for three-tier specification system (Pages, Components, Features)
567 - majiayu000 Bundle Ln 721 Frontend Restructure 2
Scaffolds new React projects or restructures monoliths to component-based architecture. Use when setting up frontend structure.
567 - majiayu000 Bundle Ln 721 Frontend Restructure 3
Frontend structure worker: SCAFFOLD new React project or RESTRUCTURE existing monolith to component-based architecture
567 -
neuralblitz Skill TailwindTailwind CSS utility-first CSS framework for rapid UI development
1 - majiayu000 Bundle Ln 721 Frontend Restructure 4
Scaffolds new React projects or restructures monoliths to component-based architecture. Use when setting up frontend structure.
567 -
zacsweers Skill Minimize Repro For Diagnostic TestMakes a minimal reproduction of a Frontend-related bug as a diagnostic test
- neuralblitz Skill Tailwindcss
Tailwind CSS utility-first CSS framework for rapid UI development
1 - neuralblitz Skill React Native
React Native mobile framework
1 - neuralblitz Skill Astro Physics
Celestial objects and cosmic phenomena
1 - neuralblitz Skill CSS Frameworks
CSS frameworks for rapid UI development
1 - neuralblitz Bundle Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
1 - neuralblitz Skill Web Design Guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
1 - neuralblitz Skill React Native 2
Cross-platform mobile framework using React and JavaScript
1 -
johnalbertini14-glitch Bundle Web MCPWebMCP - Enable AI agents to interact with your web applications through structured tools. Implements the WebMCP standard for Next.js/React apps with tool registration, event bridge pattern, and contextual tool loading. Use when building AI-agent accessible web apps, adding MCP capabilities to existing projects, or creating tool-based interfaces for AI interactions.
1 - johnalbertini14-glitch Bundle CSS
Write modern CSS with proper stacking contexts, layout patterns, responsive techniques, and performance optimization.
1 - johnalbertini14-glitch Bundle Gif
Find, search, and create GIFs with proper optimization and accessibility.
1 - johnalbertini14-glitch Bundle Markdown Slides
Convert markdown into self-contained HTML slide presentations with keyboard navigation.
1 - johnalbertini14-glitch Bundle Ralph Mode
Autonomous development loops with iteration, backpressure gates, and completion criteria. Use for sustained coding sessions that require multiple iterations, test validation, and structured progress tracking. Supports Next.js, Python, FastAPI, and GPU workloads with Ralph Wiggum methodology adapted for OpenClaw.
1 - johnalbertini14-glitch Bundle Tailwind V4 Shadcn UI Stack
Tailwind v4 + shadcn/ui Stack
1 - johnalbertini14-glitch Bundle Project Scaffolder
Scaffold new projects with best-practice templates for Next.js, Express, Python, Go, and more.
1 - johnalbertini14-glitch Bundle Ant Design Skill
Ant Design (React) — Practical Front-end Design Skill
1 - johnalbertini14-glitch Bundle React Modernization
React Modernization
1 - johnalbertini14-glitch Bundle React Composition Patterns
React Composition Patterns
1 - johnalbertini14-glitch Bundle Jina Reader
Extract clean, readable markdown content from any URL using Jina Reader API. Use when you need to fetch and parse web pages without dealing with HTML, JavaScript rendering, or paywalls. Ideal for research, article summarization, content analysis, and working with search results from tavily-search, web_search, or searxng skills.
1 - johnalbertini14-glitch Bundle Screenshot Capture
Capture screenshots on Windows using mss and Pillow. Provides full-screen, region, and multi-monitor capture with output as PIL Image, PNG file, or base64 string. Use when the user asks to take screenshots, capture screen content, get screen info, or needs screen images for AI vision APIs.
1 - johnalbertini14-glitch Bundle Python Dataviz
Professional data visualization using Python (matplotlib, seaborn, plotly). Create publication-quality static charts, statistical visualizations, and interactive plots. Use when generating charts/graphs/plots from data, creating infographics with data components, or producing scientific/statistical visualizations. Supports PNG/SVG (static) and HTML (interactive) export.
1 - johnalbertini14-glitch Bundle Afrexai Nextjs Production
Next.js Production Engineering
1 - johnalbertini14-glitch Bundle Better Auth
Complete Better Auth documentation in markdown format. Use when implementing authentication in TypeScript projects - covers OAuth providers (Google, GitHub, etc.), email/password, passkeys, 2FA, session management, database adapters (Prisma, Drizzle), and framework integrations (Next.js, SvelteKit, etc.).
1 - johnalbertini14-glitch Bundle Frontend Design
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Focuses on creative direction and memorable design choices.
1 - johnalbertini14-glitch Bundle Web Accessibility Auditor
Audits HTML/CSS for WCAG 2.1 compliance. Color contrast, ARIA labels, keyboard navigation, screen reader support.
1 - majiayu000 Bundle Perf Audit
Profile and optimize React application performance
567 - majiayu000 Bundle UX UI A11Y
접근성 검사 에이전트. 웹 접근성을 검사하고 개선합니다.
567 - majiayu000 Bundle File Upload
Complete guide for implementing file uploads in IntelliFill with React-dropzone frontend, Multer backend, file validation, Bull queue processing, and security best practices
567
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 vercel-react-best-practices, interview-cheatsheet, react-native-architecture. 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.