ui-polish
Build and polish website UI so it looks professionally designed, not template-generic — layout, typography, spacing, color, responsive behavior, states, and micro-interactions — in React/Next.js, Vue, Tailwind, or plain HTML/CSS. Use whenever the user builds or tweaks a page, section, landing page, component, navbar, hero, form, or says "bikin tampilan", "rapikan UI", "kurang bagus", "buat responsive", "make it look better", even if they don't mention design.
Target: React / Next.js. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- UI Polish
- 1. Read the room first
- 2. Pick a direction, not defaults
- 3. Fundamentals checklist
- 4. Responsive — mobile first
- 5. Every interactive element has all its states
- 6. Motion (subtle)
- 7. Verify visually
Detect the stack: Tailwind (tailwind.config. / @import "tailwindcss"), CSS Modules, styled-components, shadcn/ui (components/ui/), plain CSS. Reuse existing design tokens: colors, fonts, spacing, radius, existing components. Never invent a second button style when one exists. If there's no design system, set one small set of tokens (CSS variables or Tailwind theme) before writing components. Before coding, decide in one line: the mood (e.g. "calm editorial", "bold startup", "warm local business") and what that means for type, color and density. Avoid the generic look: centered purple gradient hero, three identical icon cards, everything rounded-2xl shadow-lg. Typography Max 2 font families. Body 16–18px, line-height 1.5–1.7; headings tighter (1.1–1.25). Line length 60–75 characters (max-w-prose / max-width: 65ch). Clear scale (e.g. 14/16/20/24/32/48) — don't pick random sizes. Spacing & layout One spacing scale (4/8px based). Related things closer together than unrelated things. Generous section padding (64–128px desktop, 48–64px mobile). Use CSS Grid/Flex with gap, not margins on children. Align to a container width (e.g. 1120–1280px) consistently. Color 1 primary, 1 accent max, p
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- KILN-skills/kiln
- Source file
- skills/ui-polish/SKILL.md
- Fixed revision
- 555d7ea59d05910b4ef6fb39780da5f906be832b
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: KILN-skills/kiln · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-10T04:00:15.476Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.