Web Design skills

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

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

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

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

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

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

Create animated GIFs optimized for Slack messages and custom emojis.

Create original visual art and posters in PNG and PDF formats.

Apply Anthropic's official brand colors and typography to any design or artifact.

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

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

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

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.

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.

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

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

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

Build flexible, maintainable React components using composition techniques.

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

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.

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

Search and retrieve SVG icons from 200+ libraries instantly.

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.

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

Audit components for WCAG accessibility issues and get fixes.

Generate accessible alt text descriptions for images and data visualizations.

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

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

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.

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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.

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.

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

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

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

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

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

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 and edit images with text or reference images using Gemini's native models.

Publish React components to your team library or install shared ones.