← all publishers

dohyeon-kr

@dohyeon-kr source repo

Report this profile Claim this profile

• 6 skills
• 0 followers
• 19 hours ago last updated

1. ▌
   CSS Judgment · dohyeon-kr

   Use when modifying CSS — adjusting padding/margin/gap/width/height/position/z-index/overflow, hover/focus/responsive states, or directly using primitive tokens (raw spacing, raw colors). Guides the judgment of CSS work rather than the syntax. Determines sizing ownership (outer layout vs inner content), preserves the box model, enforces token hierarchy, and catches observable anti-patterns: child margin for sibling spacing, intentionless `flex:1` or `width:100%`, raw px / one-off token combinations, gradient hex composition at call sites, `margin: auto` for large-area distribution. For image assets (faces, photos, composite illustrations) trigger image-asset-strategy first; for post-work visual comparison trigger visual-reference-compare.
   0 installs
2. ▌
   Korean Typography · dohyeon-kr

   Use when designing or reviewing typography for a UI whose primary running text is Korean (or any CJK script). Decides font-family / size / line-height / letter-spacing / word-break with Korean-specific defaults rather than copy-pasting from English design articles (Stripe/Linear/Smashing/Refactoring UI — all Latin-first). Triggers when picking a font stack, setting type scale tokens, when a user says "글자가 작아 보여" / "행간이 답답해" / "끝 정렬이 어색해", or when Korean copy renders inside a system originally designed for English.
   0 installs
3. ▌
   Soft 3d Icon Maker · dohyeon-kr bundle

   Create soft, rounded 3D object icon assets as transparent PNGs in a cute clay-render, toy-render, emoji-like, or sticker-style aesthetic. Use when Codex needs to generate one or more raster icons of any object category with pastel color blocking, inflated forms, soft studio lighting, polished material, and clean alpha backgrounds.
   0 installs
4. ▌
   Visual Design Audit · dohyeon-kr

   Use at the end of any UI work — right before reporting "done" or opening a PR — to audit a rendered screen against two axes (심미성 / 유저 편의성). Captures viewport screenshots via cmux / agent-browser / playwright, then walks 16 lenses derived from Refactoring UI, NN/g 10 Heuristics, WCAG, Apple HIG, A List Apart, and Don Norman's "Design of Everyday Things." Enforces measurement (`getBoundingClientRect`, contrast, target-size in numbers) over eyeball judgment, with explicit guards for inner-scroll-container traps, carousel/swipe padding parity, page-vertical symmetry, and flex content-size shrinking. Returns a prioritized punch list with severity + lens + measured deltas + recommended fix. Distinct from `visual-reference-compare` — that skill compares a render against a supplied reference image; this skill judges whether the render is good design on its own terms. Triggers when no reference is supplied, when the user says "디자인 어때 / 괜찮아 보여 / 검토해줘 / 패딩 안 맞는 거 확인해", and as the standard final gate after frontend work.
   0 installs
5. ▌
   Visual Regression Guard · dohyeon-kr

   Use whenever a code change can ripple into the rendered UI of pages you are not currently editing — design token edits, theme/palette/typography changes, shared CSS module edits, common component refactors, breakpoint additions, third-party UI lib upgrades, font/asset CDN bumps. Runs in two phases — (1) **before** the change, capture baseline screenshots of every plausibly-affected screen; (2) **after** the change, re-capture the same screens and diff. If diffs exceed threshold, walks a 4-step recovery (locate → hypothesize → bisect → route to the responsible skill). Distinct from `visual-design-audit` (which judges absolute quality) and `visual-reference-compare` (which compares against an external reference) — this skill compares "after" against "before by the same author." Triggers when a change can affect multiple screens and on user prompts like "다른 페이지에 영향 없는지 확인해 / 회귀 잡아줘".
   0 installs
6. ▌
   Rounded Line Svg Icon Maker · dohyeon-kr bundle

   Create clean monochrome rounded-line SVG icons in a Lucide/Heroicons-style outline aesthetic. Use when Codex needs to produce, adapt, or review vector SVG icons with 24x24 viewBox, stroked paths, rounded caps and joins, no fills, currentColor support, compact markup, and consistent icon-set geometry.
   0 installs