From antigravity-awesome-skills
Designs and styles web UIs (components, pages, dashboards, React/Vue/HTML-CSS) with a focus on distinctive, production-grade output. Enforces horizontal-overflow checks and loads sub-skills for design thinking, design systems, and spatial layout.
How this skill is triggered — by the user, by Claude, or both
Slash command
/antigravity-awesome-skills:ckw-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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".
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).
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.clientWidthat a narrow width (~390px and ~1024px), this turn, and confirm it's0. 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 toflex-wrap:wrapon 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.
When design-thinking identifies a need for visual assets (logos, icons, hero images, textures, backgrounds):
When design work involves running an LLM (generative assets, VLM analysis, layout critique, prompt generation, etc.):
media-attribution-rule for generative assets and extends it to any LLM operation in the design workflow.Examples:
Whenever a UI surfaces an algorithm or model to the user (an "ⓘ how this works"
panel, a model breakdown, a methods note), include the actual equation, typeset,
with its key terms annotated — don't settle for prose. A scorer described only in
words ("ranks by how much of the picked color is present") is unfalsifiable hand-
waving; the formula score = Σ fracᵢ · max(0, 1 − ΔEᵢ/τ) with each term labelled
tells the user exactly what the knob does and builds trust that there's real math
under the hood.
How to apply:
e_x, w, τ, Q each are,
in one line each. An unlabelled equation is decoration; a labelled one is a spec.Example (a logistic head):
P(personal │ x) = σ(w·eₓ + b), σ(z) = 1 / (1 + e⁻ᶻ) • eₓ — the image's 768-d embedding · w, b — weights learned from your labels · decision: personal if P ≥ 0.55, reference if P ≤ 0.40.
Any "Select all" affordance MUST be paired with a way to clear the selection — preferably the same button, label-flipped when everything is already selected ("Select all" ⇄ "Deselect all"). A select-all with no inverse is a trap: the user over-selects (or hits it by reflex), then has to un-click items one by one, or reload the page, to get back. The cost is silent — it only bites after they've committed to the wrong set.
How to apply:
npx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-bundle-aas-mobile-app-builderAudits, refines, and builds polished UI with real-world design patterns, brand-appropriate palettes, and anti-pattern detection. Use when frontend visual work needs to look less generic or 'AI-made'.
Creates memorable, production-grade frontend interfaces with intentional aesthetic direction and design systems. Uses the Design Feasibility & Impact Index to evaluate and execute distinctive UI.
Designs UI/UX systems with style guides, color palettes, typography, and component specs for new interfaces. Asks about product type, tech stack, and deliverables before producing design tokens, layouts, or style guides.