Artifacts Builder

Modern web design trends, principles, and implementation patterns for 2024-2025. Use this skill when designing websites, creating interactive experiences, implementing design systems, ensuring accessibility, or building performance-first interfaces. Triggers on tasks involving modern design trends, micro-interactions, scrollytelling, bold minimalism, cursor UX, glassmorphism, accessibility compliance, performance optimization, or design system architecture. References animation skills (GSAP, Framer Motion, React Spring), 3D skills (Three.js, R3F, Babylon.js), and component libraries for implementation guidance.

Create data-driven presentation slides using React, Vite, and Recharts with Sentry branding. Use when asked to "create a presentation", "build slides", "make a deck", "create a data presentation", "build a Sentry presentation". Scaffolds a complete slide-based app with charts, animations, and single-file HTML output.

Guide for feature flags and A/B tests with the Flags SDK (`flags` npm package) and Vercel Flags. Use when: declaring flags with `flag()`, using `vercelAdapter` or `vercel flags` CLI (add, list, enable, disable, inspect, archive, rm, sdk-keys), setting up providers/adapters (Vercel, Statsig, LaunchDarkly, PostHog, GrowthBook, Hypertune, Global Config, OpenFeature, Split, Flagsmith, Reflag, Optimizely, or custom adapters), implementing precompute patterns for static pages, setting up `identify`/`dedupe`, integrating Flags Explorer/Toolbar, working with flags in Next.js (App Router, Pages Router, Middleware) or SvelteKit, writing custom adapters, or encrypting/decrypting flag values. Triggers: feature flags, A/B testing, experimentation, flags SDK, flag adapters, precompute, Flags Explorer, feature gates, flag overrides, Vercel Flags, vercel flags CLI, vercel flags add, vercel flags list, vercel flags enable, vercel flags disable, `flags/next`, `flags/sveltekit`, `flags/react`, `@flags-sd

Swiss-style user-research narrative template in warm-paper editorial aesthetics. Use when users ask for a premium research deck or story-first live artifact with minimalist typography, high-clarity layout, subtle motion, donut breakdowns, and keyboard/click navigation across slides in a single HTML file.

Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.