Desktop layout in, responsive CSS for every screen size out
Designers spend 25-40% of design time creating responsive variants. This recipe takes a desktop layout and generates mobile and tablet CSS — intelligent stacking, readable type sizes, touch-friendly targets — not just a squished version of the desktop.
Create a skill called "Breakpoint Buddy". When I give you a desktop HTML/CSS layout (or a design screenshot with the code), generate responsive CSS variants for tablet and mobile breakpoints. Don't just shrink — intelligently restructure: stack multi-column grids, collapse sidebars, convert desktop navigation to a mobile pattern (hamburger, bottom nav, or collapsible — recommend the best fit), ensure all interactive elements are at least 44px touch targets, scale typography for readability, and handle image scaling. Use mobile-first media queries with min-width breakpoints (configurable, default: 375, 768, 1024, 1440). Suggest container queries where appropriate. Output the complete responsive CSS and note any layout decisions that need human review.
Give your Claw a desktop HTML/CSS layout (or a design file), and it
generates responsive variants for tablet and mobile breakpoints. Not
a naive "shrink everything" approach — it intelligently restructures
layouts: multi-column grids stack to single column, navigation collapses
to hamburger, touch targets grow to 44px minimum, and typography scales
to stay readable.
Brand colors and a font in, full design system tokens out
Every project starts with the same grind — building color scales, type scales, spacing systems, and shadow tokens from scratch. Hand your Claw the brand colors and a font choice, and get a complete token set in CSS custom properties, Tailwind config, or SCSS variables.
Check if that shiny new CSS feature is safe for your project's browsers
Container queries, :has(), nesting, subgrid — you want to use them but is it safe yet? This recipe checks your project's browser support targets and tells you exactly which modern CSS features you can use, which need fallbacks, and which to avoid.
Generate button labels, error messages, tooltips, and empty states
Nobody budgets for UX writing but it makes or breaks usability. This recipe generates complete microcopy sets for your UI components — error messages that actually help, empty states that guide action, button labels that are clear, and tooltips that explain without patronizing.
Turn finished projects into polished portfolio pieces without the 10-hour writing slog
Your portfolio is 3 years outdated because writing case studies takes longer than the projects themselves. This recipe takes your project files, Figma history, and a few bullet points from you, and drafts a complete case study — challenge, process, solution, results.