npm - @oriro/orirocli - Versions diffs - 0.1.0 - Mend

@oriro/orirocli 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1149) hide show

package/skills/craft/uipm-design/references/social-photos-design.md ADDED Viewed

@@ -0,0 +1,353 @@
+# Social Photos Design Guide
+Design social media images via HTML/CSS rendering + screenshot export. Orchestrates `ui-ux-pro-max`, `brand`, `design-system`, and `chrome-devtools` skills.
+## Platform Sizes
+| Platform  | Type       | Size (px)   | Aspect  |
+| --------- | ---------- | ----------- | ------- |
+| Instagram | Post       | 1080 x 1080 | 1:1     |
+| Instagram | Story/Reel | 1080 x 1920 | 9:16    |
+| Instagram | Carousel   | 1080 x 1350 | 4:5     |
+| Facebook  | Post       | 1200 x 630  | ~1.9:1  |
+| Facebook  | Story      | 1080 x 1920 | 9:16    |
+| Twitter/X | Post       | 1200 x 675  | 16:9    |
+| Twitter/X | Card       | 800 x 418   | ~1.91:1 |
+| LinkedIn  | Post       | 1200 x 627  | ~1.91:1 |
+| LinkedIn  | Article    | 1200 x 644  | ~1.86:1 |
+| Pinterest | Pin        | 1000 x 1500 | 2:3     |
+| YouTube   | Thumbnail  | 1280 x 720  | 16:9    |
+| TikTok    | Cover      | 1080 x 1920 | 9:16    |
+| Threads   | Post       | 1080 x 1080 | 1:1     |
+## Workflow
+### Step 1: Activate Project Management
+Invoke `project-management` skill to create persistent TODO tasks via Claude's native task orchestration. Break down into:
+- Requirement analysis task
+- Idea generation task(s)
+- HTML design task(s) — can parallelize per size/variant
+- Screenshot export task(s) — can parallelize per file
+- Report generation task
+Spawn parallel subagents for independent tasks (e.g., multiple HTML files for different sizes).
+### Step 2: Analyze Requirements
+Parse user input for:
+- **Subject/topic** — what the social photo represents
+- **Target platforms** — which sizes needed (default: Instagram Post 1:1 + Story 9:16)
+- **Visual style** — minimalist, bold, gradient, photo-based, etc.
+- **Brand context** — read from `docs/brand-guidelines.md` if exists
+- **Content elements** — headline, subtext, CTA, images, icons
+- **Quantity** — how many variations (default: 3)
+### Step 3: Generate Ideas
+Create 3-5 concept ideas that:
+- Match the input prompt/requirements
+- Consider platform-specific best practices
+- Vary in composition, color, typography approach
+- Align with brand guidelines if available
+Present ideas to user via `AskUserQuestion` for approval before designing.
+### Step 4: Design HTML Files
+Activate these skills in sequence:
+1. **`/ckm:brand`** — Extract brand colors, fonts, voice from user's project
+2. **`/ckm:design-system`** — Get design tokens (spacing, typography scale, color palette)
+3. **Randomly invoke ONE of:** `/ck:ui-ux-pro-max` OR `/ck:frontend-design` — for layout, hierarchy, visual balance. Pick one at random each run for design variety.
+For each approved idea + each target size, create an HTML file:
+```
+output/social-photos/
+├── idea-1-instagram-post-1080x1080.html
+├── idea-1-instagram-story-1080x1920.html
+├── idea-2-instagram-post-1080x1080.html
+├── idea-2-instagram-story-1080x1920.html
+└── ...
+```
+#### HTML Design Rules
+- **Viewport** — Set exact pixel dimensions matching target size
+- **Self-contained** — Inline all CSS, embed fonts via Google Fonts CDN
+- **No scrolling** — Everything fits in one viewport
+- **High contrast** — Text readable at thumbnail size
+- **Brand-aligned** — Use extracted brand colors/fonts
+- **Safe zones** — Critical content within central 80% area
+- **Typography** — Min 24px for headlines, min 16px for body at 1080px width
+- **Visual hierarchy** — One focal point, clear reading flow
+#### HTML Template Structure
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width={WIDTH}, initial-scale=1.0" />
+    <link href="https://fonts.googleapis.com/css2?family={FONT}&display=swap" rel="stylesheet" />
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        width: {WIDTH}px;
+        height: {HEIGHT}px;
+        overflow: hidden;
+        font-family: '{FONT}', sans-serif;
+      }
+      .canvas {
+        width: {WIDTH}px;
+        height: {HEIGHT}px;
+        position: relative;
+        /* Background: gradient, solid, or image */
+      }
+      /* Design tokens from brand/design-system */
+    </style>
+  </head>
+  <body>
+    <div class="canvas">
+      <!-- Content layers -->
+    </div>
+  </body>
+</html>
+```
+### Step 5: Screenshot Export
+Use Chrome headless, `chrome-devtools` skill, or Playwright/Puppeteer to capture exact-size screenshots.
+**IMPORTANT:** Always add a delay (3-5s) after page load for fonts/images to fully render before capture.
+#### Option A: Chrome Headless CLI (Recommended — zero dependencies)
+```bash
+CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+DELAY=5  # seconds for fonts/images to load
+"$CHROME" \
+  --headless \
+  --disable-gpu \
+  --no-sandbox \
+  --hide-scrollbars \
+  --window-size="${WIDTH},${HEIGHT}" \
+  --virtual-time-budget=$((DELAY * 1000)) \
+  --screenshot="output.png" \
+  "file:///path/to/file.html"
+```
+Key flags:
+- `--virtual-time-budget=5000` — waits 5s virtual time for assets (Google Fonts, images) to load
+- `--hide-scrollbars` — prevents scrollbar artifacts in screenshots
+- `--window-size=WxH` — sets exact pixel dimensions
+#### Option B: chrome-devtools skill
+Invoke `/chrome-devtools` with instructions to:
+1. Open each HTML file in browser
+2. Set viewport to exact target dimensions
+3. Wait 3-5s for fonts/images to fully load
+4. Screenshot full page to PNG
+5. Save to `output/social-photos/exports/`
+#### Option C: Playwright script
+```javascript
+const { chromium } = require("playwright");
+async function captureScreenshots(htmlFiles) {
+  const browser = await chromium.launch();
+  for (const file of htmlFiles) {
+    const [width, height] = file
+      .match(/(\d+)x(\d+)/)
+      .slice(1)
+      .map(Number);
+    const page = await browser.newPage();
+    await page.setViewportSize({ width, height });
+    await page.goto(`file://${file}`, { waitUntil: "networkidle" });
+    // Wait for fonts/images to fully render
+    await page.waitForTimeout(3000);
+    const outputPath = file
+      .replace(".html", ".png")
+      .replace("social-photos/", "social-photos/exports/");
+    await page.screenshot({ path: outputPath, type: "png" });
+    await page.close();
+  }
+  await browser.close();
+}
+```
+#### Option D: Puppeteer script
+```javascript
+const puppeteer = require("puppeteer");
+async function captureScreenshots(htmlFiles) {
+  const browser = await puppeteer.launch();
+  for (const file of htmlFiles) {
+    const [width, height] = file
+      .match(/(\d+)x(\d+)/)
+      .slice(1)
+      .map(Number);
+    const page = await browser.newPage();
+    await page.setViewport({ width, height, deviceScaleFactor: 2 }); // 2x for retina
+    await page.goto(`file://${file}`, { waitUntil: "networkidle0" });
+    // Wait for fonts/images to fully render
+    await new Promise((r) => setTimeout(r, 3000));
+    const outputPath = file
+      .replace(".html", ".png")
+      .replace("social-photos/", "social-photos/exports/");
+    await page.screenshot({ path: outputPath, type: "png" });
+    await page.close();
+  }
+  await browser.close();
+}
+```
+**IMPORTANT:** Use `deviceScaleFactor: 2` for retina-quality output (Puppeteer only).
+### Step 6: Verify & Fix Designs
+Use Chrome MCP or `chrome-devtools` skill to visually inspect each exported PNG:
+1. Open exported screenshots and check for layout/styling issues
+2. Verify: fonts rendered correctly, colors match brand, text readable at thumbnail size
+3. Check: no overflow, no cut-off content, safe zones respected, visual hierarchy clear
+4. If issues found → fix HTML source → re-export screenshot → verify again
+5. Repeat until all designs pass visual QA
+**Common issues to check:**
+- Fonts not loaded (fallback to system fonts)
+- Text overflow or clipping
+- Elements outside safe zone (central 80%)
+- Low contrast text (below WCAG AA 4.5:1)
+- Misaligned elements or broken layouts
+### Step 7: Generate Summary Report
+Save report to `plans/reports/` with naming pattern from session hooks.
+Report structure:
+```markdown
+# Social Photos Design Report
+## Overview
+- Prompt/requirements: {original input}
+- Platforms: {target platforms}
+- Variations: {count}
+- Style: {chosen style}
+## Ideas Generated
+1. **{Idea name}** — {brief description, rationale}
+2. ...
+## Design Decisions
+- Color palette: {colors used, why}
+- Typography: {fonts, sizes, why}
+- Layout: {composition approach, why}
+- Brand alignment: {how brand guidelines influenced design}
+## Output Files
+| File                   | Size  | Platform   | Preview       |
+| ---------------------- | ----- | ---------- | ------------- |
+| exports/{filename}.png | {WxH} | {platform} | {description} |
+## Why This Works
+- {Platform-specific reasoning}
+- {Brand alignment reasoning}
+- {Visual hierarchy reasoning}
+- {Engagement potential reasoning}
+## Recommendations
+- {A/B test suggestions}
+- {Platform-specific tips}
+- {Iteration opportunities}
+```
+### Step 8: Organize Output
+Invoke `assets-organizing` skill to organize all output files and reports:
+- Move/copy exported PNGs to proper asset directories
+- Ensure reports are in `plans/reports/` with correct naming
+- Clean up intermediate HTML files if requested
+- Tag outputs with metadata (platform, size, concept name)
+## Design Best Practices
+### Platform-Specific Tips
+- **Instagram** — Visual-first, minimal text (<20%), strong colors, lifestyle feel
+- **Facebook** — Informative, can have more text, eye-catching in feed
+- **Twitter/X** — Bold headlines, contrast for dark/light mode, clear message
+- **LinkedIn** — Professional, clean, data-driven visuals, thought leadership
+- **Pinterest** — Vertical format, text overlay on images, how-to style
+- **YouTube** — Face close-ups perform best, bright colors, readable at small size
+- **TikTok** — Trendy, energetic, bold typography, youth-oriented
+### Art Direction Styles (Reuse from Banner)
+| Style             | Best For              | Key Elements                                 |
+| ----------------- | --------------------- | -------------------------------------------- |
+| Minimalist        | SaaS, tech, luxury    | Whitespace, single accent color, clean type  |
+| Bold Typography   | Announcements, quotes | Large type, high contrast, minimal imagery   |
+| Gradient Mesh     | Modern brands, apps   | Fluid color transitions, floating elements   |
+| Photo-Based       | Lifestyle, e-commerce | Hero image, subtle overlay, text on image    |
+| Geometric         | Tech, fintech         | Shapes, patterns, structured layouts         |
+| Glassmorphism     | SaaS, modern apps     | Frosted glass, blur effects, transparency    |
+| Flat Illustration | Education, health     | Custom illustrations, friendly, approachable |
+| Duotone           | Creative, editorial   | Two-color treatment on photos                |
+| Collage           | Fashion, culture      | Mixed media, overlapping elements            |
+| 3D/Isometric      | Tech, product         | Depth, shadows, modern perspective           |
+### Color & Contrast
+- Ensure WCAG AA contrast ratio (4.5:1 min) for all text
+- Test designs at 50% size to verify readability
+- Consider platform dark/light mode compatibility
+- Use brand primary color as dominant, secondary as accent
+### Typography Hierarchy
+| Element     | Min Size (at 1080px) | Weight        |
+| ----------- | -------------------- | ------------- |
+| Headline    | 48px                 | Bold/Black    |
+| Subheadline | 32px                 | Semibold      |
+| Body        | 24px                 | Regular       |
+| Caption     | 18px                 | Regular/Light |
+| CTA         | 28px                 | Bold          |
+## Security & Scope
+This sub-skill handles social media image design only. Does NOT handle:
+- Video content creation
+- Animation/motion graphics
+- Print production files (CMYK, bleed)
+- Direct social media posting/scheduling
+- AI image generation (use `ai-artist` skill for that)

package/skills/craft/uipm-design/scripts/cip/core.py ADDED Viewed

@@ -0,0 +1,215 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+CIP Design Core - BM25 search engine for Corporate Identity Program design guidelines
+"""
+import csv
+import re
+from pathlib import Path
+from math import log
+from collections import defaultdict
+# ============ CONFIGURATION ============
+DATA_DIR = Path(__file__).parent.parent.parent / "data" / "cip"
+MAX_RESULTS = 3
+CSV_CONFIG = {
+    "deliverable": {
+        "file": "deliverables.csv",
+        "search_cols": ["Deliverable", "Category", "Keywords", "Description", "Mockup Context"],
+        "output_cols": ["Deliverable", "Category", "Keywords", "Description", "Dimensions", "File Format", "Logo Placement", "Color Usage", "Typography Notes", "Mockup Context", "Best Practices", "Avoid"]
+    },
+    "style": {
+        "file": "styles.csv",
+        "search_cols": ["Style Name", "Category", "Keywords", "Description", "Mood"],
+        "output_cols": ["Style Name", "Category", "Keywords", "Description", "Primary Colors", "Secondary Colors", "Typography", "Materials", "Finishes", "Mood", "Best For", "Avoid For"]
+    },
+    "industry": {
+        "file": "industries.csv",
+        "search_cols": ["Industry", "Keywords", "CIP Style", "Mood"],
+        "output_cols": ["Industry", "Keywords", "CIP Style", "Primary Colors", "Secondary Colors", "Typography", "Key Deliverables", "Mood", "Best Practices", "Avoid"]
+    },
+    "mockup": {
+        "file": "mockup-contexts.csv",
+        "search_cols": ["Context Name", "Category", "Keywords", "Scene Description"],
+        "output_cols": ["Context Name", "Category", "Keywords", "Scene Description", "Lighting", "Environment", "Props", "Camera Angle", "Background", "Style Notes", "Best For", "Prompt Modifiers"]
+    }
+}
+# ============ BM25 IMPLEMENTATION ============
+class BM25:
+    """BM25 ranking algorithm for text search"""
+    def __init__(self, k1=1.5, b=0.75):
+        self.k1 = k1
+        self.b = b
+        self.corpus = []
+        self.doc_lengths = []
+        self.avgdl = 0
+        self.idf = {}
+        self.doc_freqs = defaultdict(int)
+        self.N = 0
+    def tokenize(self, text):
+        """Lowercase, split, remove punctuation, filter short words"""
+        text = re.sub(r'[^\w\s]', ' ', str(text).lower())
+        return [w for w in text.split() if len(w) > 2]
+    def fit(self, documents):
+        """Build BM25 index from documents"""
+        self.corpus = [self.tokenize(doc) for doc in documents]
+        self.N = len(self.corpus)
+        if self.N == 0:
+            return
+        self.doc_lengths = [len(doc) for doc in self.corpus]
+        self.avgdl = sum(self.doc_lengths) / self.N
+        for doc in self.corpus:
+            seen = set()
+            for word in doc:
+                if word not in seen:
+                    self.doc_freqs[word] += 1
+                    seen.add(word)
+        for word, freq in self.doc_freqs.items():
+            self.idf[word] = log((self.N - freq + 0.5) / (freq + 0.5) + 1)
+    def score(self, query):
+        """Score all documents against query"""
+        query_tokens = self.tokenize(query)
+        scores = []
+        for idx, doc in enumerate(self.corpus):
+            score = 0
+            doc_len = self.doc_lengths[idx]
+            term_freqs = defaultdict(int)
+            for word in doc:
+                term_freqs[word] += 1
+            for token in query_tokens:
+                if token in self.idf:
+                    tf = term_freqs[token]
+                    idf = self.idf[token]
+                    numerator = tf * (self.k1 + 1)
+                    denominator = tf + self.k1 * (1 - self.b + self.b * doc_len / self.avgdl)
+                    score += idf * numerator / denominator
+            scores.append((idx, score))
+        return sorted(scores, key=lambda x: x[1], reverse=True)
+# ============ SEARCH FUNCTIONS ============
+def _load_csv(filepath):
+    """Load CSV and return list of dicts"""
+    with open(filepath, 'r', encoding='utf-8') as f:
+        return list(csv.DictReader(f))
+def _search_csv(filepath, search_cols, output_cols, query, max_results):
+    """Core search function using BM25"""
+    if not filepath.exists():
+        return []
+    data = _load_csv(filepath)
+    # Build documents from search columns
+    documents = [" ".join(str(row.get(col, "")) for col in search_cols) for row in data]
+    # BM25 search
+    bm25 = BM25()
+    bm25.fit(documents)
+    ranked = bm25.score(query)
+    # Get top results with score > 0
+    results = []
+    for idx, score in ranked[:max_results]:
+        if score > 0:
+            row = data[idx]
+            results.append({col: row.get(col, "") for col in output_cols if col in row})
+    return results
+def detect_domain(query):
+    """Auto-detect the most relevant domain from query"""
+    query_lower = query.lower()
+    domain_keywords = {
+        "deliverable": ["card", "letterhead", "envelope", "folder", "shirt", "cap", "badge", "signage", "vehicle", "car", "van", "stationery", "uniform", "merchandise", "packaging", "banner", "booth"],
+        "style": ["style", "minimal", "modern", "luxury", "vintage", "industrial", "elegant", "bold", "corporate", "organic", "playful"],
+        "industry": ["tech", "finance", "legal", "healthcare", "hospitality", "food", "fashion", "retail", "construction", "logistics"],
+        "mockup": ["mockup", "scene", "context", "photo", "shot", "lighting", "background", "studio", "lifestyle"]
+    }
+    scores = {domain: sum(1 for kw in keywords if kw in query_lower) for domain, keywords in domain_keywords.items()}
+    best = max(scores, key=scores.get)
+    return best if scores[best] > 0 else "deliverable"
+def search(query, domain=None, max_results=MAX_RESULTS):
+    """Main search function with auto-domain detection"""
+    if domain is None:
+        domain = detect_domain(query)
+    config = CSV_CONFIG.get(domain, CSV_CONFIG["deliverable"])
+    filepath = DATA_DIR / config["file"]
+    if not filepath.exists():
+        return {"error": f"File not found: {filepath}", "domain": domain}
+    results = _search_csv(filepath, config["search_cols"], config["output_cols"], query, max_results)
+    return {
+        "domain": domain,
+        "query": query,
+        "file": config["file"],
+        "count": len(results),
+        "results": results
+    }
+def search_all(query, max_results=2):
+    """Search across all domains and combine results"""
+    all_results = {}
+    for domain in CSV_CONFIG.keys():
+        result = search(query, domain, max_results)
+        if result.get("results"):
+            all_results[domain] = result["results"]
+    return all_results
+def get_cip_brief(brand_name, industry_query, style_query=None):
+    """Generate a comprehensive CIP brief for a brand"""
+    # Search industry
+    industry_results = search(industry_query, "industry", 1)
+    industry = industry_results.get("results", [{}])[0] if industry_results.get("results") else {}
+    # Search style (use industry style if not specified)
+    style_query = style_query or industry.get("CIP Style", "corporate minimal")
+    style_results = search(style_query, "style", 1)
+    style = style_results.get("results", [{}])[0] if style_results.get("results") else {}
+    # Get recommended deliverables for the industry
+    key_deliverables = industry.get("Key Deliverables", "").split()
+    deliverable_results = []
+    for d in key_deliverables[:5]:
+        result = search(d, "deliverable", 1)
+        if result.get("results"):
+            deliverable_results.append(result["results"][0])
+    return {
+        "brand_name": brand_name,
+        "industry": industry,
+        "style": style,
+        "recommended_deliverables": deliverable_results,
+        "color_system": {
+            "primary": style.get("Primary Colors", industry.get("Primary Colors", "")),
+            "secondary": style.get("Secondary Colors", industry.get("Secondary Colors", ""))
+        },
+        "typography": style.get("Typography", industry.get("Typography", "")),
+        "materials": style.get("Materials", ""),
+        "finishes": style.get("Finishes", "")
+    }