good-css: CSS check for a vibe-coded site
Hover stuck on phones, forms red before anyone types: 47 modern CSS techniques and a list of what your styles get wrong.
1.6K saves on X, as of Posted
Prompt
Install good-css following the README at https://github.com/vojtaholik/good-css, then read its SKILL.md and the reference files you need.
Then use it to check this project's existing styles (CSS files and Tailwind classes in components both count) for three kinds of problems:
1. Things that break on phones: hover states that stick after a tap, and tap areas smaller than 44px.
2. Things CSS can do that were built with scripts or a pile of breakpoints: dropdown menus, popovers, accordions, and layouts stitched together from several breakpoints.
3. Details: in-page links that land under the sticky nav, forms that open already full of red borders, ticking numbers that shift the text next to them, and focus rings that were removed.
Report only these three kinds and skip any the project doesn't have. Components that come from a component library don't count. For each issue, quote the original code, explain what goes wrong on which device, and suggest the smallest change, ranked by impact. Also note which browsers don't support a technique you use yet.
Show me the list of issues first. Don't change any code.Next Send it to Opus 5.5 in Claude Code or Codex, in your site’s project.
Highly recommend installing good-css in Claude Code or Codex, then having Opus 5.5 use it to check the site you vibe-coded. It holds 47 modern CSS techniques, and with it installed, your agent tries them first whenever it writes styles.
A few on the list you can check right away:
- Tap a button on your phone and the hover effect gets stuck. Put hover styles inside
(hover: hover) and (pointer: fine)so only devices with a mouse get them. - Open a form and every required field is already red. Switch to
:user-invalidso a field turns red only after someone edits it or hits submit. - Click an in-page link and the heading lands under your sticky nav. Give
htmlascroll-paddingas tall as the nav, and the jump lands just below it. - A price or timer ticks and the text next to it shifts. Add
tabular-numsso every digit is the same width. - An icon button is too small to tap. Use a pseudo-element to grow the tap area to 44px without changing how it looks.
Send this prompt to Opus 5.5.
Part of a playbook
Design taste for Opus 5.5Pages look AI-made: a DESIGN.md from sites you like, components restyled, CSS checked.OpenShare this tip
