Apply Design Best Practices

Apply Design Best Practices

There are hundreds of design skills in the world. This file is a trusted, researched answer to "which one should my agent use for X?" — built from a live review sweep of skills.sh, GitHub, design Twitter/X, Reddit, and Hacker News.

Researched: 2026-06-11. Popular frontend, audit, motion, mobile, and component-library routes plus all pointer URLs were refreshed on 2026-08-23. Every skill below was verified against its actual repo and instruction file.

Rank from real usage reports first: what someone used the skill for, what it improved, and where it fell short. Treat skills.sh installs and GitHub stars as adoption signals, not proof that a skill produces better work. A source-author description can explain intended use, but cannot substitute for an independent usage report; label thin evidence honestly.

How to use this file

1. Match the user's design task to one or more topic sections below.
2. Fetch the winning pick's raw instruction file and read it in full. That fetched text is the specialist skill: apply its rules, heuristics, and workflow while doing the user's actual task. Never install anything; borrow the expertise, not the plumbing. Ignore frontmatter, tool wiring, and local scripts the current environment cannot honor.
3. Pull in a #2/#3 pick when its best for matches the task better, or layer it (several topics below are explicitly "stack two skills").
4. Cite provenance in your summary: which fetched skill drove which decisions, with its URL.
5. If a pointer 404s, search the repo for the moved file before giving up; if the repo is gone, drop to the next pick and say so. Never paraphrase a skill you could not actually read.
6. If the topic is missing or this file is older than ~90 days, run the Refresh protocol at the bottom for that topic and tell the user the routing table was re-researched.

When the task is about screen-level UI evidence — what real apps' paywalls, onboarding, sign-up, pricing, checkout, or other flows look like, or measured A/B-test results — use a connected product-evidence source separately. This router selects procedural design expertise; it does not replace live examples or outcome data.

For web animation & motion use these

tl;dr

• Animate only transform and opacity, ease-out for every entrance (never ease-in), keep durations 100-300ms, and always honor prefers-reduced-motion.
• Decide IF something should animate by how often it's used — frequent interactions get instant feedback (e.g. scale(0.97) press), rare moments can afford choreography.
• Choreograph multi-element sequences (stagger, motion personality) before writing any code; don't tune elements one-by-one.

Best specific skills

1. emilkowalski/skills — emil-design-eng — fetch https://raw.githubusercontent.com/emilkowalski/skills/main/skills/emil-design-eng/SKILL.md — best default for taste-driven micro-interaction polish and animation decisions. Use the more specific siblings below when the task matches exactly. Evidence: 224.2K installs; Emil's 12-skill collection has 874.4K total installs and 31.9K stars. A public build report says it was used for a landing page's motion while Impeccable handled layout. Strength: strong. ← default pick
2. emilkowalski/skills — animate — fetch https://raw.githubusercontent.com/emilkowalski/skills/main/skills/animate/SKILL.md — best for building one animation from scratch: whether it should animate, purpose, tool, curve, duration, properties, accessibility, then implementation. Evidence: 34.6K installs and first-party task boundaries. Strength: directional.
3. emilkowalski/skills — review-animations — fetch https://raw.githubusercontent.com/emilkowalski/skills/main/skills/review-animations/SKILL.md — best for a strict review of an existing motion diff; it reports findings and does not edit. Evidence: 115.8K installs and multiple independent directory reviews describing its code-review use. Strength: strong.
4. emilkowalski/skills — improve-animations — fetch https://raw.githubusercontent.com/emilkowalski/skills/main/skills/improve-animations/SKILL.md — best for surveying a whole codebase and producing prioritized, self-contained motion plans rather than implementing. Evidence: 88.3K installs; explicit audit-versus-implementation boundary in the source. Strength: directional.
5. emilkowalski/skills — find-animation-opportunities — fetch https://raw.githubusercontent.com/emilkowalski/skills/main/skills/find-animation-opportunities/SKILL.md — best when the question is where motion would help; it proposes exact opportunities and rejects unjustified animation. Evidence: 76.4K installs. Strength: directional.
6. emilkowalski/skills — animation-vocabulary — fetch https://raw.githubusercontent.com/emilkowalski/skills/main/skills/animation-vocabulary/SKILL.md — best when the user can describe an effect but does not know its name; use the resulting term to brief another motion skill precisely. Evidence: 103.4K installs. Strength: directional.
7. emilkowalski/skills — apple-design — fetch https://raw.githubusercontent.com/emilkowalski/skills/main/skills/apple-design/SKILL.md — best for Apple-like fluidity, gesture behavior, and interface principles translated from WWDC to the web. Evidence: 96K installs and independent launch discussion; source scope is explicit. Strength: directional.
8. LottieFiles/motion-design-skill — fetch https://raw.githubusercontent.com/LottieFiles/motion-design-skill/main/skills/motion-design/SKILL.md — best for framework-agnostic choreography, motion personality, and multi-element sequencing before code. Evidence: vendor-maintained, works across CSS/Framer Motion/GSAP/Lottie. Strength: strong.

