@lovehlmmm/primekit 1.0.0

package/skills/frontend-design/references/extraction-output-templates.md

@@ -0,0 +1,162 @@
+# Extraction Output Templates
+
+Documentation format templates for extracted design guidelines.
+
+## Template 1: Complete Design System
+
+```markdown
+# [Project/Competitor] Design System
+
+## Aesthetic Direction
+- **Style**: Neo-brutalism with organic elements
+- **Mood**: Bold, confident, approachable
+- **Differentiation**: High contrast typography with soft color accents
+
+## Typography
+### Display Font
+- Family: Archivo Black (Google Fonts)
+- Sizes: h1: 72px, h2: 48px, h3: 36px
+- Weights: 400 (regular)
+- Line Height: 1.1
+- Letter Spacing: -0.02em
+
+### Body Font
+- Family: Inter (Google Fonts)
+- Sizes: body: 16px, small: 14px
+- Weights: 400, 500, 600
+- Line Height: 1.6
+- Letter Spacing: 0
+
+## Color Palette
+\```css
+:root {
+  /* Primary Colors */
+  --color-primary-900: #0A1628;
+  --color-primary-600: #1E40AF;
+  --color-primary-400: #60A5FA;
+
+  /* Accent Colors */
+  --color-accent-500: #F59E0B;
+  --color-accent-300: #FCD34D;
+
+  /* Neutral Colors */
+  --color-neutral-900: #111827;
+  --color-neutral-700: #374151;
+  --color-neutral-500: #6B7280;
+  --color-neutral-300: #D1D5DB;
+  --color-neutral-100: #F3F4F6;
+
+  /* Background */
+  --color-bg-primary: #FFFFFF;
+  --color-bg-secondary: #F9FAFB;
+}
+\```
+
+## Spacing System
+- Base: 4px
+- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96px
+- Usage: Consistent 8px rhythm for most components
+
+## Component Specifications
+
+### Button (Primary)
+\```css
+.button-primary {
+  background: var(--color-primary-600);
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: background 200ms ease-out;
+}
+.button-primary:hover {
+  background: var(--color-primary-900);
+}
+\```
+
+### Card
+\```css
+.card {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  transition: box-shadow 200ms ease-out;
+}
+.card:hover {
+  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
+}
+\```
+
+## Motion Guidelines
+- Transition timing: 200ms for micro-interactions, 400ms for page transitions
+- Easing: ease-out for entrances, ease-in for exits
+- Stagger delay: 50ms between sequential elements
+```
+
+## Template 2: Competitive Analysis
+
+```markdown
+# Competitive Design Analysis
+
+## Competitors Analyzed
+1. Competitor A - [URL]
+2. Competitor B - [URL]
+3. Competitor C - [URL]
+
+## Comparative Summary
+
+| Aspect | Competitor A | Competitor B | Competitor C |
+|--------|--------------|--------------|--------------|
+| Aesthetic | Minimalist | Maximalist | Editorial |
+| Primary Color | #1E40AF | #7C3AED | #DC2626 |
+| Typography | Inter | Poppins | Playfair Display |
+| Layout | Grid-based | Asymmetric | Magazine |
+
+## Common Patterns (Industry Standard)
+- All use sans-serif for body text
+- All prioritize mobile-first responsive design
+- All use card-based layouts for content
+- All feature hero sections with large imagery
+
+## Differentiation Opportunities
+1. **Color Strategy**: Competitors use saturated colors; opportunity for muted, sophisticated palette
+2. **Typography**: No one uses display serifs; opportunity for elegant, high-end feel
+3. **Layout**: All symmetric; opportunity for asymmetric, dynamic composition
+
+## Recommendations
+Based on analysis, recommend:
+- Aesthetic: Refined minimalism with editorial typography
+- Color: Muted earth tones with one bold accent
+- Layout: Asymmetric grid with generous white space
+- Differentiation: Unexpected typography hierarchy, subtle animations
+```
+
+## Integration Workflow
+
+### After Extraction
+
+1. **Review & Validate**
+   - Manually verify color codes with eyedropper tool
+   - Cross-reference font predictions against Google Fonts
+   - Check spacing values against browser dev tools
+
+2. **Adapt & Customize**
+   - Don't copy—adapt principles to your unique context
+   - Maintain underlying logic, change expression
+   - Example: Extract "generous white space" principle, apply with your colors
+
+3. **Document Decisions**
+   - Save extracted guidelines in project `docs/design-guidelines/`
+   - Create design system spec from extraction
+   - Reference when generating new assets
+
+4. **Reference in Implementation**
+   - Use extracted tokens when generating new assets with `asset-generation.md`
+   - Apply extracted principles when analyzing your own designs with `visual-analysis.md`
+   - Maintain consistency between inspiration and implementation
+
+5. **Iterate & Refine**
+   - Update guidelines as design evolves
+   - Extract from multiple sources, synthesize learnings
+   - Create your own unique voice from combined insights

