Principles and guides

Code review rules

UI principles

Spacing, hierarchy, typography, color, depth and polish for any screen.

• Accessibilitya11y, contrast, focus, keyboard navigation, tap target, screen reader
• Animation & Motionmotion, transitions, easing, cubic-bezier, timing function, custom easing curve
• Animation Judgementshould i animate this, animation purpose, animation categories, types of animation, too much animation, over animated
• Animation Vocabularyanimation glossary, motion terminology, motion vocabulary, name the motion, motion language, animation naming
• CSS Motion Mechanicstransform order, transform function order, rotate before translate, my rotation flew across the screen, element drifting sideways, orbit animation css
• Canvas Animationhtml canvas, requestAnimationFrame, devicePixelRatio, delta time, generative art, noise
• Canvas DrawingdrawImage, Path2D, canvas gradients, 2d context, fillRect, beginPath
• Canvas Fields And Gridsgrid of circles canvas, per-cell value field, normalize range mapping, clampedNormalize, nested normalize, expanding ripple canvas
• Canvas Motion Modelvelocity, gravity, canvas physics, forces, particle motion, polar velocity
• Color Systemcolors, palette, hsl, oklch
• Component Architecturecomponent design, compound components, composition, props api, derived props, direct manipulation performance
• Depth & Surfacesshadows, surface, surfaces, materials, glass, translucency
• Distill to Essentialsstrip to essentials, simplify, remove clutter, minimal, less is more, reduce to essentials
• Edge Fades over Hard Clippingmasking, overflow, clipping, edge fade, container bleed, mask-image
• Hover & Boop Patternsboop, hover craft, hover transition, button scale, nudge animation, secondary motion
• Icon Drawingicon grammar, draw an icon, icon set, custom icon, stroke icon, icon geometry
• Image Guidelinesphotos, media, user uploads, image contrast
• Looping and Multi-Stage Motionkeyframes, keyframe timing, times array, repeat, loop animation, ambient motion
• Make It Boldermake it bolder, increase visual weight, stronger presence, more impactful, add punch, more dramatic
• Make It Quieterreduce visual noise, calmer, less busy, tone it down, more subtle, too cluttered
• Marketing Pageslanding page, marketing site, hero, blog, docs site, above the fold
• Motion Hooksmotion values, useSpring, useInView, whileTap, press feedback, chase a value
• Motion Layout Troubleshootinglayout animation bugs, layoutId, stretched text, layout projection, FLIP debugging, jiggling elements
• Motion Orchestrationorchestration, staggered animation, stagger delay, transition-delay, parent child animation sequence, animation-fill-mode both
• Particle Effectsparticle effect, confetti, burst, celebration animation, like button, sparkles
• Perceived Speedperceived performance, feels slow, feels fast, snappy, responsiveness, easing choice
• Performancelayout shift, cls, virtualization, preload, optimization, jank
• Pointer Interactionscursor tracking, pointer tracking, mouse position, magnetic hover, proximity effect, clip-path
• Product Imageryproduct images, product photography, product photos, image selection, lifestyle imagery, contextual imagery
• Product Pagesecommerce, product page, pdp, buy box, dtc, conversion
• Reveal Techniquesreveal animation, wipe, unmask, line drawing, draw svg, stroke dash
• Ripple Refractionwater ripple, refraction, displacement shader, liquid distortion, touch ripple, shader onboarding
• Rounding Polygon Cornersrounded polygon, corner rounding, corner radius on paths, round svg path, tangent circle, bezier arc approximation
• SVG Animationsvg, animated icons, svg paths, stroke-dasharray, stroke-dashoffset, self-drawing
• SVG Drawing Fundamentalssvg shapes, stroke, fill, paint order, svg arc, path commands
• SVG Illustrationillustration, gradients, svg depth, glossy, skeuomorphic, empty state art
• SVG Visual Effectssvg filters, goo effect, metaballs, svg gradients, linearGradient, textPath
• Scroll Animationsscroll animations, scroll driven, scroll triggered, animation-timeline, animation-range, scroll progress
• Spacing & Layoutlayout, white space, whitespace, grid, sizing, alignment
• Spring Easing in CSSlinear(), spring easing, css springs, stiffness, damping, non-bezier easing
• Typographytype, text, fonts, line height, readability
• UI Polishfinishing touches, empty states, defaults, mistakes, native feel
• Utility Class Hygienetailwind, tailwind css, utility classes, class list, class order, class sorting
• View Transitionsview transitions, startViewTransition, view-transition-name, view-transition-class, view-transition-group, shared element transition
• Visual Hierarchyvisual hierarchy, emphasis, priority, action hierarchy, blur test, scanability

