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.

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.

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

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.

Builds a coherent UI motion system - a duration token scale, named easing curves, choreography rules, and a per-component mapping - so every transition in the product draws from one vocabulary instead of ad-hoc values. Use when someone asks "define our motion tokens", "our animations feel inconsistent", "what duration should this modal use", "set up easing standards", or is starting a design system and needs the motion layer. Do NOT use to spec the motion of one specific component or flow - use motion-spec instead; for animated type treatments, use kinetic-typography.

Generates self-contained HTML product showcase pages with hero, features, pricing, testimonials, and CTAs.