package/skills/frontend-design/references/extraction-prompts.md

@@ -0,0 +1,127 @@
+# Extraction Prompt Templates
+
+Complete prompt templates for design guideline extraction.
+
+## Comprehensive Design Analysis Prompt
+
+```
+Extract comprehensive design guidelines from this interface:
+
+## Aesthetic Identification
+- Design Style: Identify the aesthetic movement (minimalism, brutalism, maximalism, glassmorphism, neo-brutalism, organic, luxury, editorial, etc.)
+- Overall Mood: Professional, playful, serious, energetic, calm, bold, refined
+- Differentiation Factor: What makes this design memorable and distinctive?
+
+## Typography System
+- Display Font: Predict font family (favor Google Fonts: Playfair Display, Bebas Neue, DM Serif, Archivo Black, etc.). Provide 2-3 alternatives if uncertain.
+- Body Font: Identify or suggest similar alternatives
+- Font Sizes: Estimate in px for h1, h2, h3, body, small text
+- Font Weights: Used weights (300, 400, 500, 600, 700)
+- Line Heights: Estimate leading ratios
+- Letter Spacing: Tight, normal, or wide tracking
+
+## Color System (CRITICAL)
+- Extract 8-12 distinct colors with accurate hex codes
+- Classify: Primary (1-2), Secondary (1-2), Accent (2-3), Neutral/Gray (3-5), Background (1-2)
+- Note color relationships and usage patterns
+- Identify gradients (provide start/end hex codes and direction)
+
+## Spatial Composition
+- Layout Type: Grid-based, asymmetric, centered, multi-column, magazine-style
+- Grid System: Estimate column count and gutter widths
+- Spacing Scale: Identify spacing rhythm (4px, 8px, 16px, 24px, etc.)
+- White Space Strategy: Generous, tight, varied
+- Section Hierarchy: How content is organized and prioritized
+
+## Visual Elements
+- Border Styles: Radius values (sharp, subtle rounded, fully rounded)
+- Shadows: Box-shadow characteristics (elevation, spread, blur)
+- Backgrounds: Solid, gradients, patterns, textures, images
+- Effects: Blur, overlays, transparency, grain, noise
+- Decorative Elements: Lines, shapes, illustrations, icons
+
+## Component Patterns
+- Button Styles: Shape, size, states, hover effects
+- Card Design: Borders, shadows, padding, content structure
+- Navigation: Style, position, behavior
+- Forms: Input styles, validation, spacing
+- Interactive Elements: Hover states, transitions
+
+## Motion & Animation (if video)
+- Transition Timing: Fast (100-200ms), medium (200-400ms), slow (400-600ms+)
+- Easing Functions: Linear, ease-out, ease-in, cubic-bezier specifics
+- Animation Types: Fade, slide, scale, rotate, stagger
+- Scroll Interactions: Parallax, reveal-on-scroll, sticky elements
+
+## Accessibility Considerations
+- Color Contrast: Evaluate text/background combinations
+- Font Sizes: Minimum sizes used
+- Interactive Targets: Button/link sizes
+- Visual Hierarchy: Clear content prioritization
+
+## Design Highlights
+- Top 3 standout design decisions
+- What makes this design effective
+- Potential improvements or considerations
+
+Output as structured markdown for easy reference.
+```
+
+## Multi-Screen System Extraction Prompt
+
+```
+Analyze these multiple screens to extract the consistent design system:
+
+For each screen:
+1. Identify consistent design tokens (colors, typography, spacing)
+2. Note variations and their rationale
+3. Extract reusable component patterns
+
+Then synthesize:
+- Core design system: Consistent colors, fonts, spacing scales
+- Component library: Buttons, cards, navigation, forms
+- Layout patterns: Grid systems, responsive behavior
+- Visual language: Shared aesthetic principles
+- Design tokens: Create CSS variable recommendations
+
+Provide as a unified design system specification.
+```
+
+## Motion Design Extraction Prompt
+
+```
+Analyze this video to extract motion design guidelines:
+
+1. Transition Timing: Measure duration of key animations (in ms)
+2. Easing Curves: Describe acceleration/deceleration (ease-in, ease-out, spring)
+3. Animation Types: List all animation styles used
+4. Micro-interactions: Button hovers, form focus states, feedback
+5. Page Transitions: How screens change
+6. Scroll Interactions: Parallax, sticky headers, reveal animations
+7. Loading States: Skeleton screens, spinners, progressive reveals
+8. Stagger Effects: Sequential animation delays and patterns
+
+Provide implementable specifications with timing values.
+```
+
+## Competitive Analysis Prompt
+
+```
+Comparative design analysis of 3 competitors:
+
+For each competitor:
+1. Design style and aesthetic approach
+2. Color strategy and brand perception
+3. Typography choices and hierarchy
+4. Layout and information architecture
+5. Unique design elements
+6. Strengths and weaknesses
+
+Synthesis:
+- Common industry patterns (what everyone does)
+- Differentiation opportunities (gaps to exploit)
+- Best practices observed (proven approaches)
+- Design recommendations (how to stand out)
+
+Provide strategic design direction based on analysis.
+```

