cokit-cli 1.2.6 → 1.3.0

package/skills/frontend-design/references/ai-multimodal-overview.md

@@ -0,0 +1,165 @@
+# AI Multimodal Integration for Frontend Design
+
+Entry point for using the `ai-multimodal` (if available) skill to generate and analyze visual assets that align with frontend design thinking and aesthetic guidelines.
+
+## When to Use
+
+Use `ai-multimodal` (if available) in frontend design when you need to:
+
+**Asset Generation**:
+- Generate hero images, background assets, decorative elements
+- Create placeholder images with specific aesthetic qualities
+- Produce marketing visuals that match UI design language
+- Generate icon sets, illustrations, or graphic elements
+- Create texture overlays, gradient meshes, or background patterns
+- Prototype visual concepts before implementing in code
+
+**Visual Analysis**:
+- Analyze generated assets to verify they meet design standards
+- Compare multiple variations objectively with ratings
+- Extract exact color palettes with hex codes for implementation
+- Test assets with UI overlays for readability and contrast
+
+**Design Extraction**:
+- Extract design guidelines from existing images or videos
+- Analyze competitor designs to understand their approach
+- Reverse-engineer design systems from inspiration screenshots
+- Create documented guidelines based on visual analysis
+- Establish consistent aesthetic direction from references
+
+## Core Principles
+
+### 1. Design-Driven Generation
+**NEVER** generate generic AI imagery. Every asset must align with:
+- The chosen aesthetic direction (brutalism, maximalism, retro-futurism, etc.)
+- Typography system and visual hierarchy
+- Color palette and theme consistency
+- Overall design story and purpose
+
+### 2. Contextual Asset Creation
+Assets aren't standalone—they're part of a cohesive interface. Consider:
+- **Purpose**: Hero image vs. background texture vs. decorative element
+- **Integration**: How it interacts with overlaid text, buttons, forms
+- **Technical constraints**: File size, aspect ratio, responsive behavior
+- **Accessibility**: Color contrast, text readability, decorative vs. informative
+
+### 3. Analysis is Mandatory
+Never integrate assets without comprehensive analysis:
+- Score quality objectively (1-10 scale, minimum 7/10)
+- Extract specific values: hex codes, not "blue"; px sizes, not "large"
+- Compare multiple variations before deciding
+- Test with UI overlays, not in isolation
+
+### 4. Learn from Excellence
+Extract design systems systematically from high-quality references:
+- Analyze 3-5 screens to identify patterns
+- Document actionably with CSS variables and exact values
+- Validate predictions (fonts, colors) manually
+- Adapt principles contextually, don't copy blindly
+
+## Workflow Quick Reference
+
+### For Asset Generation
+**See**: `asset-generation.md`
+
+1. Define design context (aesthetic, colors, typography, tone)
+2. Craft design-driven prompts (not generic)
+3. Generate with appropriate Imagen 4 model
+4. Analyze and verify quality (score ≥ 7/10)
+5. Iterate or integrate based on results
+
+**Models**: imagen-4.0-generate-001 (standard), imagen-4.0-ultra-generate-001 (production), imagen-4.0-fast-generate-001 (iteration)
+
+### For Visual Analysis
+**See**: `visual-analysis.md`
+
+1. Define evaluation criteria (context-specific)
+2. Run comprehensive analysis with structured prompts
+3. Compare multiple variations objectively
+4. Extract color palettes with hex codes
+5. Test integration with UI elements
+
+**Model**: gemini-2.5-flash (vision understanding)
+
+### For Design Extraction
+**See**: `design-extraction.md`
+
+1. Capture high-quality reference screenshots
+2. Extract comprehensive design elements systematically
+3. Analyze multiple screens for consistent patterns
+4. Extract motion guidelines from videos (if applicable)
+5. Document actionably with CSS-ready specifications
+
+**Model**: gemini-2.5-flash (vision understanding)
+
+## Integration with Other Skills
+
+### With `aesthetic` Skill
+Use `aesthetic` for overall design system guidance and quality evaluation framework. Then use `frontend-design` with `ai-multimodal` (if available) for asset generation and analysis that follows those guidelines.
+
+### With `chrome-devtools` (if available) Skill
+Use `chrome-devtools` (if available) to capture full-screen screenshots from inspiration websites for design extraction. Capture at actual viewport size, not full-page scrolls.
+
+### With `ui-styling` Skill
+Generate and analyze assets first, then implement using shadcn/ui + Tailwind with colors/styles that complement the generated imagery.
+
+### With `web-frameworks` Skill
+Optimize generated assets for Next.js App Router: image optimization, responsive images, lazy loading.
+
+### With `media-processing` Skill
+Post-process generated assets: resize, compress, add filters, create compositions using FFmpeg/ImageMagick.
+
+## Navigation
+
+**Detailed Workflows**:
+- `asset-generation.md` - Complete generation workflow with prompt strategies
+- `visual-analysis.md` - Analysis and verification workflow
+- `design-extraction.md` - Extract guidelines from existing designs
+
+**Additional Resources**:
+- `technical-guide.md` - File optimization, examples, checklists, common pitfalls
+- `animejs.md` - Animation implementation for frontend
+
+## Quick Commands
+
+**Generate asset**:
+```bash
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[design-driven prompt]" \
+  --output docs/assets/[name] \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 16:9
+```
+
+**Analyze asset**:
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/[image].png \
+  --task analyze \
+  --prompt "[evaluation criteria]" \
+  --output docs/assets/analysis.md \
+  --model gemini-2.5-flash
+```
+
+**Extract design guidelines**:
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/[reference].png \
+  --task analyze \
+  --prompt "[extraction criteria from design-extraction.md]" \
+  --output docs/design-guidelines/extracted.md \
+  --model gemini-2.5-flash
+```
+
+## Remember
+
+1. **Design First, Generate Second**: Start with design thinking, not generation capabilities
+2. **Context is King**: Every asset serves the interface, not itself
+3. **Iterate Ruthlessly**: First generation is rarely final—evaluate and refine
+4. **Analysis is Mandatory**: Never integrate without comprehensive verification (≥7/10)
+5. **Demand Specifics**: Hex codes not "blue", px not "large", ms not "fast"
+6. **Learn from Excellence**: Extract design systems from high-quality references systematically
+7. **Adapt, Don't Copy**: Understand principles, apply contextually to your unique design
+
+Generate assets that elevate frontend design, maintain aesthetic consistency, and serve user experience—never generic, always contextual.

