Web Design Claude skills

Build complex React artifacts with Tailwind CSS and shadcn/ui components.

Build production-grade web components and interfaces with distinctive, polished design.

Apply professional color and font themes to slides, docs, and web pages.

Anthropic's official skill for building real, distinctive UIs — not the generic AI default.

Garry Tan's 23-role Claude Code stack — CEO, designer, eng, QA, security, release, all as slash commands.

Create logos, brands, design tokens, banners, and social media graphics.

Create design tokens, component specs, and branded presentations from a systematic token architecture.

Create strategic HTML presentations with charts, responsive layouts, and copywriting optimization.

Score a design against Dieter Rams' principles and create a plan to improve it.

Design continuous camera motion across multi-scene animations using vector rules and momentum laws.

Master velocity-matched transition techniques for cinematic motion graphics and kinetic text.

Learn when to drop, rail, or embed captions as overlays on video.

Get design guidance for visual identity, typography, and layout choices.

Create clear SVG diagrams that show how systems work, not just label them.

Understand slide format, navigation, and structure in HTML presentations.

Reference CSS classes and HTML patterns for presentation components.

Generate a complete long-form article with masthead, hero image, and related posts.

Generate music, voiceovers, and sound effects as audio files.

Create 40+ diagram types as branded HTML, SVG, or PNG files.

Generate and edit images from text descriptions using AI.

Audit digital products for WCAG compliance and identify accessibility barriers.

Build interactive 3D scenes and product configurators for web browsers.

Kills generic AI design — gives your interfaces deliberate taste, motion, and polish.

Build flexible, maintainable React components using composition techniques.

Optimize React and Next.js code following Vercel's performance best practices.

Animate page and component transitions using React's native View Transition API.

Review UI code for compliance with web interface best practices and accessibility standards.

Create animation-rich HTML presentations from scratch or convert PowerPoint files.

Compress images to WebP or PNG format with automatic tool selection.

Three sliders that tune Claude's UI output. Stops the generic AI look.

Build and optimize React and Next.js applications with performance analysis and accessibility.

Build immersive scroll-driven websites with parallax effects, text animations, and interactive depth.

Scan code for accessibility violations and generate WCAG 2.2 compliance reports.

Build interactive data dashboards and pages with live charts and shareable public links.

Create minimal presentation slides with arrow-prefixed lists and keyboard navigation hints.

Create beautiful dark-themed presentation decks with animated knowledge graphs and code highlighting.

Create horizontal-swipe presentation decks with eight professional Replit themes.

Add 3D models, cinematic cameras, and advanced layouts to PowerPoint presentations.

Create PowerPoint presentations with smooth cross-slide animations and shape continuity.

Design production-grade interfaces, components, and visual layouts with modern polish.

Transform content into styled PNG cards with seven layout templates.

Create generative art with p5.js using algorithms, randomness, and interactive parameters.

Find copy-paste-ready UI component patterns for COSS primitive-based designs.

Generate product screenshots by automating browser capture with AI verification.

Generate visual HTML explainers and narrated videos from Markdown drafts.

Create reusable templates for design, slides, and video projects.

Reverse-engineer design tokens, components, and patterns from live products or screenshots.

Check contrast, keyboard navigation, focus states, and mobile usability for real users.

Generate, edit, and refine images from text prompts with design templates.

Deploy static files to IPFS or full-stack web projects with backend APIs and databases.

Generate minimalist, scalable vector logos using geometric shapes and negative space.

Create cinematic product videos from shot templates, screenshots, and audio assets.

Optimize marketing funnels and conversion rates with AI-powered analysis.

Embed HTML visualizations directly in chat messages without opening panels.

Generate low-fidelity HTML wireframes to test layout, navigation, and task flow before design.

Create custom visual designs and styling for HTML pages, reports, and interactive tools.

Generate interactive HTML diagrams to visualize relationships, sequences, and structures.

Generate animated short films in artistic styles like oil painting, watercolor, and Chinese ink wash.

Extract colors, fonts, and design tokens from any website into multiple formats.

Create systematic product designs grounded in research, from UI screens to visual identities.

Check web interfaces for WCAG compliance and keyboard, screen-reader, and focus accessibility.

Score and diagnose Google Ads landing pages to improve conversion rates and Quality Score.

Maintain consistent styling and components across React dashboards and Docusaurus websites.

Optimize landing pages for influencer traffic and boost conversion rates.

Fetch brand logos and cloud service icons as ready-to-use SVG files.

Create polished product demo videos with motion graphics and real UI rendered as HTML.

Convert raster logos to animated SVG with Disney animation principles applied.

Edit local video projects with timeline, captions, and motion graphics tools.

Plan and structure AI-generated short films with storyboards, shot lists, and visual prompts.

Generate systematic checklists to verify design implementations match specifications.

Identify and prioritize design inconsistencies and structural problems in your product.

