ckw-design
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.
newIT & Software DevelopmentDesign & UXcssdesignfrontendresponsivetypographyui
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
Subscribers only
The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | connerkward/ckw-design-skill |
|---|---|
| License | MIT |
| Risk label | safe ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md |
| Added | 2026-06-16 |
Related skills
accesslint-audit
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
angular
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.
angular-best-practices
Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
angular-migration
Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
angular-state-management
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
angular-ui-patterns
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.