ccbot-cli 2.0.0 → 2.1.0

package/skills/domains/frontend-design/neubrutalism/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: neubrutalism
+description: Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+---
+
+# Neubrutalism Design Spec
+
+## Core Principles
+
+1. **Thick Borders** — Bold `3–5px solid` black outlines on all elements
+2. **Offset Solid Shadows** — Hard-edge `box-shadow` with zero blur (e.g. `5px 5px 0 #000`)
+3. **High Saturation Colors** — Vivid, punchy fills: pinks, yellows, blues, greens
+4. **Minimal Radius** — `0–8px` border-radius; sharp or barely rounded corners
+5. **Flat Aesthetic** — No gradients, no blur, no transparency
+
+## CSS Tokens
+
+Reference: [references/tokens.css](references/tokens.css)
+
+```css
+@import 'references/tokens.css';
+
+.nb-card {
+  background: var(--nb-yellow);
+  border: var(--nb-border-thick);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow);
+}
+```
+
+## Component Examples
+
+### Card
+```css
+.nb-card {
+  background: var(--nb-white);
+  border: var(--nb-border-thick);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow);
+  padding: 1.5rem;
+}
+```
+
+### Button
+```css
+.nb-btn {
+  background: var(--nb-yellow);
+  border: var(--nb-border);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow-sm);
+  padding: 0.6rem 1.4rem;
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight);
+  cursor: pointer;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+.nb-btn:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--nb-shadow);
+}
+.nb-btn:active {
+  transform: translate(3px, 3px);
+  box-shadow: none;
+}
+```
+
+### Navbar
+```css
+.nb-nav {
+  background: var(--nb-bg);
+  border-bottom: var(--nb-border-thick);
+  padding: 1rem 2rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+```
+
+### Input
+```css
+.nb-input {
+  background: var(--nb-white);
+  border: var(--nb-border);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow-sm);
+  padding: 0.6rem 1rem;
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight-body);
+}
+.nb-input:focus {
+  outline: none;
+  box-shadow: var(--nb-shadow);
+}
+```
+
+### Badge
+```css
+.nb-badge {
+  background: var(--nb-pink);
+  border: var(--nb-border);
+  border-radius: var(--nb-radius);
+  padding: 0.2rem 0.8rem;
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight);
+  font-size: 0.85rem;
+}
+```
+
+## Typography
+
+- Use bold, geometric sans-serif fonts (Space Grotesk, Inter, etc.)
+- Headings: `font-weight: 700`, `letter-spacing: -0.02em`
+- Body: `font-weight: 500`
+- Uppercase sparingly for labels/badges
+
+```css
+h1, h2, h3 {
+  font-family: var(--nb-font-heading);
+  font-weight: var(--nb-font-weight);
+  letter-spacing: var(--nb-letter-spacing);
+}
+body {
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight-body);
+}
+```
+
+## Accessibility Notes
+
+- Thick borders provide strong visual boundaries — good for low-vision users
+- Ensure color contrast ≥ 4.5:1 for text on colored backgrounds
+- Active/hover states use `transform` shifts — provide `prefers-reduced-motion` fallback
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  .nb-btn:hover, .nb-btn:active {
+    transform: none;
+  }
+}
+```

package/skills/domains/frontend-design/neubrutalism/references/tokens.css

@@ -0,0 +1,44 @@
+:root {
+  /* Borders */
+  --nb-border: 3px solid #000;
+  --nb-border-thick: 5px solid #000;
+
+  /* Shadows (offset solid, no blur) */
+  --nb-shadow-sm: 3px 3px 0 #000;
+  --nb-shadow: 5px 5px 0 #000;
+  --nb-shadow-lg: 8px 8px 0 #000;
+
+  /* Radius */
+  --nb-radius: 4px;
+  --nb-radius-lg: 8px;
+
+  /* Colors — high saturation */
+  --nb-pink: #ff6b9d;
+  --nb-yellow: #ffd43b;
+  --nb-blue: #4dabf7;
+  --nb-green: #51cf66;
+  --nb-orange: #ff922b;
+  --nb-purple: #cc5de8;
+  --nb-red: #ff6b6b;
+  --nb-white: #fff;
+  --nb-black: #000;
+  --nb-bg: #f5f0e8;
+
+  /* Typography */
+  --nb-font: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+  --nb-font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+  --nb-font-weight: 700;
+  --nb-font-weight-body: 500;
+  --nb-letter-spacing: -0.02em;
+}
+
+[data-theme="dark"] {
+  --nb-border: 3px solid #fff;
+  --nb-border-thick: 5px solid #fff;
+  --nb-shadow-sm: 3px 3px 0 #fff;
+  --nb-shadow: 5px 5px 0 #fff;
+  --nb-shadow-lg: 8px 8px 0 #fff;
+  --nb-bg: #1a1a2e;
+  --nb-black: #fff;
+  --nb-white: #1a1a2e;
+}