UX principles

Forms, navigation, errors, onboarding and the behaviour behind each flow.

• Anti-Patterns Catalogantipatterns, bad ux, mistakes, avoid, dark patterns, ethical design
• Behavior Changebehavior design, habit formation, motivation, reducing friction, behavior map, motivation ability prompt
• Brand in Sparse Interfacesbrand, brand voice, brand in product, product personality, agent personality, assistant personality
• Cart & Checkoutcheckout, cart, basket, shopping cart, order flow, payment
• Choosing an Interaction Patternpatterns, wizard, stepper, accordion, inline edit
• Cognitive & UX Lawspsychology, biases, behavioral science, hick's law, hicks law, fitts's law
• Commerce Catalog & Assortmentcatalog, collection page, assortment, product grid, product listing, plp
• Comparisoncompare options, side by side, comparison table, results comparison, versus, choosing between options
• Consent, Permission and Sensitive Contentpermissions, opt-in, cookie banner, privacy, sensitive content, data collection
• Design Is Compromisedesign is compromise, compromise, opinionated design, no compromises, uncompromising design, tradeoff
• Design Processstarting, feature first, one screen one purpose, leveling, breaking rules, customer journey
• Dialogs, Modals & Sheetsmodals, sheets, drawers, focus trap, dismissal
• Error Handling & Recoveryerror states, recovery, retry, validation errors, network errors
• Form Behavior & Patternsinputs, validation, form errors, textarea, submission
• Gesture Mechanicsdrag, swipe, pan, pinch, pointer events, pointer capture
• Interactions & Accessibilitykeyboard, focus, hit targets, buttons, links, touch
• Microcopy & Contentcopy, content, cta, button copy, labels, empty state copy
• Mobile & iOS Patternsios, mobile patterns, tablet, layered composition, drawer, bottom sheet
• Mobile Web Browser Defaultsmobile browser, mobile safari, ios safari, chrome android, viewport height, dvh
• Motion Briefanimation brief, motion specification, plan an animation, animation interview, motion requirements, decide motion
• Navigationnav, wayfinding, breadcrumbs, back navigation, command palette
• Notifications & Feedbacktoasts, snackbars, banners, badges, feedback, alerts
• Onboarding & First-Runfirst run, setup, empty states, activation, time to first value, aha moment
• Positioningvalue proposition, headline, messaging, differentiation, who is it for, target audience
• Pricing Pages and Plan Tablespricing page, pricing table, plan comparison, paywall, upgrade, billing toggle
• Product Psychology Workflowproduct psychology, behavioral design workflow, ethical product psychology, behavioral decision making
• Reading User Intentinference, inferred intent, anticipation, smart paste, clipboard, context awareness
• Responsive Designbreakpoints, mobile first, reflow, small screens, zoom
• Searchautocomplete, suggestions, filters, facets, zero results
• Sound Designaudio, sonification, feedback sound, click sound, ui sound effects, audio sprite
• Speed & Perceived Performanceperformance, latency, perceived performance, responsiveness, local-first, optimistic updates
• Steve Jobs: How to Design Insanely Great Productsjobs, product design, simplicity, innovation, taste
• Understanding Usersusers, personas, research, domain, anti personas, customer evidence

Motion guides

Product demo videos, captions and brand-aware motion.

• Brief a product demo before choosing effectsproduct demo structure, product video brief, demo video script, hook reveal proof CTA, video archetypes, feature announcement video
• Build the product's video design system firstvideo design system, brand a Remotion video, make the video match the app, video tokens, motion personality, video theme
• Checking a renderhow do I check my video, review a render, contact sheet, extract frames, frame by frame check, video looks wrong but builds
• Make the product demo understandable without soundvideo captions, accessible product demo, caption track, reduced motion video, silent video, video contrast
• Make the product interaction the visual proofanimate product UI, demo a click, simulated cursor, type into an input, scroll a product screen, zoom into UI
• Making a product video in codefundamentals, remotion basics, how do I make a video in react, motion graphics with code, promo video, demo video
• Reflow the story for each video formatvertical video, landscape video, square video, 9:16, 16:9, social video safe area
• Story and rhythmscene order, running order, storyboard, what should my demo video say, script for a product video, video pacing
• Text and layout in a rendered framemeasureText, text is clipped, word cut off, letters missing at the end, animated word swap, word rotator
• Use Remotion resources in the right orderRemotion skills, RemotionUI, remocn, Remotion Bits, video component library, video MCP

