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.
Create a skill called "Can I Use This?". When I provide my browser support targets (as a browserslist string like "> 0.5%, last 2 versions, not dead", or as Google Analytics browser data, or just a description like "modern browsers, must support Safari 16+"), generate a compatibility report for modern CSS features. Check: container queries, :has(), CSS nesting, subgrid, view transitions, scroll-driven animations, anchor positioning, CSS layers (@layer), color-mix(), relative color syntax, light-dark(), and any other CSS features from the last 2 years. For each feature, report: safe (all target browsers support it), needs fallback (partial support), or avoid (insufficient support). For "needs fallback" features, generate a @supports query with fallback code. Show support percentage based on my targets. Alert me when a feature I'm watching crosses from "needs fallback" to "safe" due to new browser releases.
Give your Claw your browser support targets (or a browserslist config, or
your site's Google Analytics data), and it generates a personalized
compatibility report for modern CSS features. Know exactly what you can
ship without worry, what needs a fallback, and what's still too risky.
Find and fix the CSS that Safari is going to break
Safari and WebKit still expose edge cases that can slip through a normal workflow. This recipe scans your CSS for patterns likely to break in Safari, cross-references support data, and generates targeted fixes and fallbacks before the bug report comes in from an iPhone.
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.
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.
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.