200+ production-ready animation recipes with exact CSS/Framer Motion/GSAP code. Covers entrance/exit animations, micro-interactions, page transitions, loading states, scroll-driven animations, spring physics, and reduced motion alternatives. Every recipe includes timing, easing, and copy-paste code. Use when the user mentions: animation, transition, motion, micro-interaction, page transition, entrance animation, exit animation, loading animation, skeleton animation, scroll animation, spring animation, easing, keyframe, framer motion, CSS animation, hover effect, click animation, motion design, GSAP, ScrollTrigger, SplitText, Lenis, smooth scroll, pin and scrub, parallax, horizontal scroll, cursor effect, magnetic button, custom cursor, cursor follower, text animation, typewriter, gradient text, 3D, card tilt, card flip, floating, glassmorphism, noise grain, particle, React Three Fiber, R3F, three.js, counter animation, marquee, ticker, SVG morph, stagger, spotlight.
Production-ready UI component patterns with complete code examples in React/TypeScript, SwiftUI, and modern CSS. Uses CVA (class-variance-authority) + Tailwind CSS + Radix UI primitives. Covers component state matrices, accessibility patterns, design token integration, and responsive behavior. Use when the user mentions: React component, SwiftUI view, CSS component, component pattern, button component, modal component, form component, input component, state matrix, code example, build component, select component, combobox, dialog, toast, notification component, skeleton screen, empty state component, data table, loading state, error boundary, focus trap, design tokens code, TypeScript component, accessible component, ARIA component, CVA, class-variance-authority, Radix UI, shadcn, cmdk, command palette, Vaul, drawer, sheet, Sonner, toast notification, TanStack Table, React Hook Form, Zod, compound component, forwardRef, variant, badge, avatar, dropdown menu, popover, accordion, tabs, tooltip, switch, toggle,
20+ complete, ready-to-deploy design token systems for every major industry vertical. Each preset includes color scales (primitive + semantic), typography scales, spacing systems, border radius, shadows, motion tokens, breakpoints, and z-index — in W3C DTCG JSON format, CSS custom property output, AND Tailwind v4 @theme configuration. Style Dictionary 4.x config included. Figma Variables mapping. Use when the user mentions: design tokens preset, token system, ready-made tokens, industry tokens, startup tokens, SaaS tokens, fintech tokens, healthcare tokens, ecommerce tokens, token set, token template, quick tokens, token starter, design tokens ready, Tailwind v4 tokens, @theme tokens, DTCG JSON, W3C design tokens, Style Dictionary, Figma Variables, token JSON.
Current visual design standards for every major platform and device type — iOS 26 Liquid Glass (materials, vibrancy, SF Symbols 7), Material 3 Expressive (35-shape library, spring physics, HCT color, Dynamic Color), modern web CSS 2025-2026 (container queries, view transitions, scroll-driven animations, oklch(), anchor positioning), watchOS/tvOS/automotive (complications, 10-foot UI, CarPlay), spatial/XR (visionOS, Meta Quest, WebXR), and cross-platform design harmony (one design system, 9 form factors). Use when the user mentions: iOS design, Android design, Material Design, Liquid Glass, SwiftUI, Jetpack Compose, responsive design, platform guidelines, HIG, device-specific, watch app, TV app, car app, spatial design, AR, VR, visionOS, cross-platform, web design, CSS, breakpoints, form factors.
Complete image, video, and media UI pattern system. Covers hero images, product images, galleries, carousels, video players, audio players, avatars, thumbnails, image cropping, aspect ratios, lazy loading, responsive images, and media accessibility. Use when the user mentions: image, photo, gallery, carousel, slider, video player, audio player, avatar, thumbnail, hero image, product image, media player, image grid, lightbox, image crop, aspect ratio, responsive image, lazy loading, srcset, picture element, media pattern.
100+ full-page composition recipes showing exact block stacking order, spacing rhythm, visual pacing, and content hierarchy for every common page type. Covers landing pages, app screens, dashboards, e-commerce, auth flows, settings, profiles, and more — each with industry variants and responsive transformations. Use when the user mentions: page layout, page composition, page recipe, landing page, page structure, page template, full page design, page flow, page rhythm, block order, section order, page wireframe, complete page, page skeleton, page blueprint.
MCP integration layer for AI-powered visual design generation — Stitch MCP (UI screen generation), Fal.ai MCP (600+ models including Imagen 4, FLUX, Veo 3.1), Replicate MCP (open-source models), Recraft V3 MCP (only SVG/vector-capable model), OpenAI GPT-Image MCP, and Figma MCP (official design read/write). Covers prompt engineering for visual design output, multi-tool generation pipelines (sketch to refine to code), asset generation (icons, illustrations, photos, video), and quality control scoring for generated designs. Use when the user mentions: generate design, create mockup, AI design, generate screen, create UI, make me a design, generate icons, create illustrations, Stitch, Imagen, Veo, DALL-E, Recraft, design generation, AI mockup, generate assets, create visuals.
Professional design business templates covering proposals, case studies, pitch decks, design documentation, client handoffs, pricing calculators, project briefs, and design system documentation. Use when the user mentions: proposal, case study, pitch deck, design presentation, client handoff, design documentation, project brief, design specs, style guide, design deliverable, pricing calculator, invoice, SOW, scope of work, design portfolio, client report, design brief.