React Native guides

Expo and React Native patterns for lists, gestures and native feel.

• Animation and Gesturesreanimated, gesture handler, swipeable, liquid glass tabs, motion, animation cookbook
• Authentication and Session Recipesoauth, authentication code examples, secure token storage, token refresh, clerk auth
• Build, Upgrade, and Releaseeas build, app store submission, play store submission, expo sdk upgrade, new architecture, version code
• Chat Component Recipesreact native chat ui, message bubble, message composer, chat timeline, typing indicator, emoji reactions
• Components and Stylingreact native components, stylesheet, flexbox, flatlist, images, figma handoff
• Data Client, Cancellation, and List Recipesfetch code examples, typed api client, query cancellation, abort signal, list performance, pure reducer
• Data, APIs, and Backendsapi routes, expo fetch, streaming, supabase, server data
• Development Builds and Environmentseas development build, expo go vs development build, environment variables, native dependencies
• Durable Generation Workflow Recipesai generation workflow, long running jobs, generation progress, retry and resume, sqlite persistence, zustand persistence
• EAS Updates and Workflowseas update, ota update, expo workflows, rollback, runtime version, channels
• Expo API Route Recipesapi route code examples, expo server routes, zod request validation, backend for frontend, ai provider adapter, rate limiting
• Media, Sharing, and Audio Recipesincoming share code examples, share extension, share images, expo sharing, expo audio, media lifecycle
• Monetization, Purchases, and Attributionin app purchases, revenuecat, subscriptions, payments, facebook sdk, attribution
• Native Modules, Views, and App Extensionsexpo modules, native module, native view, ios widget, notification extension, app extension
• Native Navigation in React Nativenative tabs, ios navigation, form sheet, sheet detents, stack toolbar, zoom transition
• Native Platform Recipesplatform specific components, expo ui code examples, swiftui compose boundary, native controls
• Native Share Extension Recipesexpo share extension, receive content from other apps, expo-sharing incoming share, expo share intent migration, ios share extension, android share intent
• Native UI with Expo UIswiftui, jetpack compose, native state
• Production Mobile App Patternsexpo starter, app template, ai app, realtime audio, authentication starter, revenuecat starter
• Production Reaction System Recipesanimated reaction bar, emoji reaction pills, optimistic message reactions, who reacted bottom sheet, tanstack query reaction cache, chat reaction picker
• Purchases and Usage Recipesrevenuecat code examples, entitlements, restore purchases, credits and usage limits, paywall state
• Push Notificationsnotifications, expo notifications, onesignal, push notifications, notification permissions, notification routing
• React Native Animation Recipesreanimated code examples, gesture handler examples, animated press, swipe action, scroll animation, reduced motion code
• React Native Component Architecturereact native architecture, universal components, native component boundary, platform files
• React Native Knowledge Base Indexreact native index, expo guide index, source coverage, public documentation coverage, all react native topics
• React Native Notification Actionsreact native, expo, notification categories, interactive notifications, push notification actions, background notification response
• React Native Themingreact native colors, expo theme, dark mode, material you, dynamic colors, semantic color tokens
• React Native and Expo Foundationsexpo setup, react native setup, expo go, project structure, how react native works
• Realtime Audio Recipeswebrtc code examples, openai realtime, ephemeral token, voice assistant, microphone session, realtime data channel
• Ripple Refraction (React Native)skia ripple, water ripple react native, runtime effect, sksl shader, image displacement, touch ripple expo
• Social Feed Component Recipestwitter clone react native, social media feed, post card, people directory, follow button, like repost reply
• Testing React Native Appsjest, maestro, e2e testing, expo testing, accessibility testing
• WebView Rich Text Composer Recipesreact native rich text input, tentap composer, tiptap webview editor, message composer mentions, webview mention bridge, pasted image upload

Three.js guides

Scenes, materials, cameras and React Three Fiber composition.