Skip: the circulated "emil-anim" gists (superseded by Emil's official skill); jezweb/claude-skills motion (registry listings look stale — no motion SKILL.md in the current tree).

Corpus note: install counts show unusually strong adoption, but detailed before/after reviews remain scarcer than source summaries. Preserve the task boundaries above instead of loading the whole collection for every animation.

For general frontend / UI design quality (avoiding "AI slop") use these

tl;dr

• Commit to an explicit aesthetic direction (typography, color system, one signature element) BEFORE writing any code — never start from the AI defaults (Inter, purple gradients, card grids, cream+serif+terracotta).
• Work in two passes: generate with creative direction first, then run a rule-based compliance audit (accessibility, keyboard, forms, performance) as a separate quality gate before shipping.
• Match the design system to the product type — a fintech dashboard and a wellness app should not share a palette or type scale.

Best specific skills

1. anthropics/skills — frontend-design — fetch https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md — best creative-direction default for generating a new interface. It names common AI design clusters and forces a committed, brief-specific direction before code. Evidence: 810.3K installs (#3 overall on skills.sh), 171K stars, official source, and repeated independent recommendations. Strength: strong. ← default pick
2. uizze/uizze — anti-ui-slop — fetch https://raw.githubusercontent.com/uizze/uizze/main/skills/anti-ui-slop/SKILL.md — best when the work must start from product context and real UI evidence, cover required states, then pass a rendered finish gate. Evidence: 453.6K installs; independent catalogue reviewers specifically praised its finish gate, though detailed outcome reports are still thin. Strength: directional.
3. leonxlnx/taste-skill — design-taste-frontend — fetch https://raw.githubusercontent.com/leonxlnx/taste-skill/main/skills/taste-skill/SKILL.md — best for landing pages, portfolios, and redesigns that need a stronger visual direction selected from the brief. Do not use for dashboards, data tables, or multi-step product UI. Evidence: 393.1K installs and 79.7K stars; firsthand reports describe setting its variance/motion/density dials before generation and pairing it with Impeccable and Emil. Strength: strong.
4. pbakaus/impeccable — impeccable — fetch https://raw.githubusercontent.com/pbakaus/impeccable/main/.agents/skills/impeccable/SKILL.md — best broad lifecycle router when the task is already a verb such as critique, audit, polish, distill, adapt, harden, clarify, or onboard. Evidence: 245.1K installs and 61.9K stars; a detailed practitioner review reports using it across dashboards, marketing sites, internal tools, and client work. Strength: strong.
5. nextlevelbuilder/ui-ux-pro-max — fetch https://raw.githubusercontent.com/nextlevelbuilder/ui-ux-pro-max-skill/main/.claude/skills/ui-ux-pro-max/SKILL.md — best for auto-generating a product-type-matched design system (style + palette + type + UX rules) with pre-delivery anti-pattern checks. Evidence: 327.7K installs and 120K stars; organic outcome reports remain thinner than adoption. Strength: directional.
6. vercel-labs/agent-skills — web-design-guidelines — fetch https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/web-design-guidelines/SKILL.md — best for a file-and-line audit of existing UI code, not generation. It fetches Vercel's live guidelines on every run. Evidence: 568.6K installs, Vercel-official, and repeatedly recommended as a post-build quality gate. Strength: strong.

Skip: anthropics canvas-design (poster/art canvases, not product UI); obra/superpowers (great engineering-workflow pack, zero design-quality content).

For design audits, critique & final polish use these

tl;dr

• Choose the verb before the skill: critique judges UX and hierarchy, audit checks technical quality, polish fixes final details, and redesign is a larger authorization boundary.
• Inspect the rendered interface at desktop and mobile; source-only review cannot prove spacing, clipping, responsive behavior, or visual hierarchy.
• Fix shared causes before isolated symptoms, then stop after a bounded confirmation pass.

Best specific skills

1. pbakaus/impeccable — impeccable — fetch https://raw.githubusercontent.com/pbakaus/impeccable/main/.agents/skills/impeccable/SKILL.md — best default router for choosing between critique, audit, polish, distill, harden, adapt, clarify, and related passes. Its boundaries prevent an audit request from silently becoming a redesign. Evidence: 245.1K installs; the focused polish, critique, and audit entries each have 83K-87K installs, plus detailed real-world usage reports. Strength: strong. ← default pick
2. uizze/uizze — anti-ui-slop — fetch https://raw.githubusercontent.com/uizze/uizze/main/skills/anti-ui-slop/SKILL.md — best for reviewing generic UI risk against the product's own brief, components, states, and relevant real-screen evidence, then fixing when authorized. Evidence: 453.6K installs; positive independent review of its design-contract and finish-gate approach. Strength: directional.
3. vercel-labs/agent-skills — web-design-guidelines — fetch https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/web-design-guidelines/SKILL.md — best for deterministic code-level findings with file and line references across accessibility, forms, interaction, and polish. Evidence: 568.6K installs and official maintenance. Strength: strong.
4. emilkowalski/skills — review-animations — fetch https://raw.githubusercontent.com/emilkowalski/skills/main/skills/review-animations/SKILL.md — best only when the review scope is motion. Pair it with a broader UI audit when layout, copy, responsiveness, or accessibility also matter. Evidence: 115.8K installs. Strength: directional.

For landing pages & marketing sites use these

tl;dr

• One page, one message, one CTA — match the headline to the traffic source, remove navigation where possible, and make the complete argument on a single page.
• Give the hero a deliberate visual identity (distinctive type + signature element) so it can't be mistaken for a template — visuals and conversion copy are two separate jobs; do both, in that order.
• Audit the built page against accessibility/UX rules before shipping; conversion structure (trust signals, objection handling) is a checklist, not a vibe.

Best specific skills

1. anthropics/skills — frontend-design — fetch https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md — best for the hero section and overall visual identity without the generic AI look. Evidence: 531.8K installs; praised on X specifically for landing pages ("without this, every Claude landing page looks the same"). Strength: strong. ← default pick, pair with #2
2. coreyhaines31/marketingskills — copywriting — fetch https://raw.githubusercontent.com/coreyhaines31/marketingskills/main/skills/copywriting/SKILL.md — best for conversion copy layout: headline, subheadline, CTAs, social proof, with page-type-specific frameworks ("single message, single CTA; match headline to traffic source"). Evidence: 124.0K installs (repo total 281.9K), built by a known SaaS marketer, featured in 2026 marketing-skill roundups. Strength: strong.
3. coreyhaines31/marketingskills — cro — fetch https://raw.githubusercontent.com/coreyhaines31/marketingskills/main/skills/cro/SKILL.md — best for conversion-rate diagnosis of page structure: value-prop clarity, trust signals, distraction removal, A/B test ideas. Strength: directional.
4. vercel-labs/agent-skills — web-design-guidelines — fetch https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/web-design-guidelines/SKILL.md — best for the pre-ship audit of the built page (accessibility/UX correctness). Evidence: 383.1K installs. Strength: strong.

Skip: inferen-sh landing-page-design (promo wrapper for a paid CLI, little actual guidance); one-off landing-page SKILL.md repos with no registry presence or reviews.

For typography use these

tl;dr

• Pair ONE distinctive display font with ONE refined body font, cap at 2 families, and never default to Inter/Roboto/Arial.
• Serve variable fonts with display=swap (fewer requests, full weight flexibility) and build text on a real modular type scale, not ad-hoc sizes.
• Typography exists to honor content: set hierarchy with size/weight/spacing before reaching for color or decoration.

Best specific skills

1. anthropics/skills — frontend-design (typography section) — fetch https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md — best for distinctive font selection and pairing on new UI ("avoid generic fonts like Arial and Inter… pair a distinctive display font with a refined body font"). Evidence: 531.9K installs. Strength: strong. ← default pick
2. petekp/claude-code-setup — typography — fetch https://raw.githubusercontent.com/petekp/claude-code-setup/main/skills/typography/SKILL.md — best for deep typography-only system work: type scales, fluid type, variable fonts, font loading, RTL/CJK. Bringhurst-grounded with 7 reference files. Evidence: repo active (June 2026) but ~6 installs — the only verified skill treating typography as the whole job. Strength: single-source. (Repo was renamed from petekp/claude-skills; older links 404.)
3. sliday/google-fonts-skill — fetch https://raw.githubusercontent.com/sliday/google-fonts-skill/main/SKILL.md — best for picking concrete Google Fonts pairings and generating the CSS/Tailwind/embed code (1,923-font database, mood search, 8 modular scales). Strength: single-source.
4. vercel-labs/agent-skills — web-design-guidelines — best for auditing existing code for typography/readability violations (see pointer above). Strength: strong.

Skip: davepoon typography-selector (thin Google-Fonts wrapper — sliday does the same job with a real database); "Typography Expert" directory listings with no fetchable repo.

For color & theming use these

tl;dr

• Build color ramps in OKLCH (perceptually uniform), and structure tokens in three tiers — primitive → semantic → component — so dark mode is a token swap, never a color inversion.
• Name tokens by purpose, not appearance (bg-surface, not gray-100), and plan dark mode from day one — retrofitting is much harder.
• Treat contrast as a hard gate: WCAG AA 4.5:1 body / 3:1 large text minimum (use APCA when you want the stricter modern standard), verified programmatically, not by eye.

Best specific skills

1. meodai/skill.color-expert — fetch https://raw.githubusercontent.com/meodai/skill.color-expert/main/SKILL.md — best for color science: accessible palettes, OKLCH ramps, APCA/WCAG contrast decisions. Deepest verified color corpus (~113 reference docs), actively maintained (pushed 2026-06-10), author maintains the well-known color-names project. Evidence: 485 stars, tops GitHub color-skill search. Strength: strong. ← default pick
2. wshobson/agents — visual-design-foundations — fetch https://raw.githubusercontent.com/wshobson/agents/main/plugins/ui-design/skills/visual-design-foundations/SKILL.md — best for end-to-end foundations: semantic color tokens + a working dark-mode CSS-variable strategy ([data-theme] swap) inside a full design-system pass. Evidence: 8.7K installs, 36.6K-star parent repo. Strength: strong.
3. ilikescience/design-tokens-skill — fetch https://raw.githubusercontent.com/ilikescience/design-tokens-skill/main/SKILL.md — best for DTCG-spec token plumbing: .tokens.json validation, color-space objects, theme resolvers, Terrazzo/Figma pipelines. Author (Matthew Ström) writes prominently on design tokens. Evidence: 12 stars, registry-listed; the only verified skill targeting the W3C DTCG spec directly. Strength: single-source.

Skip: anthropics theme-factory (styles slide/doc artifacts with preset palettes — does not build app token systems or contrast-checked palettes); ui-ux-pro-max for this topic specifically (kitchen-sink lookup table, weak on dark-mode token architecture).

For design systems & component libraries (shadcn/Tailwind) use these

tl;dr

• Use semantic tokens over raw values everywhere (bg-primary and text-muted-foreground, never hex or raw Tailwind scales), gap-* over space-y-*, and built-in component variants before any custom CSS.
• In an existing shadcn project, read the real component APIs and components.json instead of guessing; on greenfield, generate the full system first and persist it as a MASTER.md source of truth.
• On Tailwind v4, wire theming as variables in :root/.dark mapped through @theme inline — most "broken dark mode" reports trace to skipping that exact pattern.

Best specific skills

1. shadcn-ui/ui — shadcn skill — fetch https://raw.githubusercontent.com/shadcn-ui/ui/main/skills/shadcn/SKILL.md — best for enforcing component-library consistency in an existing shadcn/Tailwind project: correct component APIs, semantic tokens, composition rules (FieldGroup+Field forms). First-party and project-aware. Evidence: 271.7K installs, ships in the 121.9K-star shadcn repo, documented at ui.shadcn.com/docs/skills. Strength: strong. ← default pick for existing projects
2. emilkowalski/skills — pick-ui-library — fetch https://raw.githubusercontent.com/emilkowalski/skills/main/skills/pick-ui-library/SKILL.md — best before implementation when the real question is which maintained library should own a toast, dialog, chart, command menu, or other UI primitive. Evidence: 61.5K installs and explicit library-selection scope. Strength: directional.
3. nextlevelbuilder/ui-ux-pro-max — pointer above — best for generating a complete NEW design system when none exists: its v2 generator reasons from product type to a full system and can persist a design-system/MASTER.md source of truth. Evidence: 327.7K installs and 120K stars. Strength: strong. ← default pick for greenfield
4. arvindrk/extract-design-system — fetch https://raw.githubusercontent.com/arvindrk/extract-design-system/main/skills/extract-design-system/SKILL.md — best for extracting tokens (colors, type, spacing, radius, shadows) from an existing live site via Playwright to bootstrap a tokenized system matching a real brand. Honest guardrails in the file itself. Evidence: 127.9K installs but much weaker repo-level adoption — treat the registry signal cautiously. Strength: directional.
5. secondsky/claude-skills — tailwind-v4-shadcn — fetch https://raw.githubusercontent.com/secondsky/claude-skills/main/plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/SKILL.md — best for wiring Tailwind v4 token/theme architecture correctly and debugging broken theming (the exact variable → @theme inline → base styles → dark mode pattern plus the five known setup errors). Evidence: source depth is good; adoption remains modest. Strength: directional.

Skip: frontend-design for this topic (one-shot aesthetic direction, no token governance or consistency rules); mattbx/shadcn-skills (8 stars, no traction).

For accessibility use these

tl;dr

• Treat accessible code as the baseline on every UI edit, not an audit afterthought — WCAG 2.2 AA across all four POUR principles is the floor, not the stretch goal.
• Automate with axe-core/Lighthouse, but never call it done without keyboard-only navigation and a real screen reader pass (VoiceOver/NVDA) — automated tools catch a minority of issues.
• Don't guess ARIA patterns from memory; pull the documented pattern for the specific widget (and on large sites, audit ~20 representative template pages instead of crawling everything).

Best specific skills

1. addyosmani/web-quality-skills — accessibility — fetch https://raw.githubusercontent.com/addyosmani/web-quality-skills/main/skills/accessibility/SKILL.md — best for general-purpose WCAG 2.2 audit-and-fix with copy-paste ARIA/keyboard/contrast patterns covering all four POUR principles. Evidence: 2.2K-star repo, multiple registries, cited in Snyk's UI/UX skills roundup, Chrome-team-adjacent author. Strength: strong. ← default pick
2. Community-Access/accessibility-agents — repo https://github.com/Community-Access/accessibility-agents (browse the repo; skills live in subdirectories) — best for team-scale WCAG 2.2 AA enforcement: 79 agents + 18 skills including document (DOCX/PDF/PPTX) accessibility and an MCP scanner for CI. Built by actual assistive-technology users (Taylor Arndt, Jeff Bishop), v5.4.0 May 2026. Strength: directional — the depth pick, not the default.
3. joedevon/a11y-skills — a11y-code-review — fetch https://raw.githubusercontent.com/joedevon/a11y-skills/main/a11y-code-review/SKILL.md — best for an always-on accessible-code baseline that triggers on every UI edit, not just explicit audit requests ("accessible code is the baseline, not an add-on"). Author co-founded Global Accessibility Awareness Day — unmatched domain authority, but ~no usage signal. Strength: single-source.
4. snapsynapse/skill-a11y-audit — repo https://github.com/snapsynapse/skill-a11y-audit (SKILL.md at a11y-audit/SKILL.md) — best for auditing large live sites efficiently via template-aware page sampling (~20 representative pages instead of 700). Strength: single-source.

Skip: mindrally accessibility-a11y (anonymous mega-pack, registry SEO only); CrazyDubya accessibility-auditor (bulk AI-generated dump).

For UX writing & microcopy use these

tl;dr

• Every error message must answer three questions: what happened, why, and how to fix it — anything less is decoration.
• Write button labels as verb+object ("Save changes", not "OK"/"Submit"), and treat empty states as onboarding moments, not dead ends.
• Don't apply marketing-copy frameworks to product UI — persuasion copy and microcopy are different jobs; inside the product, clarity beats cleverness every time.

Best specific skills

1. pbakaus/impeccable — clarify — fetch https://raw.githubusercontent.com/pbakaus/impeccable/main/.claude/skills/impeccable/reference/clarify.md — best for fixing unclear labels, error messages, and CTA copy in an existing UI as part of a design-quality pass. Evidence: 37.5K stars, pushed 2026-06-11, 156.3K installs, covered by Firecrawl/Composio/Snyk roundups. Strength: strong. ← default pick
2. content-designer/ux-writing-skill — fetch https://raw.githubusercontent.com/content-designer/ux-writing-skill/main/SKILL.md — best for writing new microcopy end-to-end with systematic standards: voice/tone charts, fillable templates for errors, empty states, onboarding. The only dedicated, maintained UX-writing SKILL.md found. Evidence: 108 stars, 714 installs, v1.6.0 Mar 2026. Strength: directional.
3. szilu/ux-designer-skill — fetch https://raw.githubusercontent.com/szilu/ux-designer-skill/main/SKILL.md — best for a lightweight single-skill UX generalist with a dedicated microcopy reference, without pulling in an 18-skill pack. Evidence: 20 stars, no registry rank. Strength: single-source.

Skip: coreyhaines31 copywriting for this topic (explicitly scoped to marketing pages, not UI microcopy — it IS the right pick for landing pages above).

For mobile app design (iOS/Android) use these

tl;dr

• Follow the platform, don't invent: HIG on iOS, Material 3 on Android — native navigation patterns, no hamburger menus on iOS, no hardcoded fonts.
• Hit the universal floor on every screen: 44×44pt (Apple) / 48×48dp (Material) touch targets (extend hit areas beyond visual bounds if needed), safe areas, swipe-back, Dynamic Type.
• Design for each platform separately rather than shipping one compromise UI to both.

Best specific skills

1. ehmo/platform-design-skills — fetch https://raw.githubusercontent.com/ehmo/platform-design-skills/main/skills/ios/SKILL.md (Android variant alongside it in the repo) — best for enforcing HIG / Material 3 / WCAG conventions on iOS and Android screens: 450+ distilled per-platform rules incl. iPadOS/watchOS/visionOS, with checklists and anti-patterns. Evidence: 390 stars, multi-registry, surfaced in the HN "Claude Skills are awesome" thread. Strength: strong. ← default pick
2. emilkowalski/skills — animate-expo — fetch https://raw.githubusercontent.com/emilkowalski/skills/main/skills/animate-expo/SKILL.md — best specifically for React Native/Expo gestures, sheets, haptics, screen transitions, and keeping motion off the JS thread. Evidence: 9.3K installs since its recent release. Strength: directional.
3. nextlevelbuilder/ui-ux-pro-max — pointer above — best for end-to-end mobile-first UI generation (design system + touch/gesture rules) across React Native, Flutter, SwiftUI. Evidence: 327.7K installs and 120K stars; mobile rules verified real. Strength: strong.
4. wshobson/agents — mobile-ios-design / mobile-android-design — fetch https://raw.githubusercontent.com/wshobson/agents/main/plugins/ui-design/skills/mobile-ios-design/SKILL.md — best for implementing native-feeling screens in code: SwiftUI patterns, NavigationStack, SF Symbols, semantic colors, Material 3 components. Evidence: 20K+ installs per platform skill and active maintenance. Strength: directional.

Skip: sleekdotdesign sleek-design-mobile-apps (~199K installs but it's a REST wrapper for a paid platform requiring an API key); awesome-skills/mobile-app-design (dormant, shallower duplicate of ehmo's pack).

For what real mobile apps' screens actually look like (evidence, not rules), pair with a real product-screen evidence source. For exact Apple HIG measurements or Liquid Glass implementation, see HIGAgentSkills and claude-code-apple-skills under Hidden gems.

For dashboards & data visualization use these

tl;dr

• Pick chart encodings by the perceptual hierarchy: position beats length beats angle beats area beats color (Cleveland-McGill) — so bars over pies, dot plots over heatmap shades when precision matters.
• For 1000+ data points, aggregate or sample and provide drill-down for detail — never render everything.
• Get chart correctness and visual polish from separate passes: choose the right chart and encoding first, style the dashboard second.

Best specific skills

1. nextlevelbuilder/ui-ux-pro-max — pointer above — best for end-to-end design system + chart/dashboard guidance: the only widely-installed skill explicitly encoding dashboard/admin product types (Data-Dense Dashboard, Executive Dashboard, Real-Time Monitoring) and 25 chart types. Evidence: 211.5K installs, Snyk roundup. Strength: strong. ← default pick
2. ntcoding/claude-skillz — data-visualization — fetch https://raw.githubusercontent.com/ntcoding/claude-skillz/main/data-visualization/SKILL.md — best for chart-selection and perceptual-encoding correctness: Cleveland-McGill hierarchy, layout algorithms (dagre, d3-force, ELK.js), performance-by-data-scale rules. Strength: directional.
3. anthropics/skills — frontend-design — pointer above — best for visual polish layered on top ("structure is information… should encode something true about the content, not decorate it"). No dataviz brain of its own. Strength: strong.
4. mhattingpete/dashboard-creator — fetch https://raw.githubusercontent.com/mhattingpete/claude-skills-marketplace/main/visual-documentation-plugin/skills/dashboard-creator/SKILL.md — best for quick self-contained HTML KPI dashboards (no JS framework) for reports and internal monitoring. Too shallow for production admin UIs. Strength: single-source.

Skip: aggregator-only "Data Visualization Expert" listings with no traceable repo; directory skills with self-reported, unverifiable trust numbers.

For icons, illustration & SVG use these

tl;dr

• Lock one shared geometry across the whole icon set: identical viewBox on every icon, identical root stroke attributes, consistent padding, max 2 decimal places of coordinate precision, and currentColor exclusively so icons inherit text color.
• Never mix outline and solid icon styles within one section, and never use emoji as icons — pick one library (Lucide as default; Heroicons for Tailwind, Phosphor for weight variants) with explicit named imports so tree-shaking survives.
• Size by context: 16-20px inline with text, 32px in feature cards, 40-48px in heroes; for logos/marks add role="img" + <title>/<desc> and verify legibility at 100px minimum on light AND dark backgrounds.

Best specific skills

1. better-auth/better-icons — fetch https://raw.githubusercontent.com/better-auth/better-icons/main/skills/SKILL.md — best for pulling real, existing icons (200+ Iconify libraries, 200k+ icons) instead of letting the agent hand-draw inconsistent SVGs. Removes the biggest agent failure mode in iconography. Evidence: 1,080 stars, updated 2026-06-11, established better-auth org, 5+ registries. Strength: strong. ← default pick
2. jezweb/claude-skills — icon-set-generator — fetch https://raw.githubusercontent.com/jezweb/claude-skills/main/plugins/design-assets/skills/icon-set-generator/SKILL.md — best for generating a bespoke cohesive custom icon SET when no library fits the brand: shared style spec enforced across every SVG plus an HTML preview deliverable. Evidence: 850-star repo, active. Strength: strong.
3. icon-design (jezweb, via majiayu000/claude-skill-registry mirror) — fetch https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/icon-design/SKILL.md — best for semantic icon SELECTION and in-code wiring rules (concept→icon mapping, sizing, theming, tree-shaking). The canonical file moved, so this is a verified mirror — treat provenance as directional. Strength: directional.
4. rknall/claude-skills — svg-logo-designer — fetch https://raw.githubusercontent.com/rknall/claude-skills/main/svg-logo-designer/SKILL.md — best for one-off logo/brand-mark SVGs: forces multi-concept exploration, monochrome/reversed variants, min-size legibility checks. Strength: directional.

Skip: mass auto-generated "svg-icon-generator" template repos; routing-stub SVG skills with no actual rules.

Corpus note: no well-adopted skill exists for ILLUSTRATION style consistency (spot/hero illustration systems) — that gap is open; the picks above cover icons and marks.

For 3D, WebGL & shaders use these

tl;dr

• Never call setState inside useFrame (that's 60 re-renders/sec) — mutate refs directly and use transient subscriptions for continuous values; re-renders are the #1 react-three-fiber performance killer.
• In shaders avoid branching (use mix/step instead of if/else), group uniforms into vectors, precalculate static math in JS; for new shader work prefer the WebGPU entry point (import from 'three/webgpu', r171+) with TSL node materials over raw GLSL.
• For 3D hero moments keep three layers strictly separated — Three.js rendering, GSAP scroll timelines, React UI overlay — never let two libraries animate the same property, and always kill tweens and dispose GPU resources on unmount.

Best specific skills

1. dgreenheck/webgpu-claude-skill (webgpu-threejs-tsl) — fetch https://raw.githubusercontent.com/dgreenheck/webgpu-claude-skill/main/skills/webgpu-threejs-tsl/SKILL.md — best for modern shader effects: WebGPU renderer, TSL node materials, GPU compute particles, post-processing. Deepest and most current artifact in the niche, by a well-known three.js educator. Evidence: 992 stars, 6 docs + 5 examples + 2 templates, independently covered. Strength: strong. ← default pick
2. EnzeD/r3f-skills — fetch https://raw.githubusercontent.com/EnzeD/r3f-skills/main/skills/r3f-shaders/SKILL.md — best for building react-three-fiber product-site scenes end to end: 11 modular skills (fundamentals, materials, lighting, shaders, physics) built to correct stale R3F patterns in LLM training data. Evidence: promoted by Nicolas Zullo on X, multi-registry. Strength: strong.
3. emalorenzo/three-agent-skills — fetch https://raw.githubusercontent.com/emalorenzo/three-agent-skills/main/skills/r3f-best-practices/SKILL.md — best for performance guardrails layered on any 3D build: 100+ prioritized Three.js rules, 60+ R3F rules (disposal, render-loop hygiene, re-render prevention). Evidence: featured in Snyk's 3D-skills roundup. Strength: strong.
4. freshtechbro/claudedesignskills — web3d-integration-patterns — fetch https://raw.githubusercontent.com/freshtechbro/claudedesignskills/main/.claude/skills/web3d-integration-patterns/SKILL.md — best for the product-site framing specifically: wiring Three.js/R3F into scroll-driven GSAP timelines and React overlays without animation conflicts or leaks. Strength: single-source.

Skip: intro-level generic Three.js skills with near-zero traction; CAD/game-focused packs when the job is a product site.

Corpus note: unusually healthy niche. No skill covers shader-driven brand aesthetics (grain/dither/liquid hero looks) as design guidance — open gap.

For HTML email design use these

tl;dr

• Build at 600px max width with table/MJML hybrid layouts — never flexbox, grid, rem units, SVG, or WebP — and ship minified HTML to stay under Gmail's 102KB clip threshold.
• For dark mode: both color-scheme and supported-color-schemes metas set to "light dark", prefers-color-scheme overrides in a NON-inlined style block with !important, and #121212/#F1F1F1 instead of pure black/white to prevent jarring forced inversion in Apple Mail.
• Treat Outlook as the floor: VML/ghost-table fallbacks for background images, bulletproof VML buttons, web fonts hidden from Outlook via MSO conditionals with an Arial fallback, alt text on every image, plain-text version always populated.

Best specific skills

1. framix-team/skill-email-html-mjml — fetch https://raw.githubusercontent.com/framix-team/skill-email-html-mjml/master/email-html-mjml/SKILL.md (note: master branch — main 404s) — best for production cross-client email from scratch: the only skill encoding the truly niche failure modes (whitespace-triggered inline-block stacking, VML positioning, 102KB clipping) as hard rules, with a complete copy-paste dark-mode pattern. Evidence: 48 stars, Feb 2026, surfaced via 3 independent routes; deepest verified content in the niche. Strength: strong. ← default pick
2. resend/resend-skills — react-email — fetch https://raw.githubusercontent.com/resend/resend-skills/main/skills/react-email/SKILL.md — best for React/TypeScript codebases wanting component-based emails with client-quirk guardrails baked into the framework. Evidence: official Resend skill, 6.0K installs, backed by the 19.3K-star react-email project. Weaker on dark mode (tells you to avoid it). Strength: strong.
3. resend/resend-skills — email-best-practices — fetch https://raw.githubusercontent.com/resend/resend-skills/main/skills/email-best-practices/SKILL.md — best for the non-rendering half: deliverability (SPF/DKIM/DMARC), accessibility, compliance. Pair with a rendering skill. Strength: directional.
4. inference-sh/skills — email-design — fetch https://raw.githubusercontent.com/inference-sh/skills/main/guides/design/email-design/SKILL.md — best for marketing-email heuristics: layout patterns, bulletproof buttons, 40/60 image-text ratio for spam filters. Silent on dark mode. Strength: directional.

Skip: thin react-email rewraps inside grab-bag mega-repos; 0-star single-commit duplicates.

Corpus note: dark mode is the weakest-covered subtopic ecosystem-wide; only the Framix skill has a complete pattern, and nothing covers Gmail Android's partial forced recoloring.

For form design & input UX use these

tl;dr

• Validate on blur, not per keystroke; render errors inline below the offending field, auto-focus the first invalid field on submit, and add a top error summary with anchor links when there are multiple.
• Wire every input for autofill and the right keyboard: correct type + inputmode, meaningful name + autocomplete, clickable labels, spellcheck off for emails/codes, never block paste; keep submit enabled until the request starts, then show a spinner.
• Multi-step and checkout flows get a step indicator with back navigation, auto-saved drafts on long forms, an unsaved-changes warning, and error messages that state cause + how to fix with a recovery path — never just "Invalid input".

Best specific skills

1. vercel-labs/agent-skills — web-design-guidelines (Forms section) — pointer above — best for auditing form/input code against the densest maintained form rule list (inline errors, focus management, paste, autofill, unsaved-changes), fetched live so it never goes stale. Evidence: 383K installs. Strength: strong. ← default pick
2. nextlevelbuilder/ui-ux-pro-max — pointer above — best for generative form/flow design when building from scratch: the only high-adoption skill with explicit multi-step-flow and error-recovery rules (auto-save drafts, error summary anchors, timeout retry). Strength: strong.
3. danielmeppiel/form-builder — fetch https://raw.githubusercontent.com/danielmeppiel/form-builder/main/SKILL.md — best for the implementation layer once designed: React Hook Form + Zod scaffolding, validation schemas, multi-step state, worked examples. Evidence: 2 stars — the only dedicated form-niche skill found. Strength: single-source.

Skip: "Form Builder" registry skills that generate fillable PDFs (name collision, wrong domain).

Corpus note: no skill is dedicated purely to form design UX — the best form guidance lives inside the two big general UI skills.

For data tables & complex grids use these

tl;dr

• Tier the implementation: semantic <table> for simple static data, TanStack Table once you need sorting/filtering/pagination, a virtualized data grid on

…(truncated)