메뉴
Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/Sheshiyer/skill-clusters --skill make-interfaces-feel-better명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
Arcplume runs Grok through the Grok Build CLI's own OAuth-authenticated session (grok login) for image generation, with strict preflight validation, secret-safe handling, and headless CLI-driven execution -- no separate XAI_API_KEY billing. Video falls back to the billed xAI API. USE WHEN a user wants to generate an image via a locally logged-in Grok Build CLI session, e.g. 'generate an image with grok', 'use grok build', or 'use my logged-in grok session'.
Shared reference for the Selemene cluster: the two report surfaces (deterministic Rust reports vs. narrative witness-pipeline readings), the @selemene/bridge CLI contract, the output manifest format, and non-prescriptive witnessing tone. USE WHEN deciding which Selemene surface to invoke or when routing between birth/compatibility/transit reports and solo/dyadic readings.
Route Selemene Engine tasks to the right surface: deterministic reports (birth/compatibility/transit) via selemene-core and the @selemene/bridge CLI, or narrative witness readings via selemene-report. USE WHEN the user wants anything under the Selemene/Noesis umbrella but has not named the exact surface.
SOC 직업 분류 기준
| name | make-interfaces-feel-better |
| description | Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states. |
| origin | community |
| cluster | frontend-web |
| version | 1.0.0 |
Use this skill for the small design-engineering details that compound into a more polished interface.
Source: salvaged from stale community PR #1659 by linus707.
For nearby nested rounded surfaces:
outer radius = inner radius + padding
If padding is large, treat layers as separate surfaces instead of forcing the math. The point is optical coherence, not formula worship.
Geometric centering is not always visual centering. Icon buttons, play triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the SVG when possible; otherwise adjust with a pixel-level margin or padding change.
Use borders for separation and focus rings. Use layered shadows when a card, button, dropdown, or popover needs depth. Shadows should be transparent and subtle enough to work across backgrounds.
text-wrap: balance on headings and short titles.text-wrap: pretty on short-to-medium body text, captions, descriptions,
and list items.font-variant-numeric: tabular-nums for counters, timers, prices, tables,
and other updating numbers.On macOS, apply antialiased font smoothing at the root layout when the project does not already do so:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Images often need a subtle inset outline so their edges do not blur into the surface.
img {
outline: 1px solid rgba(0, 0, 0, 0.1);
outline-offset: -1px;
}
@media (prefers-color-scheme: dark) {
img {
outline-color: rgba(255, 255, 255, 0.1);
}
}
Use neutral black or white alpha outlines. Do not tint image outlines with the brand palette.
Use CSS transitions for interactive state changes because they can retarget when the user changes intent mid-motion. Reserve keyframes for staged one-shot entrances or loading sequences.
Good motion defaults:
translateY, and optionally blur.scale(0.96) for tactile buttons, with a way to disable it when the
movement distracts.Never use transition: all. Specify the changed properties:
.button {
transition-property: transform, background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
Use will-change only for first-frame stutter on compositor-friendly
properties such as transform, opacity, and filter. Never use
will-change: all.
Interactive controls should have at least a 40x40px hit area, ideally 44x44px where the layout allows it. Expand with a pseudo-element when the visible icon is smaller, but do not let expanded hit areas overlap.
When reviewing a UI polish pass, report concrete changes in before/after rows:
| Principle | Before | After |
|---|---|---|
| Concentric radius | Same radius on parent and child | Parent radius accounts for padding |
| Tabular numbers | Counter shifts as digits change | Counter uses tabular-nums |
| Transition scope | transition: all | Explicit transition properties |
Include file paths and properties when they are not obvious from the snippets. Omit principles that you checked but did not change.
transition: all and will-change: all are absent.