Interface Polish

A checklist of concrete UI craft rules covering border radius, shadows, animation timing, typography, color tokens, accessibility, layout spacing, and microcopy. Use this skill whenever building, reviewing, or refining any web UI, component, page, landing page, or design system code, even if the user only says "make it look better", "polish this", "review my component", or asks for a button, menu, modal, form, or any frontend work. Also use it when writing UI copy like button labels, empty states, or confirmation dialogs. Distilled from the interfaces.dev cheat sheet.

6 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Tsavsar/interface-polish --skill interface-polish

Manual install

git clone --depth 1 https://github.com/Tsavsar/interface-polish.git /tmp/interface-polish
mkdir -p ~/.claude/skills
cp -r /tmp/interface-polish/. ~/.claude/skills/interface-polish

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Interface Polish

Practical rules for making interfaces clearer, easier to use, and more polished. Apply these by default when writing or reviewing frontend code. Each rule is short; when one applies, just do it rather than asking.

Adapted and condensed from the [interfaces.dev cheat sheet](https://interfaces.dev/cheat-sheet) by [Jakub Krehel](https://x.com/jakubkrehel), published here with his permission. For deeper typography, color, or motion work, pair this with the better-typography, better-colors, apple-design, and emil-design-eng skills if available.

## Visual details

**Concentric radii on nested elements.** Inner radius = outer radius minus the gap between them. A card with `16px` radius and `8px` padding gives its inner element `8px` radius. Never give a nested element the same radius as its parent.

**Optical over geometric alignment.** Center things by eye, not just by math. Play icons, arrows, and asymmetric glyphs usually need a 1–2px nudge to look centered.

**Asymmetric button padding with icons.** When a button has an icon plus text, reduce the padding on the icon side slightly (the icon carries visual weight that text doesn't).

**Layered shadows over borders for depth.** Stack 2–3 `box-shadow` layers (a tight low-opacity ring plus softer larger shadows) instead of a flat `1px` border when you want elevation.

Read the full skill on GitHub

Details

Skill name: interface-polish
Repository: Tsavsar/interface-polish
License: MIT
Repo updated: 17 September 2026

FAQ

What does the Interface Polish skill do?

How do I install the Interface Polish skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Tsavsar/interface-polish --skill interface-polish. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Interface Polish popular?

It lives in Tsavsar/interface-polish, which has 6 GitHub stars and 0 forks.

Related skills

Oh My Design

favorPotato/oh-my-design

Use this skill when the user asks to design / mock up / prototype a UI, iterate on visual design, compare visual candidates, or explore visual approaches before implementation. Triggered by phrases like "design a UI", "mockup", "prototype the screen", "give me 3 visual options", "make it look like…", or any request that is fundamentally about look-and-feel rather than business logic. The skill writes React 18 prototypes under `<cwd>/.design/<slug>/`, hands the user a Tweaks panel to pick / iterate, and returns the selection plus a self-describing manifest the next agent can implement against.

Frontend & Design

Image First Frontend

jinshiqwq/image-first-frontend

Generate a polished frontend reference screenshot through a configurable GPT-image-2-compatible generations endpoint, save and show versioned previews inside the project, revise selected previews through a configurable /images/edits endpoint, and reproduce only the user-approved design as functional frontend code with high visual fidelity. Use when Codex is asked to design, build, restyle, or recreate a web page, application screen, dashboard, landing page, or UI component through an image-first workflow, design approval loop, screenshot-driven implementation, pixel matching, or a 1:1 frontend

Frontend & Design

Qiaomu Tldraw Skill

joeseesun/qiaomu-tldraw-skill

Official-first Qiaomu tldraw creation skill and workflow for building, editing, recreating, scripting, linting, testing, migrating, and packaging tldraw canvases or tldraw SDK apps with the official CLI and official LLM-friendly documentation. Use when the user asks to 画 tldraw、复刻成可编辑画布、制作流程图/信息图/课件、创建交互或动画画布、写 custom ShapeUtil/document script、检查 .tldraw 文件， or scaffold and migrate a tldraw React application using official sources only.

Frontend & Design

Elementor Pro Designer Skill

jainshwetank/elementor-pro-designer-skill

Use this skill whenever helping someone build, design, or troubleshoot layouts in Elementor Pro V4 using the visual editor. Triggers on ANY mention of Elementor, page builder, Flexbox widget, Div block, section layout, widget configuration, responsive breakpoints, dark mode, scroll animations, Interactions tab, Variables Manager, Class Manager, Custom Code snippets, or any visual design work inside the Elementor panel. Also trigger when someone asks how to position elements, set spacing, apply typography, configure dark mode, prevent FOUC, or build scroll-triggered effects in Elementor. ALWAYS

Frontend & Design

Quasar Vue3

felixyakubov91/claude-quasar

Comprehensive Quasar Framework (v2) and Vue 3 development assistance. Use this skill when working with Quasar projects, components, plugins, directives, composables, CLI configuration, or building apps (SPA, SSR, PWA, Electron, Capacitor, Cordova, Browser Extensions). Triggers on Quasar-specific questions, quasar.config.js, Q-prefixed components (QBtn, QInput, QTable, etc.), Quasar CLI commands, or Vue 3 Composition API with Quasar.

Frontend & Design

Cockpit UI Skill

KrasAndy/cockpit-ui-skill

暗色 cockpit 风格的 UI/UX 词库与 cheatsheet。Claude 在开发能源 / 工业驾驶舱、暗色 dashboard、B 端 SaaS 前端时加载本 skill,会按 cheatsheet 中的三主题 token、字号 / 间距 / 圆角 / 阴影梯度、6 个核心组件 API(LayoutShell / SplitPane / ResponsiveGrid / DataTable / ThemeProvider / I18nProvider)以及实际可导出的 React + TypeScript 代码。

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.