Design cohesive visual stories for GitHub READMEs with custom SVG assets.

Design and review website and app interfaces with side-by-side style comparison and visual refinement.

Generate or edit images using OpenAI's image models.

Build UI components following Penguin Harness web app conventions and patterns.

Review and argue against current design work to catch flaws and weaknesses.

Apply a design direction—archetype or brand system—to match a specific look and feel.

Generate a complete, accessible design system with tokens, themes, and WCAG-verified styles.

Check your UI against WCAG 2.2 standards and identify accessibility issues with fixes.

A design review from Emil Kowalski — catches the small things that make UIs feel right.

Audit websites for conversion issues and design A/B tests based on visitor behavior.

Create complex React artifacts with Tailwind CSS and shadcn/ui components.

Apply professional color and font themes to slides, docs, and web pages.

Present annotated screenshots as visual proof of completed changes.

Create interactive HTML mockups to design and plan UI layouts visually.

Create flowcharts, architecture diagrams, and visual sketches with Excalidraw.

Automate browser interactions and render web pages for visual evidence.

Convert online presentation templates into reusable style prompts and layouts.

Build accessible, brand-aligned design systems with tokens and component specs.

Build accessible design systems with tokens, components, and intent-first principles.

Generate on-brand marketing copy with structured output for websites and products.

Design professional logos from brief through production files and brand guidelines.

Learn universal design principles for visual hierarchy, typography, interaction, and accessibility.

Turn code or descriptions into Figma designs using your existing design system.

Extract design systems from UI screenshots and generate implementation-ready design prompts.

Generate framework-aware code from Figma designs using your project's existing components and tokens.

Create original visual designs and posters as PNG or PDF files.

Generate elegant article cover images with customizable colors, styles, and layouts.

Define your game's complete visual style, camera work, characters, colors, and audio direction.

Recreate award-winning creative websites with forensic precision by reverse-engineering their code.

Review components for accessibility issues and WCAG compliance.

Explain what code does in plain English.

Automatically update component documentation when source code changes.

Create interactive UI mockups, prototypes, and wireframes as self-contained HTML.

Create and update terminal demo GIFs for mcpc using VHS scripts.

Review design specs and prototypes against aesthetic standards and anti-AI-slop guidelines.

Design and build beautiful websites, cinematic scroll animations, and complete design systems.

Evaluate design system colors for accessibility, contrast, consistency, and color-blindness safety.

Reference guide for GSAP animation methods, easing, timelines, and performance optimization.

Install and wire reusable blocks and components into HyperFrames compositions.

Define visual style, composition, and audio direction for game production from design specs.

Review UI code for compliance with web design and accessibility best practices.

Build native mobile app screens with production-quality design and UX.

Search and retrieve SVG icons from 200+ libraries instantly.

Build AI chat interfaces with pre-made conversation and message components.

Generate professional system architecture diagrams as shareable HTML and SVG files.

Generate beautiful blog cover images with typography, logos, and current web context.

Evaluate screens for usability issues using Nielsen's heuristics and mobile best practices.

Audit components for WCAG accessibility issues and get fixes.

Add loading, success, error, and empty states to your components.

Create and apply brand.yml files for consistent branding across Shiny and Quarto projects.

Generate accessible alt text descriptions for images and data visualizations.

Review designs, write UI copy, build systems, and check accessibility.

Find the correct term for any web animation or motion effect by description.

Design refined, purposeful UI animations for hovers, transitions, and micro-interactions.

Audit and fix accessibility issues in UI components for WCAG compliance.

Generate images and animations using your ChatGPT or Gemini subscription.

Find unexpected design inspiration by exploring patterns from unrelated industries and domains.

Get design feedback by comparing your screen to real examples and improvement ideas.

Critique and rewrite paywall call-to-action copy with conversion-tested alternatives.

Render interactive SVG diagrams, charts, and HTML widgets directly in chat.

Find the exact name for any web animation or motion effect from a vague description.

Generate shadcn/ui-styled status badges for project documentation.

Create or edit Power Apps canvas applications from requirements and specifications.

Generate scalable vector graphics from text descriptions.

Design and iterate UI layouts, components, and flows on an infinite canvas.

Generate PNG, JPEG, or WebP images using your ChatGPT account without an API key.

Create and refine 32×32 pixel-art avatar faces for animated agent personas.

Build polished, production-ready web components and pages with distinctive design.

Review and write Compose UI code for correctness, performance, and accessibility.

Build production-grade web components and interfaces with polished, distinctive design.

Build presentation slide decks as HTML pages with fixed dimensions and layout.

Verify that rendered UI components actually use your design system tokens and catch styling violations.

Build and render academic conference posters to print-ready PDF.

Generate browser-rendered pages and components with dark mode and theme support.

Run a comprehensive WCAG compliance audit and generate a remediation plan.