• Blender Workflow and Bakingblender to three.js, baking lightmaps, baked texture, bake render into texture, gltf export settings, glb export blender
• Code Structuring for Bigger Three.js Projectsstructuring bigger three.js projects, three.js architecture, experience class, experience singleton, singleton pattern three.js, how do I organize three.js code
• Custom Shading and Lights in Shaderscustom shader lighting, lights in shaders, shader light model, phong shading glsl, ambient light shader, directional light shader
• Debug UI and Deploymentlil-gui, dat.GUI, debug panel, tweak panel, GUI controls, how do I add a slider to tweak a value
• Drei Catalogdrei, react-three-drei, drei helpers, r3f helpers, CameraControls, ScrollControls
• Environment Maps and Realistic Renderenvironment map, envMap, scene.environment, scene.background, cube texture, CubeTextureLoader
• Lights and Shadowslights, shadows, AmbientLight, DirectionalLight, HemisphereLight, PointLight
• Loading and HTML Integrationloading manager, LoadingManager progress, loading screen three.js, loader bar, progress bar webgl, intro fade
• MaterialsMeshBasicMaterial, MeshNormalMaterial, MeshMatcapMaterial, MeshDepthMaterial, MeshLambertMaterial, MeshPhongMaterial
• Models and 3D TextTextGeometry, 3d text, typeface font, FontLoader, convert font to typeface json, center text geometry
• Particlesparticles, Points, PointsMaterial, THREE.Points, particle system, stars
• Performanceperformance, performance tips, fps drops, my three.js scene is slow, how do I make three.js faster, stats.js fps meter
• Physicsphysics engine, cannon-es, cannon.js, rapier, ammo.js, @react-three/rapier
• Post-Processingpost processing three.js, effectcomposer, render pass, shaderpass, custom pass shader, tDiffuse uniform
• Postprocessing Library Referencepmndrs postprocessing, postprocessing npm package, react-three postprocessing api, effectpass merging, effect catalog, selective bloom
• R3F API Referencer3f api, canvas props, frameloop, frameloop demand, on demand rendering, invalidate
• R3F Interaction, Portfolio Patterns, and Gamesr3f pointer events, onClick mesh, onPointerEnter onPointerLeave, click through object, stopPropagation raycaster, cursor pointer on hover 3d
• R3F Staging, Models, and Scene Portingdrei Environment, environment map r3f, HDRI in react three fiber, Environment preset, Lightformer, Stage helper
• Rapier Physics Referencerapier api reference, react three rapier props, Physics component props, timeStep vary, paused physics, physics interpolation
• React Three Fiber Fundamentalsr3f, react three fiber, fiber, declarative three.js, jsx scene graph, Canvas component
• Scroll and Mouse Interactionscroll based animation, scroll synced camera, three.js background of html page, transparent canvas, alpha renderer, parallax effect
• Shader Effects Recipesshader effects, custom shader material, ShaderMaterial recipes, raging sea, animated water shader, ocean waves
• Shader Particles and GPGPUshader particles, custom particles ShaderMaterial, Points custom shader, gl_PointSize, size attenuation formula, gl_PointCoord
• Shaders Fundamentalsglsl basics, custom shader, ShaderMaterial, RawShaderMaterial, vertex shader, fragment shader
• Texturestexture loading, TextureLoader, LoadingManager, PBR textures, albedo map, color map
• Three.js Fundamentalswhat is webgl, why use three.js, three.js setup, scene camera renderer, first three.js scene, black screen nothing renders
• Three.js Official Manual, Distilledthree.js installation, three addons import, three/addons/, importmap three.js, OrbitControls import, GLTFLoader import
• WebGPU and TSLWebGPURenderer, webgpu renderer setup, three webgpu, TSL, three shading language, node material

SwiftUI guides

SwiftUI layout, transitions and platform conventions.

• Ripple Refraction (SwiftUI)water ripple swiftui, distortion effect, metal shader swiftui, stitchable shader, image displacement swiftui, touch ripple ios

Shopify guides

Theme sections, Liquid and storefront patterns.

• Shopify Liquid language and commerce dataliquid reference, liquid objects, liquid tags, liquid filters, shopify liquid
• Shopify localization, accessibility, and performanceshopify localization, theme translations, shopify accessibility, shopify performance, theme quality
• Shopify sections, blocks, snippets, and LiquidDocsection schema, theme blocks, liquid snippets, liquiddoc, merchant settings
• Shopify theme architecturetheme architecture, shopify directories, online store 2.0, json templates
• Shopify theme workflow and validationshopify cli, theme check, validate liquid, theme development workflow, shopify testing