このスキルについて
Review or implement interface details using an entrypoint and five linked guides: typography, surfaces, animations, icons and performance. The workflow first identifies the existing styling system, then applies specific fixes and reports what was actually checked.
おすすめする理由
A focused design-engineering Skill for improving existing components in their current styling system. Review findings include locations, proposed changes, reasons and explicit verification boundaries.
役立つこと
- Polish a component that looks subtly misaligned or inconsistent.
- Review hover, focus, active, loading and empty states.
- Get prioritized findings with actionable before-and-after changes.
Improve details without changing the styling stack
The guidance covers concentric radii, optical alignment, structural borders, layered shadows, balanced text, tabular numbers and consistent icon states. Changes should fit the component and its surrounding design system.
For interactions, it favors interruptible transitions, restrained press feedback, deliberate entrance sequences and explicit transition properties. It also separates useful motion from repetitive distraction.
Reviewed Skill and supporting guidesAuthor article: interface details
Choose quick or full review
The report states scope and coverage, groups findings by principle, identifies source locations and records verification and a verdict. Uninspected states stay explicitly unverified.
Quick
Inspect the primary path, report only high and medium issues, with a cap of five findings.
Full
Cover the requested scope across all five categories, with up to fifteen findings. This is the upstream default.
Install and request a focused review
Example request: review the checkout button and summary card in quick mode; preserve the current CSS system and show the affected file locations.
| コマンド | 用途と使いどころ |
|---|---|
npx skills add jakubkrehel/make-interfaces-feel-better | Install the Skill and its five supporting guides. |
Official repository and installationReviewed Skill and supporting guides
使う前に
- A coding assistant that can read Markdown Skills and the relevant frontend files.
- Keep the linked Markdown guides with SKILL.md; install the complete upstream Skill directory.
- Use the existing CSS, Tailwind or CSS-in-JS approach. Browser access is needed to check real states and motion.
対応エージェント
資料・参照元
元の資料は以下のリンクから確認できます。実践のヒントは SkillHey による編集上の提案です。
