Browse skills

Builds an accessible brand color palette - one anchor color, role assignments, 9-step tonal scales, 60-30-10 distribution, and documented usage rules - ready for a developer to implement without guessing. Use when someone asks "pick our brand colors", "build a color system for our app", "what shade should our buttons be", or is defining the color layer of a design system. Do NOT use for auditing or fixing contrast failures and color-blindness issues in an existing product - use color-accessibility instead; for assembling the full brand book around the palette, use brand-guidelines.

Chooses and pairs typefaces and builds a modular type scale - ratio, named roles, line heights, measure limits, and responsive values - as a complete design-system type layer. Use when someone asks "what fonts should we use", "build our type scale", "why does our typography feel inconsistent", or is establishing the typographic voice for a brand or product. Do NOT use for animated or motion typography - use kinetic-typography instead; for page-level emphasis, spacing, and layout decisions, use visual-hierarchy; for assembling the full brand book, use brand-guidelines.

Generates twenty-plus brand or product name candidates across five naming archetypes, scores them against weighted criteria without averaging, and runs linguistic and memorability safety checks. Use when someone asks "help me name my startup", "is this a good product name", "generate name ideas for this feature", or is auditing an existing name for distinctiveness, strategic fit, and risk. Not a substitute for professional trademark clearance. Do NOT use for crafting the positioning the name must express - use positioning-statement instead; for briefing the visual identity around a chosen name, use logo-brief-writer.

50+ visual styles, 161 color palettes, 57 font pairings across React, Next.js, SwiftUI, React Native, and more.

Diagnoses and fixes visual hierarchy in a page, screen, or layout using ranked levers - size, weight, color, position, whitespace - and the one-focal-point-per-view rule. Use when someone asks "why does this layout feel flat", "what should the eye see first", "everything is competing on this screen", or wants the reading order of a composition made intentional. Do NOT use for a full multi-dimension design review covering usability and craft - use design-critique instead; for building the underlying type scale, use typography-system.

Designs or audits an icon set so every glyph shares one grid, stroke weight, corner language, naming convention, and export pipeline, and delivers the written icon spec engineering builds against. Use when someone asks "our icons look inconsistent", "set up an icon grid", "how should we name icons", "audit this icon set", "prep our SVGs for handoff", or is commissioning new icons and needs the rules first. Do NOT use for a single logo mark - use logo-brief-writer instead; for delivering full design specs beyond icons, use design-handoff-doc.

Writes a complete creative brief for a logo or identity project - business context, a three-adjective personality axis, deliverables and constraints, competitive territory, rounds and timeline, and concrete success criteria. Use when someone asks "write a logo brief", "brief a designer for our rebrand", "what do I send the identity studio", or is kicking off a brand identity engagement. Do NOT use for generating the brand name itself - use brand-naming instead; for documenting the finished identity system's usage rules, use brand-guidelines; for briefing broader creative direction, use moodboard-builder.

Official Anthropic skill. Guides Claude to create distinctive, production-grade UIs - not the default Inter + purple gradient.

Assembles a curated moodboard of 8 to 16 images plus a 150-300 word art direction statement that argues for one visual direction. Use when someone asks "build a moodboard", "set the visual direction for this brand", "get the team aligned on look and feel before design starts", or is presenting art direction to a client. Do NOT use for sourcing and licensing individual production images - use visual-asset-curation or stock-photo-finder instead; for codifying an already-approved identity into usage rules, use brand-guidelines.

Sets up a premium design language before any asset is produced - the three brand-fork decisions (pill or rectangle CTAs, dark utilitarian or warm editorial canvas, playful or precise motion), a frozen fixed-core/flex-variable contract, and the shared-numbers charter every downstream design, motion, and copy skill cites. Use when someone asks "set up a design language for our product", "should our buttons be pills or rectangles", "should our brand go dark mode or warm light", "what should never change across our brand assets", "make our app feel as considered as a top-tier tool", or before commissioning any visual, motion, or copy work. Do NOT use to diagnose why an existing design feels generic - use design-tell-inspector instead; for the full brand book, use brand-guidelines; for creating the palette itself, use color-palette-builder.

Diagnoses why a design reads as generated or template-built - scans the artifact against a 22-row anti-pattern table where every row names the tell, the perceptual mechanism behind it, and the skill that fixes it, then returns a severity-ranked, slug-routed fix list. Use when someone asks "why does this design feel AI-generated", "this looks like a template and I cannot say why", "what makes this page feel generic", "find the tells in this landing page", "why does this feel cheap even though it is clean", or work passes technical review yet reads mass-produced at a glance. Do NOT use for a general critique of usability and flow - use design-critique instead; to set up the design language that prevents the tells, use premium-design-foundations.

Designs marketing-site hero and launch-page motion - scroll-linked scrub sections pinned 100-200vh, one signature mechanic per page, small masked reveals, and hard performance gates - so the page choreographs the story without scroll-jacking, jank, or the animated-template look. Use when someone asks "add a scroll animation to our landing page hero", "pin a section that scrubs as the user scrolls", "is this scroll-jacking or scroll-linked", "our homepage animations feel cheap and janky", or "what should move on our launch page", or when a launch page needs motion that still passes performance budgets. Do NOT use for in-product UI motion systems - use animation-system instead; for the hero's static artwork and composition, use website-hero-artwork; for the headline words themselves, use landing-page-copy; for a rendered video file embedded in the hero, use remotion-compose.