package/skills/frontend-design/references/motion-craft.md

@@ -0,0 +1,166 @@
+# Motion Craft — Timing, Easing, GSAP & Motion Recipes
+
+Load this when the task involves scroll animation, page-load choreography, GSAP, Motion (Framer), or any `MOTION_INTENSITY > 4` build. The SKILL.md motion rules are the contract; this file is the implementation playbook.
+
+## 1. Timing system
+
+The 100/300/500 rule — duration is set by what the animation does, never by taste:
+
+| Class | Duration | Examples |
+|-------|----------|----------|
+| Instant feedback | 100-150ms | button press, toggle, checkbox, tab switch |
+| State change | 200-300ms | hover, menu open, tooltip, dropdown |
+| Layout change | 300-500ms | accordion, modal, drawer, expand/collapse |
+| Entrance | 500-800ms | hero reveal, page-load orchestration (brand surfaces ONLY) |
+
+- Exits run at ~75% of the entrance duration — leaving is faster than arriving.
+- Interactions under ~80ms feel instant; don't animate below that threshold.
+- Stagger: 30-60ms per item, entire sequence ≤ 500ms. More items → shorter per-item delay, or cap how many stagger (rest appear together).
+- Pause ≥ 300ms before a key reveal — the viewer needs reaction time; an instant cut loses the information.
+- End every sequence with a hard stop on a decisive final state. Never fade everything out.
+
+## 2. Easing tokens
+
+Define once, use everywhere:
+
+```css
+:root {
+  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);   /* default UI ease */
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);  /* slightly snappier */
+  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);   /* reveals, entrances */
+}
+```
+
+- Default for reveals/entrances: `--ease-out-expo`, ~600ms.
+- Springs are fine in Motion: `{ type: "spring", stiffness: 100, damping: 20 }`.
+- **Banned**: `linear` for UI movement (reserve for marquees/spinners), bounce `cubic-bezier(0.34,1.56,0.64,1)` and elastic `cubic-bezier(0.68,-0.6,0.32,1.6)` as general easings — dated and tacky. A small overshoot is acceptable on toggles/switches only.
+- Never `transition: all` — list the exact properties.
+
+## 3. Choreography
+
+- Motion must be motivated by hierarchy, feedback, story, or state. "Looked cool" is invalid. Product UI: 150-250ms state-conveying motion only, page-load choreography NEVER.
+- One well-orchestrated page-load with staggered reveals beats scattered micro-animations. Budget the drama: brand surfaces get ONE orchestrated moment.
+- Long scroll narratives follow a slow-fast-boom-stop arc: slow trigger (~15%) → reveal (~15%) → fast process (~40%) → burst (~20%) → still hold (~10%). Uniform pacing reads as a tech demo.
+- Focus shifts need depth, not just opacity: de-emphasize the background with `brightness(.5) saturate(.7) blur(4px)` while the focus target stays sharp. Opacity alone leaves the background visually competing.
+- The uniform whole-section fade-and-rise applied to every section is the #1 scroll-animation tell. Vary reveals to fit what they reveal: a stat counts up, an image scales from 0.95, a list staggers, a divider draws. Suppressing the reflex is never a reason to ship zero motion.
+
+## 4. Tech selection
+
+| Need | Tool |
+|------|------|
+| Hover/press/focus states, simple entrances | CSS transitions + `animation-delay` stagger |
+| React reveals, springs, gestures, layout animation | Motion (`motion/react`): `whileInView`, `useMotionValue` |
+| Pinning, scrubbing, horizontal pan, card stacking, timelines | GSAP + ScrollTrigger |
+| Scroll-linked without JS | CSS `animation-timeline: view()` (progressive enhancement) |
+
+- Never mix GSAP and Motion in one component tree — one owner per subtree.
+- **Banned scroll tech**: raw `window.addEventListener('scroll')`, `window.scrollY` in React state, rAF loops writing state, `useState` for any continuous value (scroll, mouse, magnetic pull). Use `useScroll`/`useMotionValue`/`useTransform`, ScrollTrigger, or IntersectionObserver — they bypass the React render loop.
+
+## 5. GSAP recipes
+
+Register once: `gsap.registerPlugin(ScrollTrigger)`. Pins MUST use `start: "top top"` — `"top center"` / `"top 80%"` on a pinned section is the #1 GSAP failure (the pin engages mid-viewport and the layout jumps).
+
+**Sticky card stack** — cards pile up as you scroll; the previous card recedes, scrubbed by the NEXT card's approach:
+
+```js
+cards.forEach((card, i) => {
+  ScrollTrigger.create({ trigger: card, start: "top top", pin: true, pinSpacing: false });
+  if (i < cards.length - 1) {
+    gsap.to(card, {
+      scale: 0.92, opacity: 0.55,
+      scrollTrigger: { trigger: cards[i + 1], start: "top bottom", end: "top top", scrub: true },
+    });
+  }
+});
+```
+
+**Horizontal pan** — a wide track scrolls sideways while the section is pinned:
+
+```js
+gsap.to(track, {
+  x: () => -(track.scrollWidth - window.innerWidth),
+  ease: "none",
+  scrollTrigger: {
+    trigger: section, start: "top top", pin: true, scrub: 1,
+    end: () => "+=" + (track.scrollWidth - window.innerWidth),
+    invalidateOnRefresh: true,
+  },
+});
+```
+
+**Pinned split** — section title pinned left while items scroll on the right: `ScrollTrigger.create({ trigger: section, start: "top top", end: "bottom bottom", pin: titleEl })` with the right column as normal flow.
+
+**Scrubbed text reveal** — words of a central paragraph go 0.1 → 1.0 opacity sequentially: split into `<span>`s, `gsap.to(words, { opacity: 1, stagger: 0.1, scrollTrigger: { trigger, start: "top 70%", end: "top 20%", scrub: true } })` with words at `opacity: 0.1` base (visible-by-default, see §8).
+
+**Image scale-and-fade** — images enter at `scale: 0.85`, settle to `1.0` in view, dim to `opacity: 0.2` scrolling out. Two tweens on enter/leave triggers, both scrubbed.
+
+Limits: max 1 marquee per page; `invalidateOnRefresh: true` on anything measuring the DOM; kill triggers on unmount in SPAs.
+
+## 6. Motion (Framer) recipes
+
+**Standard reveal** — reserve GSAP for pin/scrub; simple reveals use:
+
+```jsx
+<motion.div
+  initial={{ opacity: 0, y: 24 }}
+  whileInView={{ opacity: 1, y: 0 }}
+  viewport={{ once: true, amount: 0.3 }}
+  transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+/>
+```
+
+**List stagger** — parent `variants` with `staggerChildren: 0.05`; or CSS-only: `animation-delay: calc(var(--i) * 50ms)` with `--i` set per item.
+
+**Magnetic button** — continuous values live in motion values, never state:
+
+```jsx
+const x = useMotionValue(0), y = useMotionValue(0);
+const sx = useSpring(x, { stiffness: 150, damping: 15 });
+const sy = useSpring(y, { stiffness: 150, damping: 15 });
+// onPointerMove: x.set((e.clientX - rect.x - rect.width / 2) * 0.3); onPointerLeave: x.set(0)
+<motion.button style={{ x: sx, y: sy }} />
+```
+
+## 7. Micro-interactions
+
+- Button physics: hover `translateY(-2px)` or `scale(1.02-1.05)` at 200ms `--ease-out-quart`; press `translateY(2px)` or `scale(0.98)` at 100ms. Hover must move or reveal something — a bare color dim is not a state.
+- Card image hover: scale the image inside an `overflow-hidden` container (`group-hover:scale-105 duration-700 ease-out`) — the container never grows.
+- Skeletons over spinners; shimmer via a translating gradient on `transform`, not `background-position`.
+- Perpetual ambient motion (mesh blobs, grain drift) at `MOTION > 5`: opacity 0.02-0.04, duration 20s+, on a `position: fixed; pointer-events: none` layer.
+
+## 8. Safety & performance (non-negotiable)
+
+- **Reveal safety**: content is visible by default; animation enhances it. Never gate visibility on a class-toggled transition — transitions pause in hidden tabs and headless renderers, and the section ships blank. Pattern: base styles = final state; JS adds the `from` state then animates back, so no-JS still renders.
+- **Reduced motion**, required for every animated build:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+  For scroll narratives, provide a crossfade or static alternative, not just disabled motion.
+- Animate `transform` / `opacity` / `color` / `box-shadow` only. Expansion: `grid-template-rows: 0fr → 1fr` or FLIP — never animate `width/height/top/left/margin`. Blur, `backdrop-filter`, `clip-path`, and mask are allowed as premium materials when bounded to small areas and verified smooth in-browser.
+- `will-change` on demand (set before, remove after) — never page-wide.
+- Off-screen animation causes horizontal scrollbars: wrap the page in `overflow-x: hidden` on the outermost container AND verify at 375px.
+- Motion claimed = motion shown: if the build advertises scroll animation, eyeball it in a browser before reporting done.
+
+## 9. Anti-pattern checklist
+
+Fail any of these → fix before delivering:
+
+- [ ] Same fade-up entrance on every section
+- [ ] `transition: all`, `linear` UI easing, bounce/elastic easing
+- [ ] Scroll listener or `useState` driving continuous animation
+- [ ] Pinned section with `start` other than `"top top"`
+- [ ] Reveal that hides content until JS runs
+- [ ] Missing `prefers-reduced-motion` handling
+- [ ] Animating layout properties (width/height/top/left)
+- [ ] Stagger sequence longer than 500ms total
+- [ ] More than one marquee; GSAP and Motion mixed in one tree
+- [ ] Horizontal scrollbar at any viewport caused by off-screen elements

