Create animated GIFs that meet Slack size limits. Build animations with composable primitives like shake, bounce, spin, pulse, fade, zoom, and explode. Validates file size and dimensions for emoji and message GIFs.

Images often lose quality during compression or editing. This skill improves resolution, sharpness, and clarity while preserving originals. Perfect for creating professional visuals from any image.

Creating visual assets requires specialized tools and design skills. This skill enables AI-powered image generation and editing through OpenRouter, supporting FLUX and Gemini models for creating photos, illustrations, artwork, and visual concepts.

Generic AI-generated frontend code often lacks creative vision and memorable aesthetics. This skill guides Claude to create production-grade, visually striking interfaces with bold design choices, unique typography, and cohesive aesthetic direction.

Users struggle to create sophisticated, museum-quality visual designs. This skill provides a structured approach to design philosophy that guides the creation of original, artistic visual pieces in PNG or PDF format.

Create professional documents and presentations with Anthropic's brand identity. This skill provides official colors and typography guidelines to ensure consistent visual styling across all your artifacts.

Web accessibility issues can exclude users with disabilities from accessing your website. This skill provides comprehensive guidance for implementing WCAG 2.1 standards, ARIA attributes, and keyboard navigation to create inclusive experiences for all users.

Manually extracting design tokens from screenshots and mockups is time-consuming and error-prone. This skill uses a 7-pass AI process to systematically extract colors, typography, spacing, components, and accessibility details into standardized W3C DTCG JSON format ready for code generation.

Generic fonts make designs look amateur. This skill provides expert typography guidelines to create visually striking and professional text layouts using curated font recommendations.

AI assistants often generate generic, visually boring frontends that users call 'AI slob.' This skill provides design guidance for typography, color schemes, motion, and backgrounds to create distinctive, polished interfaces that stand out.

Figma MCP generates code with proprietary variables like var(--spacing-4) that create maintenance issues. This skill provides clear conversion rules to transform these variables into standard Tailwind CSS classes for cleaner, more maintainable frontend code.

Web animations often fail accessibility tests and hurt performance. This skill provides production-ready GSAP patterns that respect user preferences and maintain 60fps.

Create visually consistent presentations with professionally curated color palettes and font pairings. Save time by applying ready-made themes instead of designing from scratch.

Building animated GIFs for Slack is challenging due to strict size limits and format requirements. This skill provides validators to check Slack constraints, composable animation primitives, and utilities to create professional animated GIFs and emojis that meet platform specifications.

Users struggle to communicate complex visual design concepts to AI assistants. This skill provides a structured design philosophy framework that transforms abstract ideas into sophisticated visual art in PNG or PDF formats.

Add polished animations to landing pages and demos without compromising performance or accessibility. The Visual Engine Skill handles timing, easing, and safe motion patterns automatically.

Marketing teams struggle to translate ideas into video-ready plans. This skill provides structured frameworks for hooks, scripts, shotlists, and platform-specific guidelines across YouTube, TikTok, Instagram, and LinkedIn.

Generate consistent, accessible UI components that follow design system guidelines. Ensures visual distinctiveness, brand alignment, and accessibility compliance for every component.

Creating consistent and responsive styles for React applications requires understanding multiple CSS approaches. This skill provides ready-to-use patterns for Tailwind CSS, CSS Modules, and component variants that improve development speed.

Stop manually coding UI components from scratch. This skill generates accessible, responsive UI components and feedback forms using shadcn/ui and modern best practices.