メニュー
Tactical rules for making interfaces look intentional and polished. Specific, actionable fixes for the most common visual problems. Triggers on "my UI looks off", "fix the design", "visual hierarchy", "polish the UI", "refactoring ui".
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Scans a real codebase and writes coding-conventions.md from what it actually finds — variable style, SQL patterns, error handling, INSERT strategy, naming. Run once on any new project to bootstrap the convention system. Triggers on "scan conventions", "generate conventions", "bootstrap conventions", "extract conventions from code", "what are the conventions".
Security audit — checks auth, SQL injection, exposed endpoints, and sensitive data. Triggers on "security check", "is this secure", "check for vulnerabilities", "check auth", "audit security", "security audit".
Use when switching environments, updating config values, or verifying URLs/settings. Triggers on "check environment", "switch to production", "update URLs", "check config", "is this prod-ready".
Use when verifying a feature works, after making changes, or before shipping. Triggers on "verify this works", "test this", "does this work", "run the checklist", "before I ship", "check this end to end".
Use when cleaning up, simplifying, or restructuring existing code without changing behavior. Triggers on "refactor", "clean up", "simplify this", "this is getting messy", "too long", "hard to read", "extract this".
Use when the user wants to review a file for bugs, antipatterns, or quality issues. Triggers on "review", "check for issues", "look for problems", "audit", "before I ship".
| name | refactoring-ui |
| description | Tactical rules for making interfaces look intentional and polished. Specific, actionable fixes for the most common visual problems. Triggers on "my UI looks off", "fix the design", "visual hierarchy", "polish the UI", "refactoring ui". |
| allowed-tools | Read, Edit |
Tactical rules for making interfaces look intentional, professional, and polished. Specific, actionable fixes for the most common visual design problems.
Trigger: "my UI looks off" / "fix the design" / "visual hierarchy" / "polish the UI" / "refactoring ui"
Work in grayscale first. Solve layout, spacing, and hierarchy before introducing color.
Design systems beat one-off decisions. Define spacing scale, type scale, color palette — apply consistently.
Use all four sources:
De-emphasize to create contrast. Making less-important things lighter is often more effective than making important things bolder.
Labels vs. values. Labels (name, date, status) are secondary — make them smaller/lighter. Values are primary.
Start with too much, then remove. Most designs are too dense.
Dense != information-rich. Dense layouts feel cheap. Whitespace signals quality.
Space between sections > space within sections. Use 2-3x more space between unrelated sections.
Two-part shadows are more realistic:
Never use black for shadow color. Use a darkened version of the background color.
Don't apply shadows everywhere. Reserve for: floating cards, dropdowns, modals, hover states.
Use less of them. Most of the time you need better spacing or a background color change.
Four alternatives to borders:
Never use grey on a colored background. Use a lighter tint of the background color instead.
One accent color. Everything interactive uses it. Everything else does not.
Define a full 9-step scale (100-900) for each color in your palette.
Don't use more than two typefaces.
Line height scales inversely with font size. Large headings: 1.1-1.2. Body text: 1.5-1.6.
Limit your type scale. Pick 6-8 sizes: 12, 14, 16, 18, 24, 30, 36, 48.
Letter spacing for all-caps. Always add letter-spacing: 0.05-0.1em to all-caps text.
When something looks wrong, work through this order:
Fix in this order. Hierarchy first — it usually solves the other problems.
| Problem | Fix |
|---|---|
| Everything same visual weight | Pick one primary element per section, de-emphasize rest |
| Looks like a form, not a product | Add generous padding, remove borders, increase section spacing |
| Colors feel muddy | Saturate more aggressively; add colorized greys |
| Shadows look fake | Use two-part shadows; never pure black |
| Typography unfinished | Tighten heading line height; add letter-spacing to all-caps |
| Terrible on mobile | Check at 375px; ensure touch targets >= 44pt |
