polish
starsforks
How to install polish?
heyhank-app/heyhank/polish
$npx -y skills add heyhank-app/heyhank --skill polishFinal quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
SKILL.md
| 1 | **First**: Use the frontend-design skill for design principles and anti-patterns. |
| 2 | |
| 3 | Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. |
| 4 | |
| 5 | ## Pre-Polish Assessment |
| 6 | |
| 7 | Understand the current state and goals: |
| 8 | |
| 9 | 1. **Review completeness**: |
| 10 | - Is it functionally complete? |
| 11 | - Are there known issues to preserve (mark with TODOs)? |
| 12 | - What's the quality bar? (MVP vs flagship feature?) |
| 13 | - When does it ship? (How much time for polish?) |
| 14 | |
| 15 | 2. **Identify polish areas**: |
| 16 | - Visual inconsistencies |
| 17 | - Spacing and alignment issues |
| 18 | - Interaction state gaps |
| 19 | - Copy inconsistencies |
| 20 | - Edge cases and error states |
| 21 | - Loading and transition smoothness |
| 22 | |
| 23 | **CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. |
| 24 | |
| 25 | ## Polish Systematically |
| 26 | |
| 27 | Work through these dimensions methodically: |
| 28 | |
| 29 | ### Visual Alignment & Spacing |
| 30 | |
| 31 | - **Pixel-perfect alignment**: Everything lines up to grid |
| 32 | - **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) |
| 33 | - **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) |
| 34 | - **Responsive consistency**: Spacing and alignment work at all breakpoints |
| 35 | - **Grid adherence**: Elements snap to baseline grid |
| 36 | |
| 37 | **Check**: |
| 38 | - Enable grid overlay and verify alignment |
| 39 | - Check spacing with browser inspector |
| 40 | - Test at multiple viewport sizes |
| 41 | - Look for elements that "feel" off |
| 42 | |
| 43 | ### Typography Refinement |
| 44 | |
| 45 | - **Hierarchy consistency**: Same elements use same sizes/weights throughout |
| 46 | - **Line length**: 45-75 characters for body text |
| 47 | - **Line height**: Appropriate for font size and context |
| 48 | - **Widows & orphans**: No single words on last line |
| 49 | - **Hyphenation**: Appropriate for language and column width |
| 50 | - **Kerning**: Adjust letter spacing where needed (especially headlines) |
| 51 | - **Font loading**: No FOUT/FOIT flashes |
| 52 | |
| 53 | ### Color & Contrast |
| 54 | |
| 55 | - **Contrast ratios**: All text meets WCAG standards |
| 56 | - **Consistent token usage**: No hard-coded colors, all use design tokens |
| 57 | - **Theme consistency**: Works in all theme variants |
| 58 | - **Color meaning**: Same colors mean same things throughout |
| 59 | - **Accessible focus**: Focus indicators visible with sufficient contrast |
| 60 | - **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) |
| 61 | - **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency |
| 62 | |
| 63 | ### Interaction States |
| 64 | |
| 65 | Every interactive element needs all states: |
| 66 | |
| 67 | - **Default**: Resting state |
| 68 | - **Hover**: Subtle feedback (color, scale, shadow) |
| 69 | - **Focus**: Keyboard focus indicator (never remove without replacement) |
| 70 | - **Active**: Click/tap feedback |
| 71 | - **Disabled**: Clearly non-interactive |
| 72 | - **Loading**: Async action feedback |
| 73 | - **Error**: Validation or error state |
| 74 | - **Success**: Successful completion |
| 75 | |
| 76 | **Missing states create confusion and broken experiences**. |
| 77 | |
| 78 | ### Micro-interactions & Transitions |
| 79 | |
| 80 | - **Smooth transitions**: All state changes animated appropriately (150-300ms) |
| 81 | - **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. |
| 82 | - **No jank**: 60fps animations, only animate transform and opacity |
| 83 | - **Appropriate motion**: Motion serves purpose, not decoration |
| 84 | - **Reduced motion**: Respects `prefers-reduced-motion` |
| 85 | |
| 86 | ### Content & Copy |
| 87 | |
| 88 | - **Consistent terminology**: Same things called same names throughout |
| 89 | - **Consistent capitalization**: Title Case vs Sentence case applied consistently |
| 90 | - **Grammar & spelling**: No typos |
| 91 | - **Appropriate length**: Not too wordy, not too terse |
| 92 | - **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) |
| 93 | |
| 94 | ### Icons & Images |
| 95 | |
| 96 | - **Consistent style**: All icons from same family or matching style |
| 97 | - **Appropriate sizing**: Icons sized consistently for context |
| 98 | - **Proper alignment**: Icons align with adjacent text optically |
| 99 | - **Alt text**: All images have descriptive alt text |
| 100 | - **Loading states**: Images don't cause layout shift, proper aspect ratios |
| 101 | - **Retina support**: 2x assets for high-DPI screens |
| 102 | |
| 103 | ### Forms & Inputs |
| 104 | |
| 105 | - **Label consistency**: All inputs properly labeled |
| 106 | - **Required indicators**: Clear and consistent |
| 107 | - **Error messages**: Helpful and consistent |
| 108 | - **Tab order**: Logical keyboard navigation |
| 109 | - **Auto-focus**: Appropriate (don't overuse) |
| 110 | - **Validation timing**: Consistent (on blur vs on submit) |
| 111 | |
| 112 | ### Edge Cases & Error States |
| 113 | |
| 114 | - **Loading states**: All async actions have loading feedback |
| 115 | - **Empty states**: Helpful empty states, not just blank space |
| 116 | - **Error states**: Clear error messages with recovery paths |
| 117 | - **Success states**: Confirmation of successful actions |
| 118 | - **Long conten |
People who liked this also viewed
6 picksType
- lark-openapi-explorer飞书/Lark 原生 OpenAPI 探索：从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足，需要查找并调用原生飞书 OpenAPI 时使用。SkillsJul 2026
- lark-skill-maker创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill（包装原子 API 或编排多步流程）时使用。SkillsJul 2026
- azure-cost-optimizationOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026
- vercel-react-native-skillsVercel's official collection of agent skillsSkillsJul 2026
- mcp-builderGuide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate externaSkillsJul 2026
- gws-sharedgws CLI: Shared patterns for authentication, global flags, and output formatting.SkillsJul 2026