package/skills/frontend-design/references/technical-accessibility.md

@@ -0,0 +1,118 @@
+# Accessibility Checks
+
+WCAG compliance and accessibility guidelines for generated assets.
+
+## Text Overlay Readability
+
+### Color Contrast Ratios
+- **WCAG AA**: 4.5:1 for normal text, 3:1 for large text
+- **WCAG AAA**: 7:1 for normal text, 4.5:1 for large text
+
+### Testing Requirements
+- Test across image variations
+- Consider adding gradient overlays in code
+- Add text shadows for increased legibility
+
+### Alt Text Guidelines
+- Describe the asset's purpose and mood
+- Don't repeat visible text
+- Keep concise (150 characters max)
+
+## CSS Techniques for Accessibility
+
+### Gradient Overlay for Text Readability
+```css
+.hero {
+  position: relative;
+  background-image: url('hero.webp');
+}
+.hero::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(0,0,0,0.3) 0%,
+    rgba(0,0,0,0.6) 100%
+  );
+}
+```
+
+### Text Shadow for Contrast
+```css
+.hero-text {
+  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+}
+```
+
+### Ensure Minimum Contrast
+```css
+.hero-cta {
+  background: var(--color-primary-600);
+  color: white; /* Ensure 4.5:1 contrast */
+}
+```
+
+## Integration Testing Analysis
+
+Analyze how asset works with UI elements:
+
+```bash
+npx -y -p @mrgoonie/multix@0.2.0 multix gemini analyze \
+  --files docs/assets/hero-with-text-overlay.png \
+  --prompt "Analyze this design asset with UI elements overlaid:
+
+1. Text Readability: Can all text be read clearly?
+2. Contrast Issues: Identify any WCAG violations
+3. Visual Hierarchy: Do buttons and CTAs stand out?
+4. Spacing Problems: Any crowding or poor breathing room?
+5. Responsive Concerns: Will this work on mobile at 9:16?
+
+Provide specific recommendations for adjustments." \
+  --output docs/assets/integration-analysis.md \
+  --model gemini-2.5-flash
+```
+
+## Next.js Integration Example
+
+```tsx
+// app/components/Hero.tsx
+import Image from 'next/image'
+
+export function Hero() {
+  return (
+    <section className="relative h-screen">
+      {/* Background image with optimization */}
+      <Image
+        src="/assets/hero-desktop.webp"
+        alt="Minimalist desert landscape"
+        fill
+        priority
+        quality={85}
+        className="object-cover"
+        sizes="100vw"
+      />
+
+      {/* Gradient overlay for text readability */}
+      <div className="absolute inset-0 bg-gradient-to-b from-black/30 to-black/60" />
+
+      {/* Content */}
+      <div className="relative z-10 flex h-full items-center justify-center">
+        <h1 className="text-6xl font-bold text-white drop-shadow-lg">
+          Your Headline
+        </h1>
+      </div>
+    </section>
+  )
+}
+```
+
+## Common Issues
+
+### Issue: Poor Text Overlay Readability
+**Symptoms**: Text hard to read over generated background
+**Solutions**:
+- Add CSS gradient overlay (see above)
+- Regenerate with "clean composition for text overlay" in prompt
+- Use darker/lighter areas strategically
+- Add text shadows or backdrop-blur

