Toolkit
Show
Every tool, as a list
Building
Tool
Claude Code
Claude in my terminal. It writes and changes the code with me.
Framework
Next.js
The base my sites are built on.
Tool
Vercel
Puts my sites on the internet.
Tool
Supabase
The database behind the Advance Care Directive app.
Library
Tailwind CSS
Styles pages with short class names.
Tool
Storybook
A workshop for building and checking components one at a time.
Design tools
Tool
Figma
Where I design. Connected to Claude, so Claude can read my designs.
Tool
Mobbin
Screenshots of real apps, for inspiration. Connected to Claude.
Website
Collect UI
Daily interface inspiration, sorted by type.
Tool
Rive
Interactive animations. Connected to Claude.
Components
Library
shadcn/ui
Ready-made components I copy into my code and change.
Library
Base UI
Unstyled building blocks for accessible components.
Library
Radix
Unstyled building blocks for accessible components.
Website
21st.dev
A library of React components made by the community.
Collection
21st.dev ASCII
21st.dev components that draw with text characters.
Library
Sonner
Small pop-up messages, called toasts.
Library
Vaul
Drawers that slide up from the bottom of the screen.
Library
Lucide
A big set of simple icons.
Motion & media
Library
Motion
Animation for React.
Library
Paper Shaders
Ready-made shader effects, like moving gradients and grain.
Tool
Unicorn Studio
Makes WebGL effects and motion for websites without code.
Library
Remotion
Makes videos with code.
Library
Lottie
Plays animations made in After Effects.
Tool
ElevenLabs
AI voices and sound. Connected to Claude.
Frontend taste
Website
impeccable.style
A frontend design reference I use for interface quality.
Website
tasteskill.dev
Home of the taste skills. Three of them are installed here.
Images & assets
Tool
Higgsfield MCP
Connects Higgsfield to Claude, so Claude can make hero images and custom assets.
Claude skills
Whole set
Motion craft skills
Emil Kowalski's skills for animation and interface polish.
npx skills add emilkowalski/skillsWhole set
Taste skills
Skills that push Claude away from template-looking design.
npx skills add Leonxlnx/taste-skillWhole set
Higgsfield skills
Skills that run Higgsfield tools to make images, video and sites.
npx skills add higgsfield-ai/skills
Skill
animate
Builds an animation step by step, starting with whether it should move at all.
npx skills add emilkowalski/skills -s animateSkill
animation-vocabulary
Turns a vague description of motion into its exact name.
npx skills add emilkowalski/skills -s animation-vocabularySkill
apple-design
Apple's approach to fluid, physical motion, for the web.
npx skills add emilkowalski/skills -s apple-designSkill
ask-sonner
A guide to Sonner, a React library for toast messages.
npx skills add emilkowalski/skills -s ask-sonnerSkill
emil-design-eng
Emil Kowalski's approach to interface polish and the small details.
npx skills add emilkowalski/skills -s emil-design-engSkill
find-animation-opportunities
Finds places that should animate, and rejects the rest.
npx skills add emilkowalski/skills -s find-animation-opportunitiesSkill
improve-animations
Audits all the motion in a codebase and plans fixes.
npx skills add emilkowalski/skills -s improve-animationsSkill
pick-ui-library
Picks the right library for a frontend task from a curated list.
npx skills add emilkowalski/skills -s pick-ui-librarySkill
prototype
Builds several different versions of a piece of interface to flip between.
npx skills add emilkowalski/skills -s prototypeSkill
review-animations
Reviews motion code against a high craft bar.
npx skills add emilkowalski/skills -s review-animationsSkill
design-taste-frontend
Makes landing pages and portfolios that do not look like templates.
npx skills add Leonxlnx/taste-skill -s design-taste-frontendSkill
minimalist-ui
Clean editorial interfaces: warm monochrome, strong type contrast, flat grids.
npx skills add Leonxlnx/taste-skill -s minimalist-uiSkill
redesign-existing-projects
Audits an existing site and lifts it to a premium standard.
npx skills add Leonxlnx/taste-skill -s redesign-existing-projectsSkill
generate
Makes images, video, 3D assets and audio.
npx skills add higgsfield-ai/skills -s higgsfield-generateSkill
brandkit
Makes brand systems: palettes, logo marks, type and mockups.
npx skills add higgsfield-ai/skills -s higgsfield-brandkitSkill
product-photoshoot
Makes brand-quality product photos.
npx skills add higgsfield-ai/skills -s higgsfield-product-photoshootSkill
marketplace-cards
Makes product image cards for online stores.
npx skills add higgsfield-ai/skills -s higgsfield-marketplace-cardsSkill
soul-id
Trains a model on a face for consistent images of one person.
npx skills add higgsfield-ai/skills -s higgsfield-soul-idSkill
video-explainer
Builds a narrated explainer video from short blocks.
npx skills add higgsfield-ai/skills -s higgsfield-video-explainerSkill
websites
Builds and deploys websites, apps and games.
npx skills add higgsfield-ai/skills -s higgsfield-websitesSkill
youtube-thumbnail
Makes YouTube thumbnails and video covers.
npx skills add higgsfield-ai/skills -s higgsfield-youtube-thumbnailSkill
Scroll World
The original skill for a world you fly through as you scroll. My home page walk started here.
Skill
Scroll World, Chase AI version
Chase AI's version of the skill, from the podcast episode where I found it.
Explorations
Exploration · Killed
Project marks
Can a project mark be made from a rule instead of drawn? It worked, but every project's mark looked the same, so I threw it out.
Exploration · Superseded
Keyword hero
My first home page. Hover a word in the intro and a clip I made in Figma Weave plays beside it.
Exploration
Graphical icons
Three ways to construct the project mark.
Exploration · Shipped
Iso icons
Isometric icons. These are the marks on the live site now.
Exploration
Iso line cards
The work list drawn as technical isometric line drawings.
Exploration
Desk icons
A case study shown as a cover card, a folder or a document.
Exploration
Folder cards
A work entry as a die-cut folder card.
Exploration
Develop plate
Three custom article scenes, side by side.
Exploration · Killed
Pastel cards
My first home grid card. Each project glowed in its own pastels, and the colour broke into dots when you pointed at it.
Exploration
Soft desk cards
Each project as a window on ruled paper, drawn in thin ochre lines.
Exploration
Writing cards
My articles as cover cards, each with a sheet of paper and the date.
Exploration · Superseded
Annotated frame
A walkthrough that shows one screen and one design decision at a time.
Exploration · Superseded
Explorations shelf
A shelf of exploration cards on the home page. This toolkit page replaced it.
Exploration · Superseded
Animated title
A headline where the words arrive one by one.
Exploration
Section scroll
Ways to move between page sections as you scroll.
Exploration
Dither tool
A tuner for dither and shader effects over video covers. It writes out the settings to paste into the site.
Testing
Tool
Playwright
Opens my pages in a real browser to test them.
Tool
Vitest
Runs quick tests on my code.