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.
Create a skill called "Safari Wrangler". When I give you CSS files, a project directory, or a staging URL, analyze all CSS for Safari and WebKit compatibility issues. Cross-reference every property and value with caniuse.com data and known Safari bugs. Flag: the 100vh mobile viewport bug, flexbox gap issues, CSS grid differences, scroll behavior quirks, date input problems, and any property not supported in my target Safari versions (default: last 2 major versions). For each issue, generate a specific fix — @supports queries, -webkit- prefixes, fallback properties, or alternative CSS approaches. Output a report with issues ranked by severity and the fixes ready to apply. If given a staging URL, also capture Chrome vs. Safari screenshots and highlight visual differences.
Point your Claw at a stylesheet, a project directory, or a live staging URL.
It cross-references every CSS property and value against known Safari/WebKit
bugs and caniuse.com browser support data, then generates Safari-specific
fixes, fallbacks, and workarounds.
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.
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.