package/skills/frontend-design/references/technical-best-practices.md

@@ -0,0 +1,97 @@
+# Best Practices Checklists
+
+Quality gates and checklists for asset generation workflows.
+
+## Asset Generation Workflow
+
+### Before Generating Assets
+- [ ] Defined clear aesthetic direction from design brief
+- [ ] Extracted color palette and typography character
+- [ ] Identified asset purpose and integration context
+- [ ] Considered accessibility and text overlay needs
+
+### During Generation
+- [ ] Crafted design-driven, contextual prompt
+- [ ] Selected appropriate model and quality level
+- [ ] Specified correct aspect ratio for use case
+- [ ] Generated multiple variations if exploring
+
+### After Generation
+- [ ] Ran comprehensive visual analysis (score ≥ 7/10)
+- [ ] Extracted exact color palette with hex codes
+- [ ] Compared multiple variations and selected best
+- [ ] Tested with overlaid text/UI elements
+- [ ] Optimized file size for web performance
+- [ ] Created responsive variants if needed
+- [ ] Documented asset usage and guidelines
+
+## Design Guideline Extraction Workflow
+
+### When Analyzing Existing Designs
+- [ ] Captured high-quality reference screenshots
+- [ ] Ran comprehensive design analysis with structured prompts
+- [ ] Extracted specific values (hex codes, px sizes, ms timings)
+- [ ] Analyzed multiple screens for pattern consistency
+- [ ] Validated font predictions against Google Fonts
+- [ ] Documented findings in actionable format
+- [ ] Created CSS variable specifications
+- [ ] Saved extracted guidelines in project docs/
+
+## Quality Gates
+
+### Never Proceed to Integration Without
+- [ ] Visual analysis score ≥ 7/10
+- [ ] Extracted color palette documented
+- [ ] Accessibility contrast checks passed
+- [ ] Responsive variants generated
+- [ ] File optimization completed
+- [ ] Asset usage guidelines documented
+
+## Final Checklist
+
+Before considering any asset "done":
+- [ ] Generated with design-driven prompt (not generic)
+- [ ] Analyzed and scored ≥ 7/10
+- [ ] Extracted color palette for CSS implementation
+- [ ] Tested with UI overlays for readability
+- [ ] Optimized for web (WebP/JPEG)
+- [ ] Created responsive variants
+- [ ] Documented usage guidelines
+- [ ] Accessibility checks passed (contrast, alt text)
+- [ ] Integrated into frontend with proper optimization
+
+## Common Issues & Solutions
+
+### Issue 1: Generated Asset Too Generic
+**Symptoms**: Asset looks like stock photography, lacks design character
+**Solution**:
+- Refine prompt with specific aesthetic movements
+- Reference artists/designers/styles explicitly
+- Use more distinctive color directions
+- Add contextual details that make it unique
+
+### Issue 2: Inconsistent Design Language
+**Symptoms**: Each generated asset feels unrelated
+**Solution**:
+- Extract and document design system from first successful generation
+- Reuse color palette keywords in all subsequent prompts
+- Maintain consistent aesthetic direction across generations
+- Reference previous successful assets in new prompts
+
+### Issue 3: Low Analysis Scores
+**Symptoms**: Consistently getting scores < 7/10
+**Solutions**:
+- Review evaluation criteria—are they realistic?
+- Study high-scoring designs for patterns
+- Use design extraction on inspiration to learn what works
+- Iterate prompt with specific improvements from analysis
+
+### Issue 4: Slow Generation Times
+**Symptoms**: Waiting too long for results
+**Solutions**:
+- Use fast model for exploration phase
+- Generate in batches rather than sequentially
+- Reserve ultra model only for final production assets
+- Run analysis while next generation processes
+
+**Remember**: Design first, generate second. Context is king. Iterate ruthlessly. Analysis is mandatory. Demand specifics, not generalities.