Add, fix, or remove animations from your UI with purpose and restraint.

Audit and build accessible web interfaces meeting WCAG standards for news and academic sites.

Capture and display screenshots of web pages or specific elements.

Create original visual designs and artwork as PNG or PDF files.

Apply Anthropic's official brand colors and typography to your designs.

Review UI code for compliance with web design and accessibility best practices.

Plan UI features with design specs, accessibility, and navigation before coding.

Generate a comprehensive UX architecture bible by auditing your app's code and design patterns.

Add strategic color to dull interfaces to increase visual engagement and warmth.

Add purposeful animations and micro-interactions to enhance UI usability and delight.

Fix crowded layouts, inconsistent spacing, and weak visual hierarchy in designs.

Make bland designs more visually interesting and engaging while keeping them usable.

Apply your project's design system to UI, styling, and copy decisions automatically.

Extract design tokens and variables from Figma and generate ready-to-use QML code.

Generate interactive HTML diagrams in engineering blueprint style for architecture and system flows.

Design WCAG-compliant accessibility tests for keyboards and assistive tech.

Choose and implement a modern UI design style with tokens, components, and accessibility guidelines.

Generate animated logo reveal videos with 3D effects and branding elements.

Remove AI-generated patterns and add handcrafted polish before shipping.

Design accessible iOS and Android interfaces following platform guidelines and modern best practices.

Create accessible UI designs with token compliance, responsive layouts, and WCAG standards.

Build WCAG 2.2 compliant web apps with keyboard navigation and screen reader support.

Generate, review, and integrate AI-built UI components into design systems.

Build accessible animations and page transitions with Motion library patterns.

Build animated React components for Next.js with Tailwind CSS and Framer Motion.

Review UI code for visual hierarchy, spacing, typography, accessibility, and responsiveness issues.

Render Portable Text to React, Vue, HTML, Markdown, and plain text.

Design flexible, reusable content schemas for headless CMSes.

Write and run automated accessibility tests for web apps using Playwright and axe-core.

Scan web pages for WCAG compliance issues and accessibility violations using automated testing.

Guide visual style searches with branching prompts, feedback loops, and direction selection.

Create custom color schemes for MulmoTerminal terminals and save them to your config.

Optimize GSAP animations for smooth 60fps with transforms, opacity, and batching.

Add, search, and style shadcn components in your project.

Build Android TV apps that work with only a d-pad remote control.

Extract design tokens and starter files from any public website.

Generate custom TipTap nodes for edit, preview, and PDF modes.

Scan code for WCAG 2.1 AA and EU accessibility compliance issues.

Test and improve web accessibility for WCAG compliance and inclusive design.

Run automated accessibility tests and fix issues in your CI pipeline.

Convert your website or PWA into an iOS app with App Store submission strategy and release guidance.

Design polished landing pages, dashboards, and UI copy that users understand instantly.

Audit and fix Flutter widgets for WCAG 2.2 accessibility compliance.

Apply professional color and font themes to slides, docs, and web pages instantly.

Build polished, production-grade web components and interfaces with distinctive design.

Replicate a website's design and visual style for your own product.

Turn product specs into design prompts for web UI generators like Figma and v0.

Add, search, and customize shadcn components in your UI projects.

Create multi-component React artifacts with Tailwind CSS and shadcn/ui components.

Create animated videos by writing HTML, CSS, and GSAP timelines.

Determine if preview changes are real regressions or just unstable rendering.

Generate branded interfaces and assets following Honeycomb design guidelines and components.

Get nine pre-built Home Assistant dashboard styles with ready-to-copy CSS and templates.

Reverse-engineer a website into a working local implementation with audit artifacts.

Build polished, designed UI that avoids generic AI defaults with design tokens and visual QA.

Convert screenshots and diagrams into editable SVG and PowerPoint files.

Extract a website's design tokens and generate a spec-compliant DESIGN.md file.

Create pitch decks, one-pagers, objection docs, and demo scripts to help close deals.

Maintain dashboard translations and locale-aware formatting across HitKeep.

Create a professional portfolio website or presentation homepage with responsive design.

Convert design prototypes to production React, Vue, or Svelte code.

Create original visual designs as PNG or PDF files using design philosophy principles.

Apply Anthropic's official brand colors and typography to your designs.

Generate, upscale, and edit images using AI with multiple quality and cost options.

Design beautiful, on-brand UIs instead of generic AI-generated interfaces.

Turn concepts into beautiful brand-matched illustrations by recoloring unDraw artwork.

Analyze SwiftUI app flows to find navigation issues and broken user paths.

Generate and edit images with text or reference images using Gemini's native models.

Build AI chat interfaces with pre-built UI components for Next.js apps.

Install the ClaraConverts AI voice chat widget on any website — one line of code, or provision a free trial via MCP if there's no account yet.