package/skills/frontend-design/references/anti-slop-rules.md

@@ -0,0 +1,103 @@
+# Anti-Slop Rules: Avoiding AI Design Fingerprints
+
+These are patterns LLMs gravitate toward by default. Treat them as "overused AI defaults" — not absolute bans. Context matters. A SaaS dashboard and a personal blog have different rules.
+
+## Typography
+
+**Strongly prefer alternatives to:**
+- `Inter` — ubiquitous to the point of being invisible. Prefer `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`, `Plus Jakarta Sans`
+- `Roboto` / `Arial` / `Open Sans` — browser defaults with no character
+- `Space Grotesk` — overused in "tech startup" contexts
+
+**Alternatives:** Variable fonts, display serifs (editorial), tight grotesks (minimal SaaS), humanist sans (consumer apps)
+
+**Avoid:**
+- Serif fonts on dashboards/data UIs — reserve for creative/editorial work
+- Only Regular (400) + Bold (700) — use 500/600 for subtler hierarchy
+- Orphaned words — use `text-wrap: balance` or `text-wrap: pretty`
+- All-caps subheaders everywhere — try lowercase italic, sentence case, small-caps
+
+## Color
+
+**Strongly prefer alternatives to:**
+- AI purple/blue gradient aesthetic — the single most common LLM design fingerprint
+- Pure `#000000` — use off-black: `#0a0a0a`, `#111`, Zinc-950, or tinted dark
+- Oversaturated accents (saturation > 80%) — desaturate to blend elegantly
+- Gradient text on large headers — use sparingly, never on body copy
+
+**Principles:**
+- Max 1 accent color per project. Remove the rest.
+- Stick to one gray family — never mix warm and cool grays
+- Tint shadows to match background hue (dark navy shadow on navy bg), not pure black
+- Flat design with zero texture feels sterile — add subtle noise/grain
+
+## Layout
+
+**Strongly prefer alternatives to:**
+- 3-column equal card layouts as feature rows — the most generic AI layout. Use 2-col zig-zag, asymmetric grid, horizontal scroll, or masonry
+- Centered hero with centered H1 at high variance — try split-screen, left-aligned, or asymmetric whitespace
+- `h-screen` for full-height sections — always use `min-h-[100dvh]` (iOS Safari viewport bug)
+- Complex flexbox `calc()` math for grids — use CSS Grid instead
+
+**Avoid:**
+- Everything centered and symmetrical — break with offset margins or mixed aspect ratios
+- Equal card heights forced by flexbox — allow variable heights or use masonry
+- Uniform border-radius everywhere — vary: tighter on inner elements, softer on containers
+- Missing max-width — always constrain to ~1200-1440px with auto margins
+
+## Content (The "Jane Doe" Effect)
+
+**Avoid:**
+- Generic names: "John Doe", "Jane Smith", "Sarah Chan" — use realistic, diverse names
+- Round fake numbers: `99.99%`, `50%`, `$100.00` — use organic data: `47.2%`, `$99.00`
+- Startup slop names: "Acme", "Nexus", "SmartFlow" — invent contextual brand names
+- AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry" — write plain, specific language
+- Lorem Ipsum — write real draft copy, even if rough
+- Exclamation marks in success messages — be confident, not loud
+- "Oops!" error messages — be direct: "Connection failed. Try again."
+- Title Case On Every Single Header — use sentence case
+
+## Visual Effects
+
+**Strongly prefer alternatives to:**
+- Neon/outer glows (`box-shadow` glows) — use inner borders or subtle tinted shadows instead
+- Custom mouse cursors — outdated, hurt performance and accessibility
+- Standard `ease-in-out` / `linear` transitions — use spring physics or custom cubic-beziers
+
+**Allowed with care:**
+- Gradient text — sparingly on accent elements, never on body or large headers
+- Glassmorphism — only when it goes beyond `backdrop-blur` (add inner border + refraction shadow)
+
+## Components
+
+**Strongly prefer alternatives to:**
+- Unstyled/default shadcn components — always customize radii, colors, and shadows
+- Generic card (border + shadow + white bg) at high visual density — use spacing/dividers instead
+- Standard Lucide/Feather icons as the only icon set — try Phosphor, Heroicons, or custom SVG for differentiation
+- Rocketship for "Launch", shield for "Security" — avoid cliché icon metaphors
+- 3-card carousel testimonials with dots — masonry wall, embedded posts, or single rotating quote
+- Pill-shaped "New"/"Beta" badges everywhere — try square badges or plain text labels
+- Avatar circles exclusively — try squircles or rounded squares
+
+## External Resources
+
+**Avoid:**
+- Unsplash direct links — use `https://picsum.photos/seed/{name}/800/600` or SVG UI Avatars
+- Same avatar image for multiple users — use unique assets
+- Stock "diverse team" photos — use real photos, candid shots, or consistent illustration style
+
+## AI Tells: Quick Self-Check
+
+Before shipping, scan for these instant giveaways:
+- [ ] Inter font anywhere in the project?
+- [ ] Purple or blue gradient as the main aesthetic?
+- [ ] Three equal-width cards in a row?
+- [ ] Centered hero text over a dark gradient image?
+- [ ] "John Doe" or "Acme Corp" in any content?
+- [ ] Round placeholder numbers (50%, $100)?
+- [ ] "Elevate your workflow" or similar AI copy?
+- [ ] Pure `#000000` as background?
+- [ ] Generic spinner (no skeleton loader)?
+- [ ] No hover/active states on buttons?
+
+If any box is checked, the design reads as AI-generated. Address before delivery.