This article catalogues the most popular and impactful Claude Code skills for frontend development, web design, and web-based presentation creation as of April 2026. Skills are reusable instruction sets that extend Claude Code's capabilities in specific domains. They can be installed globally or per-project and activate automatically when relevant tasks are detected.
Author: Anthropic | Installs: 277,000+ | Licence: Anthropic licence
The flagship Anthropic skill for generating distinctive, production-grade frontends. It steers Claude away from generic "AI slop" aesthetics by enforcing a design-thinking framework: purpose, tone, constraints, and differentiation are considered before any code is written.
Key features: Distinctive typography (no Arial/Inter defaults), cohesive colour palettes via CSS variables, CSS-only and Motion-library animations, asymmetric layouts, gradient meshes, noise textures, scroll-triggered reveals, and custom cursors.
Supports: HTML/CSS/JS, React, Vue, and any modern framework.
Install: npx skills add anthropics/skills@frontend-design -g -y
Author: NextLevelBuilder | Licence: MIT
A comprehensive design-intelligence database for Claude. Where Frontend Design gives Claude creative direction, UI/UX Pro Max gives it a searchable reference library: 50+ UI styles, 161 colour palettes, 57 font pairings, 99 UX guidelines, 161 product-type templates, and 25 chart types.
Key differentiator: Covers 10 technology stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS). v2.0 introduced a Design System Generator that analyses project requirements and produces a complete, tailored design system.
Install: npx skills add nextlevelbuilder/ui-ux-pro-max-skill@ui-ux-pro-max -g -y
Author: Vercel Labs | Licence: MIT
An automated quality gate that reviews UI code against 100+ rules covering accessibility, performance, and UX. Based on Vercel's Web Interface Guidelines, a distillation of years of design-system experience.
Key differentiator: Where Frontend Design focuses on creative direction, this skill focuses on compliance and correctness. They work well together — one generates bold UI, the other audits it.
Usage: /web-design-guidelines <file>
Install: npx skills add vercel-labs/agent-skills --skill web-design-guidelines
Author: Vercel Labs | Licence: MIT
Encapsulates 10+ years of React and Next.js optimisation knowledge into 40+ rules across 8 categories, prioritised by impact from critical to incremental. Vercel Engineering published this in January 2026 specifically for AI agent consumption.
Key differentiator: Performance-focused rather than visual. Rules cover waterfall elimination, bundle size, proper data fetching patterns, server/client component boundaries, and code splitting. Designed to complement the design-oriented skills above.
Install: npx skills add vercel-labs/agent-skills --skill react-best-practices
Author: Anthropic | Licence: Anthropic licence
Specialised in building complex, multi-component interactive web artifacts directly inside Claude.ai. Ideal for prototyping dashboards, interactive demos, and standalone single-page apps that need state management, routing, or component composition.
Key differentiator: Optimised for the Claude.ai artifact sandbox. Uses React + Tailwind CSS + shadcn/ui as its stack. Produces self-contained artifacts that run in-browser without a build step.
Install: npx skills add anthropics/skills --skill web-artifacts-builder
Author: Ryan B. Brown | Licence: MIT
Generates polished, professional Reveal.js HTML presentations from natural language prompts. No build step required — outputs self-contained HTML files ready to open in a browser or deploy to any static host.
Key features: Multiple themes and colour palettes, Chart.js data visualisation, Font Awesome icons, speaker notes, animations, transitions, overflow detection, PDF export, and in-browser inline text editing.
Key differentiator: The most feature-rich of the presentation skills. Claude plans the structure, selects design, generates code, detects overflow, and reviews slide screenshots for visual accuracy — a full end-to-end pipeline.
Install:
/plugin marketplace add ryanbbrown/revealjs-skill /plugin install revealjs@revealjs-skill npm install --prefix ~/.claude/plugins/cache/revealjs
Author: zarazhangrui | Licence: MIT
Creates stunning, animation-rich HTML presentations without design expertise. Emphasises zero dependencies — each deck is a single HTML file with inline CSS and JavaScript. No npm, no build tools, no frameworks.
Key differentiator: Visual Style Discovery workflow — instead of describing what you want, you pick from generated style previews. Also supports PowerPoint-to-web conversion (preserving assets) and PDF export via Playwright. Deployable to Vercel for a permanent shareable URL.
Install:
/plugin marketplace add zarazhangrui/frontend-slides /plugin install frontend-slides@frontend-slides
Author: Roland Huß | Licence: MIT
Developer-focused presentation skill using Slidev (Vue-powered Markdown slides) with evidence-based design guardrails enforced as hard limits, not suggestions. Built for technical talks and developer conferences.
Key differentiator: Cognitive-science-backed constraints — max 6 elements per slide, <50 words of body text, one idea per slide, assertion-based titles, minimum 18pt fonts, 4.5:1 contrast ratios, and colourblind-safe palettes. Also supports code syntax highlighting (100+ languages), live Monaco editor, Mermaid/PlantUML/Excalidraw diagrams, and multi-format export (PDF, PPTX, PNG).
Install:
/plugin marketplace add rhuss/cc-rhuss-marketplace /plugin install slidev@cc-rhuss-marketplace
Requires: Node.js v18+, npm install -g @slidev/cli
Author: nibzard | Licence: MIT
Analyses and improves Marp Markdown presentations using SlideGauge. Unlike the creation-focused skills above, this one is a quality reviewer for existing Marp decks.
Key differentiator: Scoring system (0–100) with automatic activation on .md files containing marp: true. Identifies excessive bullet points, overly long content, oversized titles, code blocks, and contrast issues. Ships with REFERENCE.md (rule details), EXAMPLES.md (before/after fixes), and FIXES.md (quick reference).
Install: Copy SKILL.md to ~/.claude/skills/marp-slide-quality/
Author: Anthropic | Licence: Anthropic licence
Transforms Claude into a visual artist for creating museum-quality static media — posters, brand assets, infographics, and artwork — in PNG and PDF format. Uses a two-step process: first articulate a Visual Philosophy (a 4–6 paragraph manifesto about form, space, colour, scale, rhythm, and composition), then execute it onto a digital canvas.
Key differentiator: Philosophy-first approach to visual creation rather than template-filling. Creates original designs (never copies existing artists). Ideal for web-publishable brand assets, social media graphics, and presentation imagery. Outputs can be embedded directly in web pages or slide decks.
Install: npx skills add anthropics/skills --skill canvas-design
Author: Remotion team | Licence: MIT (skill) / Remotion licence (framework)
The only video-generation skill. Teaches Claude how to create programmatic videos using Remotion (React for video). Translates natural language into working Remotion components. Covers 29 domain-specific rules spanning 3D, animations, audio, captions, charts, and transitions.
Key differentiator: Enables creation of animated explainer videos, product demos, data visualisations, and animated headers — all as web-publishable MP4 content built with React and TypeScript. Particularly useful for product launches, release announcements, and animated README headers.
Install: npx skills add remotion-dev/skills
Author: kaisersong | Licence: MIT
Similar to Frontend Slides but with 21 design presets (vs 12), a two-stage --plan / --generate workflow, Presenter Mode with synced speaker window and timer, and in-browser editing with Ctrl+S save. Enforces design quality baselines (minimum 65% slide fill, no 3 consecutive bullet slides, 90/8/2 colour rule). Also zero-dependency single HTML output.
Author: daymade | Licence: MIT
The only skill focused on native PPTX output (via python-pptx). Applies storytelling principles (Pyramid Principle, assertion-evidence format) and self-evaluates using a rubric — if the score is below 75, it auto-refines up to 2 iterations. Falls back to Marp-compatible Markdown if python-pptx is unavailable.
Author: sickn33 | Skills count: 1,370+ | Licence: MIT
Not a single skill but a mega-library of 1,370+ agentic skills covering every category imaginable, including dozens of frontend and design skills. Works across Claude Code, Cursor, Codex CLI, Gemini CLI, GitHub Copilot, and Antigravity IDE. Includes a CLI installer, bundles, and workflows.
Key differentiator: One-stop shop. If none of the focused skills above fit your need, there's probably something in here. Organised by category with single-command installs.
| Skill | Category | Source | Focus | Output | Stacks |
|---|---|---|---|---|---|
| Frontend Design | Design | Anthropic | Creative direction, bold aesthetics | Code (components, pages) | Any (HTML/React/Vue) |
| UI/UX Pro Max | Design | Community | Design database & system generation | Design systems, code | 10 stacks incl. mobile |
| Web Design Guidelines | Audit | Vercel | A11y, perf, UX compliance | Review reports | Any web |
| React Best Practices | Perf | Vercel | React/Next.js optimisation | Optimised code | React, Next.js |
| Web Artifacts Builder | Builder | Anthropic | Complex interactive artifacts | Self-contained apps | React + Tailwind + shadcn |
| Reveal.js Skill | Slides | Community | Full-featured slide decks | HTML presentations | Reveal.js |
| Frontend Slides | Slides | Community | Zero-dependency web slides | Single HTML files | Vanilla HTML/CSS/JS |
| Slidev Skill | Slides | Community | Dev talks with guardrails | Slidev decks (MD + Vue) | Slidev, Mermaid, LaTeX |
| Marp Slide Quality | Slides (QA) | Community | Presentation quality review | Quality reports | Marp Markdown |
| Canvas Design | Creative | Anthropic | Static visual media & brand assets | PNG, PDF | Framework-agnostic |
| Remotion | Video | Vendor | Programmatic video creation | MP4, web video | React + TypeScript |
| Slide Creator | Slides | Community | 21-preset web slides + presenter mode | Single HTML files | Vanilla HTML/CSS/JS |
| PPT Creator | Slides | Community | Native PowerPoint generation | PPTX, Marp MD | python-pptx, Marp |
| Antigravity Awesome | Collection | Community | 1,370+ skills mega-library | Varies | All |
Most skills can be installed via the npx skills CLI (maintained by Vercel Labs) or the /plugin command inside Claude Code:
# Via npx (global install) npx skills add author/repo@skill-name -g -y # Via Claude Code plugin system /plugin marketplace add author/repo /plugin install skill-name@repo # Manual (copy SKILL.md to skills directory) mkdir -p ~/.claude/skills/skill-name cp SKILL.md ~/.claude/skills/skill-name/
Skills activate automatically when Claude detects a relevant task. You can also invoke them explicitly with /skill-name in Claude Code.
Last updated: April 2026. Skill install counts, features, and availability may change.