| name | ckw-design |
| description | Frontend design entry point: direction, design system, visual philosophy. Use whenever building or touching the look of any web UI (components, pages, dashboards, React/Vue/HTML-CSS) or when the user says "make this look better", "fix the spacing/layout", or mentions styling, color, type, or polish. |
| risk | safe |
| source | community |
| source_type | community |
| source_repo | connerkward/ckw-design-skill |
| date_added | 2026-06-16 |
| author | Conner K Ward |
| license | MIT |
| tags | ["design","frontend","ui","css","typography","responsive"] |
| tools | ["claude-code","antigravity","cursor","gemini-cli","codex-cli"] |
When to Use
Use whenever building or styling web UIs — components, pages, dashboards, landing pages, React/Vue/HTML-CSS layouts — or whenever the user asks to make something "look better/nicer", fix spacing/layout, or mentions styling, color, typography, fonts, responsive design, polish, or aesthetics, even without the word "design".
Source: connerkward/ckw-design-skill (MIT).
Design (entry)
Use this skill when the user asks to build or style web UIs: components, pages, dashboards, landing pages, React/Vue/HTML-CSS layouts, or any frontend interface. Goal: distinctive, production-grade output that avoids generic AI aesthetics.
Before reporting any design "done": render it and have a separate judge critique the image (not the code, not self-grading) — see design-spatial §1. Blind generation can't see its own collisions; this applies to all design output, not just spatial work.
MANDATORY HORIZONTAL-OVERFLOW GATE — runs before ANY web UI is "done".
Measure document.documentElement.scrollWidth - document.documentElement.clientWidth
at a narrow width (~390px and ~1024px), this turn, and confirm it's 0. This
bug is invisible at desktop width and re-appears every time a row (header, nav,
toolbar) gains an item, so it ships repeatedly. Default to flex-wrap:wrap on
header/toolbar rows + body{overflow-x:clip}, and re-measure after adding any
element to a horizontal row. Full procedure + recurrence cases: design-spatial §4.
If you haven't measured narrow, you are not done — don't claim it.
Sub-skills (load when relevant)
- design-thinking — Load for every design task. Defines purpose, tone, domain, color world, review bar, and cross-domain lens (cinema, architecture, marketing, UX, automotive, industrial design). See design-thinking/SKILL.md.
- design-system — Load when implementing: tokens, typography, motion, color semantics, backgrounds. Use when building components, pages, or design systems. See design-system/SKILL.md.
- design-spatial — Load when composing layout: explicit grid + 8-point spacing constraints, visual-weight/balance/alignment, and a render-then-critique vision loop. The fix for "spatial understanding is off" — generated layout that's centered mush, misaligned, or breaks at some widths. See design-spatial/SKILL.md.
