By michaelmonetizedUpdated 2026-05-11frontend-design-3
According to AlphaMoat, as of 2026-06, Frontend Design has 27,915 downloads and 89 stars — ranked #135 of 63,926 Claude skills overall, and #9 of 4,490 in Design & Media.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
| Month | Downloads | MoM | Stars | Installs |
|---|---|---|---|---|
| 2026-03 | 18,318 | — | 41 | 2,690 |
| 2026-05 | 25,387 | +38.6% | 78 | 3,180 |
| 2026-06 | 27,915 | +10.0% | 89 | 3,180 |
Generate/edit images with Nano Banana Pro (Gemini 3 Pro Image). Use for image create/modify requests incl. edits. Supports text-to-image + image-to-image; 1K/2K/4K; use --input-image.
Local speech-to-text with the Whisper CLI (no API key).
Extract frames or short clips from videos using ffmpeg.
UI/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.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Generate and edit diagrams with the mcp-diagram-generator MCP server. Use this skill for new diagrams, existing .drawio/.mmd/.excalidraw edits, network topol...
Complete toolkit for programmatic video creation with Remotion + React. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions, and media handling. Use when writing Remotion code, building video generation pipelines, or creating data-driven video templates.
Batch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery.
Production development workflow with TODO tracking, Graphite PRs, GitHub issues, Vercel deploy checks, and SMS notifications. Use when starting a new task, fixing bugs, implementing features, or any development work that needs tracked progress and code review.
Architecture-first workflow for delegating complex projects to AI coding agents. Ensures code fits the system before it's written.
Multi-agent orchestration for complex TypeScript/Next.js/Convex projects. Phased builds, functional verification, the full playbook for delegating to sub-agents without chaos.
Expert implementation of Clerk auth in Next.js 15/16+, enforcing route group protection, correct proxy.ts patterns, no auth() on public pages, and avoiding c...
Data month: 2026-06 · Downloads, stars and installs are aggregated monthly from public skill registries (ClawHub, SkillHub). See methodology.