技能包Skill
good-css：vibe coding 网站的 CSS 检查
手机上 hover 卡住、表单一打开全红框：47 条现代 CSS 写法，先列出网站样式的毛病，不改代码。
1,557 X 收藏，截至 发帖日期
提示词
先照 https://github.com/vojtaholik/good-css 的 README 装好 good-css，装好后直接读它的 SKILL.md 和用得上的 references 文件。
然后用它查一遍这个项目现有的样式（CSS 文件和组件里的 Tailwind class 都算），找三类问题：
1. 手机上会出的毛病：点完 hover 卡住，点击区域小于 44px。
2. CSS 能做却写了脚本或一堆断点的：下拉菜单、弹出层、手风琴，靠好几个断点拼出来的布局。
3. 细节：页内链接被固定导航栏盖住，表单一打开就满是红框，跳动的数字带着旁边的字晃，焦点框被去掉。
只报这三类，项目里没有的就跳过，组件库自带的组件不算。每个问题都引用原来的代码，说明在什么设备上会出什么事，给出最小的改法，按影响大小排序。用到的写法哪些浏览器还不支持，也写上。
先给我看问题清单，别改代码。下一步 在网站项目里把它发给 Claude Code 或 Codex 里的 Opus 5.5。
强烈推荐给 Claude Code 或 Codex 装上 good-css，然后让 Opus 5.5 拿它查一遍你 vibe coding 出来的网站。里面是 47 条现代 CSS 写法，agent 写样式时会优先用。
清单里这几条能直接拿来查：
- 手机上点一下按钮，hover 效果就卡住不走。把 hover 写进
(hover: hover) and (pointer: fine)，只给有鼠标的设备 - 表单一打开，必填项全是红框。换成
:user-invalid，用户改过或点了提交才变红 - 点页内链接，标题被固定导航栏盖住。给
html加一条和导航栏一样高的scroll-padding，跳转就落在导航栏下面 - 价格、计时器一跳，旁边的字跟着晃。数字加
tabular-nums，每一位一样宽 - 图标按钮太小点不中。用伪元素把点击区域撑到 44px，样子不变
把这段 prompt 发给 Opus 5.5。
收在合集里
Opus 5.5 设计品味页面一看就是 AI 做的：喜欢的网站写成 DESIGN.md，再改组件、查 CSS。打开分享这条技巧
