Guides
Short, practical guides on React, Tailwind, animation and design tokens.
Build hero sections with React and Tailwind
How to build convincing hero areas with React and Tailwind CSS: structure, typography, image use and subtle animation with framer-motion.
Understand easing curves and use them well
What easing curves are, when to use In, Out or InOut and how to apply cubic-bezier values in framer-motion and CSS.
Extract design tokens from any website
How to capture a website's colors, typography and spacing as design tokens and bring them into your project as DESIGN.md or tokens.json.
Use components directly in the editor via MCP
How the Model Context Protocol connects your AI editor to a component library and inserts building blocks without copy and paste.
framer-motion animations for beginners
A practical start with framer-motion: understand animate, transition and variants, stagger lists and make motion accessible.
Accessible components with React and Tailwind
Build accessible components: semantic HTML, focus states, targeted ARIA, contrast and keyboard operation with React and Tailwind CSS.
Set up design tokens in Tailwind CSS
How to anchor design tokens in Tailwind CSS: colors, spacing and radii as CSS variables, made usable through the theme block, plus theme switching.