Ckw Design

Entry point for frontend design. Use WHENEVER building or touching the look of any web UI — components, pages, dashboards, landing pages, React/Vue/HTML-CSS — and whenever the user says "make this look better/nicer", "fix the spacing/layout", or mentions styling, color, typography, fonts, responsive design, polish, or aesthetics, even without the word "design". Load design-thinking for direction; design-system for implementation; design-spatial for layout; design-philosophy for visual philosophy or art-direction.

9 stars 1 forksFrontend & Design

Install

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

npx skills add connerkward/ckw-design-skill --skill ckw-design

Manual install

git clone --depth 1 https://github.com/connerkward/ckw-design-skill.git /tmp/ckw-design-skill
mkdir -p ~/.claude/skills
cp -r /tmp/ckw-design-skill/. ~/.claude/skills/ckw-design

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

From the SKILL.md

# 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-thinking/SKILL.md).

Read the full skill on GitHub

Details

Skill name: ckw-design
Repository: connerkward/ckw-design-skill
License: MIT
Repo updated: 17 June 2026

FAQ

What does the Ckw Design skill do?

How do I install the Ckw Design skill?

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

Is Ckw Design popular?

It lives in connerkward/ckw-design-skill, which has 9 GitHub stars and 1 forks.

Related skills

Frontend Expert

sukirman1901/frontend-expert

Chat-first frontend UI quality suite — 33 skills across UI Quality, Responsive, Ship FE, and Depth pillars. Token decision tree, compliance gates, anti-AI-slop, motion vocabulary (12 families), marketing landing recipes, and quality loop. Auto-loads on any UI/build/audit/polish request — no slash commands needed.

Frontend & Design

Pbi Theme

gusbavia/pbi-theme

Generate complete Power BI Desktop theme files from brand colors. Creates production-ready JSON themes with branded canvas backgrounds, CSS design tokens, DAX HTML visual examples, and A4 PDF design system documents. Runs standalone or chained with pbi-lifecycle (auto-saves into the client's Global Theme/pbi-theme/ folder when invoked inside a lifecycle-managed project). Use when user asks to create a Power BI theme, PBI theme, dashboard theme, report branding, or Power BI color palette. Triggers on "create theme", "Power BI branding", "theme generator", "branded dashboard". Supports light/dar

Frontend & Design

Obsidian Theme Designer

XiangyuSu611/obsidian-theme-designer

Use when the user wants to design, preview, or customize an Obsidian vault theme — including choosing styles, comparing color schemes, adjusting typography, or generating CSS snippets. Triggers on keywords like "Obsidian theme", "color scheme", "CSS snippet", "appearance".

Frontend & Design

Anime 80s

m-mahadi/anime-80s-skill

Turn any brand, product, event, sentence, theme, or reference photo into an original printed piece that looks like it came out of 1980s Japanese anime print culture - theatrical one-sheets, anime-magazine covers, solid colour-field posters, one-ink screenprints, package labels, riso overprints, colored-pencil plates, and giant-word posters. Use whenever the user asks for 80s anime, 90s anime, retro anime, old anime, cel animation, cel-shaded, city pop, showa anime, anime key art, anime movie poster, anime magazine cover, or wants their brand, product, merch, packaging, social post, podcast cov

Frontend & Design

Pair Design

mary13/pair-design-agent-skill

Use this skill for collaborative UX/UI design work — designing user flows, creating wireframes or prototypes, working through interaction design problems, or making structured design decisions where iteration and rationale matter. Triggers include: 'design a flow', 'create a wireframe', 'let's pair design', 'I need to design X', 'walk me through designing Y', requests for prototype screens, mentions of UX/UI methodology, interaction design, information architecture, or service design. The skill enforces a disciplined one-artifact-at-a-time methodology with clear human-AI roles (Synth/Gen) and

Frontend & Design

Otel Collector Config

s3onghyun/otelcol-doctor

Use when authoring, debugging, or reviewing an OpenTelemetry Collector (otelcol) configuration — defining receivers/processors/exporters/connectors, wiring service pipelines, choosing between the core and contrib distributions, or exporting to OTLP/Prometheus/Loki/Tempo/Mimir. Also use when a Collector starts but no data arrives, a component is rejected at startup, or metrics lack expected labels. Triggers on "otelcol", "otel collector config", "collector pipeline", "receivers/processors/exporters", "memory_limiter", "otlp exporter", "prometheusremotewrite", "spanmetrics", "tail_sampling".

Frontend & DesignIn 1 list

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