关于这个 Skill
通过一个入口和排版、表面、动画、图标、性能五份配套指南,审查或实现界面细节。流程先识别现有样式体系,再落实具体修正,并说明实际检查过的范围。
为什么推荐
面向现有组件的设计工程 Skill,沿用项目当前样式系统。审查结果包含位置、修改建议、原因与实际验证范围。
适合用来做什么
- 打磨存在细微对齐与一致性问题的组件。
- 审查悬停、焦点、按下、加载与空状态。
- 获得按优先级排列、可直接实施的修改建议。
沿用现有样式体系改进细节
指南覆盖同心圆角、视觉对齐、结构边框、分层阴影、文本换行、等宽数字与一致的图标状态,修改应符合组件及其周围设计体系。
交互部分强调可中断过渡、克制的按压反馈、有目的的入场顺序与明确的过渡属性,并区分有用动效和重复干扰。
选择快速或完整审查
报告说明范围与覆盖情况,按原则归类问题,指出源码位置,并记录验证结果与结论;未检查状态会明确标注。
快速
检查主要路径,仅报告高、中严重程度问题,最多五项。
完整
覆盖请求范围中的五类细节,最多十五项;这是上游默认模式。
安装并提出具体审查任务
示例请求:以 quick 模式审查结账按钮和摘要卡片,保留当前 CSS 体系,并给出受影响的文件位置。
| 命令 | 用途与使用时机 |
|---|---|
npx skills add jakubkrehel/make-interfaces-feel-better | 安装 Skill 与五份配套指南。 |
使用前需要了解
- 能读取 Markdown Skills 与相关前端文件的编程助手。
- 保留 SKILL.md 引用的 Markdown 指南,安装完整上游 Skill 目录。
- 沿用现有 CSS、Tailwind 或 CSS-in-JS;检查真实状态和动效需要浏览器。
支持的 Agent
Claude CodeCodex CLICursorGitHub CopilotDeepSeek HarnessGemini CLIGrok BuildHermes AgentOpenCodePiKiroRovo DevQoderMistral VibeGoogle Antigravity
资料与来源
原始资料见下方链接;文中的上手建议由 SkillHey 编辑整理。

