Design skills · skills · 16 picks

Claude skills for design and frontend work

Claude skills for UI design, frontend implementation, creative direction, visual systems, and repeatable web app production.

Curated by @heyclaude-editors Updated 2026-07-18

Claude skills for UI design, frontend implementation, creative direction, visual systems, and repeatable web app production.

Compared at a glance

The top 5 picks side by side on trust, install, platform support, and disclosed notes — full rationale for each below.

2 trust signals differ across this comparison (Package trust, Source provenance).

Field	V0 Rapid UI Prototyping Workflow Skill Generate React UI with v0 (Vercel): produce shadcn/ui and Tailwind CSS components and full Next.js pages from prompts, then refine and add them to your app with the shadcn CLI. Open dossier	Svelte SvelteKit Full-Stack Development Skill Build full-stack web apps with Svelte and SvelteKit. Minimal runtime overhead, reactive components, and server-side rendering. The most admired frontend framework of 2025. Svelte compiles components to vanilla JavaScript at build time, resulting in zero runtime overhead and exceptional performance. Open dossier	Vite Frontend Build Performance Optimization Skill Optimize frontend build performance with Vite's lightning-fast HMR, code splitting, and tree-shaking. Modern build tooling that has replaced Webpack as the developer favorite. Open dossier	Google Stitch Design Skills Agent Skills and plugin packs for Google Stitch design workflows, including code-to-design, design generation, design-system extraction, React and React Native conversion, shadcn/ui guidance, Remotion walkthroughs, and prompt enhancement. Open dossier	GSAP AI Skills Official GreenSock GSAP AI Skills for coding agents that need correct GSAP tweens, timelines, ScrollTrigger, React cleanup, plugins, utilities, framework lifecycle guidance, and animation performance patterns. Open dossier
Next steps	Open dossier API JSON Open LLM Open source Newsletter Claim listing	Open dossier API JSON Open LLM Open source Newsletter Claim listing	Open dossier API JSON Open LLM Open source Newsletter Claim listing	Open dossier API JSON Open LLM Open source Newsletter Claim listing	Open dossier API JSON Open LLM Open source Newsletter Claim listing
Trust
Review status	ReviewedMaintainer reviewed	ReviewedMaintainer reviewed	ReviewedMaintainer reviewed	ReviewedMaintainer reviewed	ReviewedMaintainer reviewed
Package trustDiffers	Package verified2025-10-16	Package verified2025-10-23	Package verified2025-10-23	Package not verified	Package not verified
Source provenanceDiffers	No submission link	No submission link	No submission link	Source-backed	Source-backed
Submitter	—	—	—	—	—
Install risk	Low risk	Low risk	Low risk	Review first	Review first
Notes	Safety ✓ Privacy ✓	Safety ✓ Privacy ✓	Safety ✓ Privacy ✓	Safety ✓ Privacy ✓	Safety ✓ Privacy ✓
Brand	—	—	—	Google	—
Category	skills	skills	skills	skills	skills
Source	First-party	First-party	First-party	Source-backed	Source-backed
Author	JSONbored	JSONbored	JSONbored	Google Labs Code	GreenSock
Added	2025-10-16	2025-10-23	2025-10-23	2026-06-18	2026-06-18
Platforms	Claude Code Codex Windsurf Gemini Cursor CLI	Claude Code Codex Windsurf Gemini Cursor CLI	Claude Code Codex Windsurf Gemini Cursor CLI	Claude Code Codex Windsurf Gemini Cursor CLI	Claude Code Codex Windsurf Gemini Cursor CLI
Harness	Claude Code Codex Windsurf Gemini Cursor CLI	Claude Code Codex Windsurf Gemini Cursor CLI	Claude Code Codex Windsurf Gemini Cursor CLI	Claude Code Codex Windsurf Gemini Cursor CLI	Claude Code Codex Windsurf Gemini Cursor CLI
Source repo	—	—	—	—	—
Safety notes	✓`npx shadcn-ui@latest init` writes config and component files into your project; run it in a repo under version control and review the changes. Generated UI code is a starting point, not production-verified; review accessibility, validation, and security before shipping.	✓Scaffolds and runs a SvelteKit app (npm create svelte, npm install, dev/build servers that listen on a port and install dependencies); review generated server endpoints and dependencies before exposing them.	✓Scaffolds and runs Vite (npm create vite, install, dev/build/preview servers that listen on a port and install dependencies); review plugins and config before running.	✓Several skills can scan local frontend source, extract static HTML, upload assets, create Stitch designs, edit screens, generate variants, or produce code from Stitch projects. Review generated React, React Native, Remotion, and shadcn/ui output before merging it into production. The upstream README says the project is not an officially supported Google product. Selective installs may require dependent Stitch skills; follow the upstream dependency notes when installing individual skills. Prefer reviewed commits or pinned refs for production plugin installs instead of blindly tracking a mutable default branch.	✓GSAP is primarily a frontend animation library, but generated animations can still break layout, accessibility, input handling, scroll behavior, or client performance. ScrollTrigger, pinned sections, smooth scrolling, and layout-dependent timelines should be tested across viewport sizes and after dynamic content loads. React, Vue, Svelte, and other framework integrations need cleanup on unmount so animations, event listeners, and ScrollTriggers do not leak across renders. Remove development markers, debug helpers, and unnecessary long-running animations before production.
Privacy notes	✓v0 is a hosted Vercel service; the prompts and any context you send to generate UI are processed by Vercel under their terms.	✓Full-stack SvelteKit apps handle server-side env vars, sessions, and user data; keep secrets in $env/static/private (never $env/static/public), and review what server routes read, store, or log.	✓Vite exposes only env vars prefixed VITE_ to client code — keep secrets unprefixed/server-side, and review what build config and source maps embed before publishing.	✓Frontend source code, static HTML, screenshots, images, design-system files, project IDs, prompt text, and generated UI assets may be sent to Stitch through the configured MCP server. Do not upload proprietary product designs, customer data, unreleased brand assets, or credentials unless your organization approves that Stitch workflow. Keep Stitch credentials, MCP environment variables, and project identifiers out of prompts, public issues, screenshots, and committed configuration.	✓The skills are local instruction files and do not require app data by themselves. Do not paste proprietary designs, private Figma exports, customer analytics, unreleased campaign copy, or private frontend source into public prompts or issues when asking an agent to animate UI. If the agent uses browser automation, visual captures, or external model providers while applying these skills, screenshots and source snippets may be processed outside the local project.
Prerequisites	Next.js 15+ React 19+ TailwindCSS v4.1+ shadcn/ui components installed	Node.js 18+ (20+ recommended) @sveltejs/kit ^2.0.0 svelte ^4.0.0 vite ^5.0.0	Node.js 18+ (20+ recommended) vite ^5.0.0 npm/pnpm/yarn package manager Basic understanding of JavaScript modules	Stitch MCP server configured and running in the target agent environment. Node.js and npx for the `skills` or `plugins` installer commands. A compatible coding agent such as Claude Code, Codex, Cursor, Gemini CLI, or Antigravity. Access to the Stitch project, credentials, and environment variables required by the Stitch MCP setup.	AI coding agent or skill installer compatible with Agent Skills repositories. JavaScript, TypeScript, React, Vue, Svelte, vanilla JS, Webflow, SVG, or frontend animation task. GSAP package available in the target app when generating runnable animation code. Browser or framework test surface for verifying animation timing, cleanup, responsiveness, and reduced-motion behavior.
Install	`npx shadcn-ui@latest init`	`npm create svelte@latest my-app`	`npm create vite@latest my-app`	`npx skills add google-labs-code/stitch-skills`	`npx skills add https://github.com/greensock/gsap-skills`
Config	—	—	—	—	—
Citations	Source repositorygithub.com 2026-07-18T19:14:44+00:00 Documentationv0.app Package (SHA-256 pinned)/downloads/skills/v0-rapid-prototyping.zip Source methodology →	Source repositorygithub.com 2026-07-18T19:14:44+00:00 Documentationsvelte.dev Package (SHA-256 pinned)/downloads/skills/svelte-sveltekit-fullstack.zip Source methodology →	Source repositorygithub.com 2026-07-18T19:14:44+00:00 Documentationvite.dev Package (SHA-256 pinned)/downloads/skills/vite-build-optimization.zip Source methodology →	Source repositorygithub.com 2026-07-18T19:14:44+00:00 Documentationgithub.com Package downloadgithub.com Source methodology →	Source repositorygithub.com 2026-07-18T19:14:44+00:00 Documentationgithub.com Package downloadgithub.com Source methodology →
Claim	Unclaimed	Unclaimed	Unclaimed	Unclaimed	Unclaimed