Websites with craftWebsites with craft

Reads a component or page and lists WCAG 2.1 accessibility issues, each with severity, the criterion it breaks, its code location and a code fix.

Fixes accessibility problems in a component or page: semantic HTML, keyboard support, ARIA attributes and form labels, keeping the visual design.

Decides whether something should animate at all and, if so, writes the animation with the right curve, duration and properties, reduced-motion support included.

Writes animations for Expo and React Native apps with Reanimated and Gesture Handler: gestures, sheets, screen transitions, press feedback and haptics.

Turns a vague description of a web animation effect into its exact term, so you know what to ask an AI or a designer for.

Applies Apple's interface design principles to the web: gestures, spring animations, interruptible transitions, translucent materials and typography.

Helps you set up, style and troubleshoot Sonner, the React toast library: the Toaster, promise toasts, theming, positioning and common bugs.

Design direction for industrial brutalist websites: rigid grids, extreme type contrast and analog effects, for data-heavy dashboards or portfolios.

A guide to building accessible, composable UI components: APIs, state, design tokens, styling, publishing to npm or a registry, and documentation.

Covers brand identity, design tokens, logos, slide decks, banners, icons and social media images, routing each task to bundled sub-skills and references.

Builds components with purposeful motion, or audits existing animations, using the approaches of Emil Kowalski, Jakub Krehel and Jhey Tompkins.

Defines three-layer design tokens (primitive, semantic, component), CSS variables, spacing and type scales, and component specs; also generates slides.

Applies Emil Kowalski's philosophy on UI polish, animation decisions and invisible details, and reviews UI code in Before/After tables.

Scans a codebase or UI, proposes at most 5-7 places where motion helps with exact values, and rejects the rest. Read-only: it changes no code.

Design rules for pages with AIDA structure, wide editorial typography, bento grids and scroll-driven GSAP animations.

A guide to the core GSAP API: to, from, fromTo, easing, duration, stagger and matchMedia for responsive and reduced-motion animation.

Explains how to use GSAP in Vue, Nuxt, Svelte and SvelteKit: lifecycle hooks, scoped selectors and cleanup when components unmount.

A guide to keeping GSAP animations smooth: prefer transforms, avoid layout thrashing, use will-change and batch updates.

A guide to GSAP plugins: registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, SplitText, SVG plugins, CustomEase and GSDevTools.

Explains how to use GSAP in React and Next.js with the useGSAP hook, refs, gsap.context() and cleanup when components unmount.

A guide to GSAP ScrollTrigger: scroll-linked animations, pinned sections, scrub, parallax and triggers.

A guide to GSAP timelines: gsap.timeline(), the position parameter, nesting and playback control for sequencing animations.

A guide to the gsap.utils helpers: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap and pipe.

Builds, edits and deploys websites, apps and games through the Higgsfield CLI, as a React and TanStack Start app on a Cloudflare Worker.

For visually important sites, first generates section-by-section design images, analyzes them, then codes the website to match them closely.

Generates images only of iOS or Android app screens and flows inside phone mockups, with clear hierarchy and consistency. It writes no code.

Generates one horizontal image per website section with a consistent palette and varied layouts, as a design reference for building the page.

Designs, redesigns, critiques or polishes website and app interfaces: visual hierarchy, typography, color, motion, accessibility and UX copy.

Surveys a project's motion code and delivers a prioritized audit with self-contained plans for other agents to run. It plans only, never edits source.

Design direction for clean, document-style interfaces: warm monochrome palette, typographic contrast, flat bento grids and muted pastels.

Makes Claude deliver whole files and answers with no "rest stays the same" or TODO stubs, and pause cleanly when the output will not fit.

Recommends one frontend library for your task (toasts, charts, drag and drop, OTP inputs and more) from a curated list by Emil Kowalski.

Builds several genuinely different versions of a UI piece you describe and shows them behind a visual picker, so you can flip through and promote a winner.

Audits an existing website or app, flags generic AI-looking patterns and applies premium design upgrades without breaking functionality or starting over.

Reviews animation and motion code against a high craft bar based on Emil Kowalski's philosophy. It flags by default and only approves work that earns it.

Builds a landing page where scrolling drives a camera that flies from scene to scene without cuts, using Higgsfield clips and a portable scroll engine.

Has Claude design websites that feel expensive: it sets fonts, spacing, shadows, card structures and motion, and blocks defaults that look cheap.

Generates a DESIGN.md file of typography, color, layout and motion rules so Google Stitch produces premium, non-generic screens.

Reads your brief, infers a design direction and builds landing pages, portfolios or redesigns that do not look templated, auditing first on redesigns.

Helps build accessible interfaces with shadcn/ui components, Tailwind CSS styling and canvas visual designs: layouts, themes, dark mode and forms.

Searches a local library of styles, palettes, font pairings, UX guidelines and icons to design, review or fix web, mobile and desktop interfaces.

Deploys your app or website to Vercel as a preview and returns the link; it only deploys to production when you explicitly ask.

Applies 62 Vercel Engineering performance rules when writing, reviewing or refactoring React and Next.js: data waterfalls, bundle size and re-renders.

Integrates ready-made animated React components into your project: Magic UI (150+ on shadcn and Tailwind) and React Bits (90+ effects).

Builds the web animation you ask for, such as 3D models, horizontal scroll, WebGL, particles or shaders, with a focus on GPU performance and accessibility.

Picks the right tool (GSAP, Motion, Anime.js or Lenis) and builds smooth, accessible React animations: scroll effects, magnetic hovers and reveals.

Audits a landing page or web app and proposes specific changes to copy, layout, UX and trust so more visitors sign up, buy or get in touch.

Applies Emil Kowalski's design engineering philosophy to polish interfaces: animation decisions, invisible details and Before, After, Why review tables.

Creates an opinionated design system with tokens, typography, color and components, starting from your product type, personality and brand colors.

Turns a brief into self-contained HTML, CSS and SVG designs: mockups, social graphics, brand kits, pitch decks and infographics, with three variations.

Builds interactive image galleries with GSAP: FLIP filter transitions, infinite scroll, animated masonry layouts and lightbox effects.

Builds a website hero section with GSAP: layered reveals, 3D parallax, animated typography and video backgrounds, with a reduced-motion fallback.

Implements micro-interactions in React with GSAP: custom cursors, magnetic buttons, tilt cards, spotlight effects and scroll indicators.

Builds page transitions for React and Next.js with GSAP: overlay wipes, shared-element transitions and coordinated route animations.

Builds animated loading screens with GSAP: progress bars, percentage counters, animated logos, skeleton screens and cinematic intro sequences.

Builds scroll-driven experiences with GSAP ScrollTrigger: parallax layers, pinned sections, horizontal scroll and timelines scrubbed by scroll position.

Animates SVG shapes with GSAP: path drawing, shape morphing, animated icons, blob shapes, wave dividers and motion along a path.

Builds kinetic typography with GSAP in React: split text by character or word, scramble, glitch, 3D rotation, gradient sweep and text on a curved path.

Generates a unique, conversion-focused landing page, writing the copy first and delivering a full Next.js project; it bans the usual AI-page patterns.

Scaffolds a production-grade single-page app: it picks the stack from your requirements and adds code splitting, error states and accessibility.

Builds typed UI components with animation, loading, error and empty states, theming and built-in accessibility for your project.

Checks your UI code against the Web Interface Guidelines, fetched fresh each run, and reports each finding by file and line.