Safari Wrangler
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.
INGREDIENTS
PROMPT
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.
How It Works
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.
What You Get
- A list of CSS properties and patterns that are likely to break or render differently in Safari
- Specific Safari version and iOS version affected
- Auto-generated fixes: @supports fallbacks, -webkit- prefixes, alternative approaches
- The 100vh mobile Safari viewport fix (using dvh or JavaScript fallback)
- Flexbox gap polyfill detection
- Date/time input fallback suggestions
- A "Safari compatibility score" for the overall project
- Optional: Chrome vs. Safari screenshot comparison for a staging URL
Setup Steps
- Point your Claw at a CSS file, project directory, or staging URL
- Optionally specify your minimum Safari version target (default: last 2 versions)
- Your Claw scans, flags issues, and generates fixes
- Review and apply the fixes, or let your Claw apply them directly
Tips
- Run this before every launch — Safari bugs are the #1 post-launch emergency
- The 100vh fix alone will save you from the most common client bug report on iOS
- Works on Tailwind, vanilla CSS, SCSS, and CSS-in-JS output
- The visual comparison mode is most useful for catching layout rendering differences