Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design
React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()
React Native and Expo best practices for performant mobile apps across list rendering, animations, navigation, and native modules. Covers eight rule categories prioritized by impact: list performance (FlashList, memoization, callback stability), animations (GPU properties, derived values), navigation, UI patterns, state management, rendering, monorepo structure, and configuration List performance rules address critical concerns like virtualizing large lists, optimizing images, and avoiding inline objects that trigger unnecessary re-renders Animation guidance focuses on GPU-accelerated properties (transform, opacity) and Reanimated patterns; navigation recommends native stack and tab navigators over JavaScript alternatives Includes rules for modern UI patterns: expo-image for all images, Pressable over TouchableOpacity, native modals, and safe area handling in ScrollViews
Comprehensive Next.js development guidelines covering file structure, RSC patterns, data fetching, optimization, and error handling. Covers 15+ topic areas including file conventions, route segments, RSC boundaries, async patterns, metadata generation, and image/font optimization Provides runtime selection guidance, directive usage, and error handling strategies with specific file conventions like error.tsx and not-found.tsx Includes data fetching patterns, route handler best practices, bundling considerations, and hydration error debugging Addresses advanced patterns such as parallel routes, intercepting routes, Suspense boundaries, and self-hosting with Docker
Multi-component React artifacts for Claude with bundling, state management, and shadcn/ui component library. Scaffolds React 18 + TypeScript projects with Vite, Tailwind CSS, and 40+ pre-installed shadcn/ui components via automated initialization script Bundles complete artifacts into single self-contained HTML files with inlined assets, ready for Claude artifact display Includes design guidance to avoid common "AI slop" patterns like excessive centering, purple gradients, and uniform rounded corners Supports complex workflows requiring routing, state management, and Radix UI dependencies out of the box
Generative art creation using p5.js with seeded randomness and parametric exploration. Creates algorithmic philosophies (computational aesthetic movements) expressed through interactive p5.js sketches with full parameter control Supports seeded randomness for reproducible art variations, seed navigation (previous/next/random/jump), and real-time parameter adjustment via sliders and color pickers Outputs self-contained HTML artifacts with embedded p5.js code, sidebar controls, and download functionality—no external files or setup required Emphasizes craftsmanship through controlled chaos: emergent behavior constrained by mathematical rules, noise fields, particle systems, and flow dynamics
Professional font and color themes for styling presentation decks, documents, and web artifacts. Includes 10 pre-set themes (Ocean Depths, Sunset Boulevard, Forest Canopy, Modern Minimalist, Golden Hour, Arctic Frost, Desert Rose, Tech Innovation, Botanical Garden, Midnight Galaxy) each with cohesive color palettes and complementary font pairings Supports custom theme generation on-the-fly when none of the preset themes fit your needs Applies themes consistently across artifacts by reading theme specifications and enforcing proper contrast and readability Workflow: display theme showcase, get user selection, apply chosen theme's colors and fonts throughout the artifact
Apply Anthropic's official brand colors and typography to visual artifacts and designs. Includes a defined color palette with primary dark/light neutrals, mid and light grays, plus three accent colors (orange, blue, green) Applies Poppins font to headings (24pt+) and Lora font to body text, with automatic fallbacks to Arial and Georgia Smart color selection based on background context to preserve readability and visual hierarchy Works with system-installed fonts; no additional installation required, though pre-installing Poppins and Lora is recommended for best results
Complete guide for building native Expo apps with routing, styling, components, and platform conventions. Covers Expo Router fundamentals, native tabs, stack navigation, modals, and form sheets with detailed route structure conventions Includes styling rules aligned with Apple Human Interface Guidelines: flexbox layouts, safe area handling, animations, shadows via CSS boxShadow , and responsive design patterns Documents library preferences (expo-image for SF Symbols, expo-audio, expo-video, expo-glass-effect) and anti-patterns to avoid (legacy modules, intrinsic HTML elements, StyleSheet over inline styles) Provides reference guides for animations, controls, search, storage, visual effects, WebGPU/3D graphics, and zoom transitions Emphasizes testing in Expo Go first before creating custom builds, with clear guidance on when native code is actually required
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view…
Distinctive, production-grade frontend interfaces that reject generic AI aesthetics through intentional design direction. Guides developers through design thinking before coding: establish purpose, tone, constraints, and a memorable differentiator to avoid cookie-cutter results Emphasizes typography choices (distinctive display and body fonts), cohesive color palettes with CSS variables, and high-impact motion through staggered animations and scroll triggers Covers spatial composition techniques including asymmetry, overlap, diagonal flow, and grid-breaking layouts paired with atmospheric backgrounds and textures Explicitly warns against overused fonts (Inter, Roboto, Arial), clichéd color schemes (purple gradients), and predictable component patterns that signal AI-generated work
Mix static, cached, and dynamic content in a single Next.js route with Partial Prerendering. Enable with cacheComponents: true in next.config.ts ; replaces the old experimental.ppr flag Use the 'use cache' directive at file, component, or function level to cache async data with automatic key generation based on arguments and closures Control cache lifetime with cacheLife() using built-in profiles ( 'minutes' , 'hours' , 'days' , 'weeks' , 'max' ) or inline configuration with stale, revalidate, and expire times Invalidate caches with cacheTag() for tagging and updateTag() for immediate refresh or revalidateTag() for background revalidation Wrap dynamic content in Suspense; cannot access cookies() , headers() , or searchParams inside use cache blocks unless using 'use cache: private'
Universal Tailwind CSS v4 styling for Expo apps across iOS, Android, and Web. Integrates Tailwind CSS v4 with react-native-css and NativeWind v5 via Metro transformer, eliminating the need for Babel configuration Provides reusable CSS-wrapped component library (View, Text, ScrollView, Pressable, TextInput, Image, Link) that apply className styles to native elements Supports platform-specific styling through CSS media queries, custom theme variables via @theme blocks, and Apple semantic colors with platformColor() and light-dark() functions Includes CSS variable hooks for accessing theme values in JavaScript and configuration examples for Metro, PostCSS, and global CSS setup
Run web-only libraries in Expo apps by rendering them in webviews on native and as-is on web. Supports any React web library (recharts, react-syntax-highlighter, canvas, WebGL) without modification by wrapping it in a DOM component file with the 'use dom'; directive Passes serializable props and async functions from native to webview, enabling bidirectional communication between native and web contexts Includes webview configuration options via the dom prop: scroll control, safe area behavior, manual sizing, and style overrides Works with Expo Router navigation APIs; router state hooks require passing values as props from native parent components Renders in WKWebView on iOS, WebView on Android, and as standard React on web with identical code
Visual inspection and source-level fixing of website design issues across responsive, accessibility, and layout concerns. Detects layout overflow, alignment problems, responsive breakpoints, accessibility contrast issues, and visual inconsistencies across mobile (375px), tablet (768px), desktop (1280px), and wide (1920px) viewports Supports static sites, SPAs (React/Vue/Angular/Svelte), full-stack frameworks (Next.js/Nuxt/SvelteKit), and CMS platforms with automatic framework and styling method detection Identifies source files by selector search and component patterns, then applies minimal fixes respecting existing code style and avoiding regressions Requires a running target website (local dev server, staging, or production) and workspace access to source code for making fixes; includes before/after screenshot comparison and iteration up to three attempts per issue