Every Frontend & Design tool worth a solo builder's time - the skills, MCP servers, marketplaces and workflows in the Frontend & Design category, ranked by community signal and filterable by phase, type and what you're building.
What's in the Frontend & Design category
The Frontend & Design category collects 1,800 curated tools including agent skills. Every one is screened against a single quality bar and ranked by real community signal, so the strongest tools surface first.
These tools show up across the build journey, including Idea, Validate, Build, Ship, Launch, Grow and Operate — use the filters below to narrow by phase, type or tool, or jump straight to a phase hub to see frontend & design tools in the context of everything else that phase needs.
⌕Try
978 shown of 1,800
#Description
1Frontend DesignFrontend & Designanthropics/skillsShip polished web UI—landing pages, dashboards, or React/HTML components—with a deliberate visual direction instead of generic template styling.516k148k
2Vercel React Best PracticesFrontend & Designvercel-labs/agent-skillsApply Vercel’s prioritized React and Next.js performance rules while you write, review, or refactor UI so waterfalls, bundle bloat, and rerenders do not slip into production.459k27.7k
3Web Design GuidelinesFrontend & Designvercel-labs/agent-skillsRun a fresh, Vercel-aligned UI and accessibility review on specific frontend files before you ship or merge polish work.374k27.7k
4Remotion Best PracticesFrontend & Designremotion-dev/skillsInstall this so your coding agent follows Remotion-safe patterns when you build programmatic marketing videos, demos, or render pipelines in React.357k3.5k
5Lark WhiteboardFrontend & Designlarksuite/cliTag when generating Lark whiteboard documents with frames, connectors, and routing rules without schema errors from misplaced connector nodes.209k13.7k
6Ui Ux Pro MaxFrontend & Designnextlevelbuilder/ui-ux-pro-max-skillGive your coding agent structured UI/UX intelligence—palettes, typography, patterns, and stack-specific guidance—when you ship web or mobile interfaces without a dedicated designer.206k88.7k
7Vercel Composition PatternsFrontend & Designvercel-labs/agent-skillsGuide your coding agent through React UI work so new and refactored components use compound composition instead of growing boolean prop matrices.204k27.7k
8Sleek Design Mobile AppsFrontend & Designsleekdotdesign/agent-skillsDesign mobile app screens and manage Sleek projects via REST API using natural-language prompts and screenshots.182k422
9Develop UserscriptsFrontend & Designxixu-me/skillsAuthor, debug, and publish Tampermonkey or ScriptCat userscripts with correct metadata, GM APIs, permissions, and ScriptCat-only background or subscription packaging.154k61
10ImpeccableFrontend & Designpbakaus/impeccableRedesign or polish dashboards, landings, forms, and components with UX critique, a11y, motion, and live browser iteration.152k35.9k
11Vercel React Native SkillsFrontend & Designvercel-labs/agent-skillsApply prioritized React Native performance rules (lists, rendering, stable refs) when agents generate or refactor mobile UI code.137k27.7k
12Design Taste FrontendFrontend & Designleonxlnx/taste-skillShip polished React/Next.js UIs with explicit design-variance, motion, and density knobs; enforce dependency checks, RSC defaults, and metric-driven layout instead of generic LLM styling.124k37.9k
13Extract Design SystemFrontend & Designarvindrk/extract-design-systemScrape design primitives from a public reference site into normalized JSON and starter CSS token files for your app.118k51
14High End Visual DesignFrontend & Designleonxlnx/taste-skillMake your agent produce premium marketing and product UI with enforced typography, spacing, motion, and anti-generic defaults instead of template-looking Tailwind pages.103k37.9k
15Next Best PracticesFrontend & Designvercel-labs/next-skillsGive your coding agent authoritative Next.js rules for file layout, RSC boundaries, async App Router APIs, metadata, errors, and performance while you ship App Router apps.102k919
16Redesign Existing ProjectsFrontend & Designleonxlnx/taste-skillUpgrade an existing site or app to feel premium by auditing generic AI UI patterns and applying targeted typography, layout, and polish fixes without a full rewrite.101k37.9k
17Minimalist UiFrontend & Designleonxlnx/taste-skillGenerate ultra-minimal, editorial web interfaces with warm monochrome typography, flat bento grids, and explicit bans on generic SaaS chrome.94.8k37.9k
18Industrial Brutalist UiFrontend & Designleonxlnx/taste-skillApply a rigid industrial-brutalist design system when building data-heavy dashboards, portfolios, or editorial sites that should read like machinery manuals or tactical terminals.88.2k37.9k
19Stitch Design TasteFrontend & Designleonxlnx/taste-skillGenerate a Stitch-ready DESIGN.md so Google Stitch prompts produce premium, anti-generic screens with calibrated type, color, motion, and performance rules.87.8k37.9k
20PolishFrontend & Designpbakaus/impeccableRun a meticulous pre-ship UI pass—alignment, spacing, tokens, and micro-details—after feature work is done but before users see it.86k35.9k
21Emil Design EngFrontend & Designemilkowalski/skillApply Emil Kowalski’s design-engineering taste—polish, motion, and micro-interactions—while you build interfaces that feel intentional, not merely functional.84.4k2.2k
22GsapFrontend & Designheygen-com/hyperframesAuthor GSAP motion that HyperFrames can seek frame-by-frame when building programmatic video compositions.84.1k25.6k
23CritiqueFrontend & Designpbakaus/impeccableRun an independent, bias-resistant UX critique of a feature, page, or component with scored feedback before you ship UI changes.83.4k35.9k
24AnimateFrontend & Designpbakaus/impeccableAudit a UI feature and add purposeful motion, feedback, and micro-interactions without violating performance or Impeccable design rules.82.5k35.9k
25AdaptFrontend & Designpbakaus/impeccableTake a desktop-first or single-context design and adapt breakpoints, touch targets, and layouts for mobile, tablet, print, or other platforms.82.5k35.9k
26ClarifyFrontend & Designpbakaus/impeccableRewrite confusing labels, errors, and microcopy so solo-built products read clearly for real users.82k35.9k
27OptimizeFrontend & Designpbakaus/impeccableDiagnose and fix laggy UI—Core Web Vitals, bundles, images, animations, and runtime jank—with measure-before/after discipline.81.7k36k
28ColorizeFrontend & Designpbakaus/impeccableAdd meaningful color to gray or flat UIs so solo-built products feel warm, legible, and on-brand.81.6k35.9k
29BolderFrontend & Designpbakaus/impeccablePush a bland or generic UI toward stronger visual personality and hierarchy without breaking usability, after Impeccable design context is loaded.80.8k35.9k
30DelightFrontend & Designpbakaus/impeccableAdd personality, micro-interactions, and memorable polish to an existing interface without breaking usability or brand fit.80.6k35.9k
31DistillFrontend & Designpbakaus/impeccableRuthlessly simplify an existing UI or layout so the primary user goal is obvious and visual noise is gone.80.2k35.9k
32QuieterFrontend & Designpbakaus/impeccableCalm an overstimulating UI after a bold first pass without throwing away what already works.79.4k35.9k
33Gpt TasteFrontend & Designleonxlnx/taste-skillShip marketing and product pages that look award-grade instead of default narrow-hero LLM layouts.79k37.9k
34Firebase BasicsFrontend & Designfirebase/agent-skillsWire a new Android app to Firebase from project create through google-services.json using firebase-tools CLI steps.76.3k345
35Canvas DesignFrontend & Designanthropics/skillsGenerate polished static visuals—posters, slides, and branded graphics—as files your agent can drop into landing pages, docs, or launch assets.69.3k148k
36Image To CodeFrontend & Designleonxlnx/taste-skillGenerate premium section reference images first, analyze them deeply, then implement heroes and multi-section sites that match—optimized for Codex workflows.67.3k37.9k
37BrandkitFrontend & Designleonxlnx/taste-skillGenerate presentation-ready brand-guideline boards, logo systems, and identity decks as single premium composite images.66k37.9k
38TypesetFrontend & Designpbakaus/impeccableFix generic or muddy typography—fonts, scale, weight, and hierarchy—so marketing and product UI text reads intentional.65.3k35.9k
39Imagegen Frontend WebFrontend & Designleonxlnx/taste-skillGenerate one horizontal reference image per landing section so you or your coding agent can recreate premium, conversion-aware marketing UI with consistent palette and varied composition.65.1k37.9k
40OverdriveFrontend & Designpbakaus/impeccablePush a product UI past conventional polish with shaders, spring physics, scroll-driven motion, and 60fps interactions after design context is locked.63.4k35.9k
41TailwindFrontend & Designheygen-com/hyperframesStyle HyperFrames composition HTML with Tailwind CSS v4 browser-runtime utilities and CSS-first theme tokens—not v3 PostCSS patterns.62.6k25.6k
42AnimejsFrontend & Designheygen-com/hyperframesWire Anime.js animations into HeyGen HyperFrames so every frame is seek-driven, autoplay-off, and registered on `window.__hfAnime` for deterministic video renders.62.3k25.6k
43ThreeFrontend & Designheygen-com/hyperframesBuild deterministic Three.js/WebGL layers in HyperFrames that render on `hf-seek` using `window.__hfThreeTime`, not requestAnimationFrame.61.7k25.6k
44LottieFrontend & Designheygen-com/hyperframesWire lottie-web and dotLottie players into HyperFrames so exported motion graphics scrub deterministically on a timeline.61.4k25.6k
45Web Artifacts BuilderFrontend & Designanthropics/skillsScaffold React + shadcn/ui artifact repos, develop multi-component UIs, and bundle them into single HTML files for Claude-style web artifacts.61.4k148k
46WaapiFrontend & Designheygen-com/hyperframesAuthor native `element.animate()` motion that HyperFrames can scrub via `document.getAnimations()` and `currentTime` without GSAP.61.1k25.6k
47NormalizeFrontend & Designpbakaus/impeccableAudit a page or component and realign spacing, tokens, and patterns to your design system when UI has drifted from standards.54.9k35.9k
48Theme FactoryFrontend & Designanthropics/skillsApply one of ten curated font and color themes—or generate a new theme—to slides, docs, reports, or HTML artifacts for a consistent professional look.54.5k148k
49ExtractFrontend & Designpbakaus/impeccableMine repeated UI patterns and hard-coded styles from your app and consolidate them into components and design tokens.53.8k35.9k
50Frontend DesignFrontend & Designpbakaus/impeccableDetect that the renamed impeccable skill replaced this stub and update or delete the deprecated frontend-design folder in your agent setup.53.7k35.9k
51OnboardFrontend & Designpbakaus/impeccableDesign or refine onboarding, empty states, and first-run flows so new users reach the product aha moment faster.53.7k35.9k
52HardenFrontend & Designpbakaus/impeccableStress-test and fix UI against long text, errors, i18n, RTL, empty data, and API failure modes before launch.53.6k35.9k
53Brand GuidelinesFrontend & Designanthropics/skillsApply consistent official brand colors, typography, and styling rules when agents format slides, docs, or UI mock artifacts.53.2k148k
54Vercel React View TransitionsFrontend & Designvercel-labs/agent-skillsShip native-feeling route and layout animations in React and Next.js using the View Transition API without ad-hoc CSS hacks.52.2k27.7k
55Teach ImpeccableFrontend & Designpbakaus/impeccableLegacy entry point that tells agents and users to run the unified impeccable teach flow instead of this deprecated command.50.6k35.9k
56Design MdFrontend & Designgoogle-labs-code/stitch-skillsTurn an existing Stitch screen set into a DESIGN.md semantic design system so new UI prompts stay on-brand.47.1k6k
57React:ComponentsFrontend & Designgoogle-labs-code/stitch-skillsTurn Stitch screen designs into modular Vite and React components with MCP fetch, local design cache, and validation tooling.47k5.9k
58Building Native UiFrontend & Designexpo/skillsImplement performant Expo/React Native UI motion with Reanimated v4 entering, exiting, layout, and scroll-linked animations.46.9k2k
59Typescript Advanced TypesFrontend & Designwshobson/agentsApply generics, conditional types, mapped types, and utility types when implementing strict TypeScript libraries, APIs, forms, or state in a product codebase.46k36.5k
60Tailwind Design SystemFrontend & Designwshobson/agentsStandardize Tailwind CSS v4 tokens, variants, and accessible components when spinning up or scaling a solo builder UI.45.9k36.5k
Showing the top 978 of 1,800 tools · search to find the rest.
It's any agent skill, MCP server, marketplace or workflow whose job is frontend & design work. Skillselion groups the whole catalog into a handful of canonical categories so a single page collects every frontend & design tool across all four types in one place.
How are Frontend & Design tools ranked?
By real community signal — installs, GitHub stars and votes — not paid placement. Sponsored slots, when present, are labelled and kept out of the ranking.
Are these Frontend & Design tools free?
The listings are open-source skills, MCP servers, marketplaces and workflows, installable with a single command. Skillselion is an independent directory, not the vendor.
This week for builders
Five minutes, every Monday — the tools, releases and tactics for shipping solo.