@hienlh/ppm 0.9.80 → 0.9.81

package/.opencode/skills/chrome-devtools/scripts/select-ref.js

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+/**
+ * Select and interact with elements by ref from ARIA snapshot
+ * Usage: node select-ref.js --ref e5 --action click
+ *        node select-ref.js --ref e10 --action fill --value "text"
+ *        node select-ref.js --ref e3 --action screenshot --output element.png
+ *
+ * Actions:
+ *   click       - Click the element
+ *   fill        - Fill input with --value
+ *   screenshot  - Take screenshot of element
+ *   text        - Get text content
+ *   focus       - Focus the element
+ *   hover       - Hover over element
+ *
+ * Refs are obtained from aria-snapshot.js output (e.g., [ref=e5])
+ *
+ * Session behavior:
+ *   By default, browser stays running for session persistence
+ *   Use --close true to fully close browser
+ */
+import { getBrowser, getPage, closeBrowser, disconnectBrowser, parseArgs, outputJSON, outputError } from './lib/browser.js';
+import fs from 'fs/promises';
+import path from 'path';
+
+async function selectRef() {
+  const args = parseArgs(process.argv.slice(2));
+
+  if (!args.ref) {
+    outputError(new Error('--ref is required (e.g., --ref e5)'));
+    return;
+  }
+
+  if (!args.action) {
+    outputError(new Error('--action is required (click, fill, screenshot, text, focus, hover)'));
+    return;
+  }
+
+  try {
+    const browser = await getBrowser({
+      headless: args.headless !== 'false'
+    });
+
+    const page = await getPage(browser);
+
+    // Get element by ref from window.__chromeDevToolsRefs
+    const element = await page.evaluateHandle((ref) => {
+      const refs = window.__chromeDevToolsRefs;
+      if (!refs) {
+        throw new Error('No refs available. Run aria-snapshot.js first to generate refs.');
+      }
+      const el = refs.get(ref);
+      if (!el) {
+        throw new Error(`Ref "${ref}" not found. Available refs: ${Array.from(refs.keys()).join(', ')}`);
+      }
+      return el;
+    }, args.ref);
+
+    const elementHandle = element.asElement();
+    if (!elementHandle) {
+      throw new Error(`Could not get element handle for ref "${args.ref}"`);
+    }
+
+    let result = {
+      success: true,
+      ref: args.ref,
+      action: args.action
+    };
+
+    // Perform action
+    switch (args.action) {
+      case 'click':
+        await elementHandle.click();
+        result.message = 'Element clicked';
+        break;
+
+      case 'fill':
+        if (!args.value && args.value !== '') {
+          throw new Error('--value is required for fill action');
+        }
+        await elementHandle.click({ clickCount: 3 }); // Select all
+        await elementHandle.type(args.value);
+        result.message = 'Element filled';
+        result.value = args.value;
+        break;
+
+      case 'screenshot':
+        if (!args.output) {
+          throw new Error('--output is required for screenshot action');
+        }
+        const outputDir = path.dirname(args.output);
+        await fs.mkdir(outputDir, { recursive: true });
+        await elementHandle.screenshot({ path: args.output });
+        result.output = path.resolve(args.output);
+        result.message = 'Screenshot saved';
+        break;
+
+      case 'text':
+        const text = await page.evaluate(el => el.textContent?.trim(), elementHandle);
+        result.text = text;
+        break;
+
+      case 'focus':
+        await elementHandle.focus();
+        result.message = 'Element focused';
+        break;
+
+      case 'hover':
+        await elementHandle.hover();
+        result.message = 'Hovering over element';
+        break;
+
+      default:
+        throw new Error(`Unknown action: ${args.action}. Valid actions: click, fill, screenshot, text, focus, hover`);
+    }
+
+    outputJSON(result);
+
+    // Default: disconnect to keep browser running for session persistence
+    // Use --close true to fully close browser
+    if (args.close === 'true') {
+      await closeBrowser();
+    } else {
+      await disconnectBrowser();
+    }
+  } catch (error) {
+    outputError(error);
+  }
+}
+
+selectRef();

package/.opencode/skills/chrome-devtools/scripts/snapshot.js

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+/**
+ * Get DOM snapshot with selectors
+ * Usage: node snapshot.js [--url https://example.com] [--output snapshot.json]
+ */
+import { getBrowser, getPage, closeBrowser, disconnectBrowser, parseArgs, outputJSON, outputError } from './lib/browser.js';
+import fs from 'fs/promises';
+
+async function snapshot() {
+  const args = parseArgs(process.argv.slice(2));
+
+  try {
+    const browser = await getBrowser({
+      headless: args.headless !== 'false'
+    });
+
+    const page = await getPage(browser);
+
+    // Navigate if URL provided
+    if (args.url) {
+      await page.goto(args.url, {
+        waitUntil: args['wait-until'] || 'networkidle2'
+      });
+    }
+
+    // Get interactive elements with metadata
+    const elements = await page.evaluate(() => {
+      const interactiveSelectors = [
+        'a[href]',
+        'button',
+        'input',
+        'textarea',
+        'select',
+        '[onclick]',
+        '[role="button"]',
+        '[role="link"]',
+        '[contenteditable]'
+      ];
+
+      const elements = [];
+      const selector = interactiveSelectors.join(', ');
+      const nodes = document.querySelectorAll(selector);
+
+      nodes.forEach((el, index) => {
+        const rect = el.getBoundingClientRect();
+
+        // Generate unique selector
+        let uniqueSelector = '';
+        if (el.id) {
+          uniqueSelector = `#${el.id}`;
+        } else if (el.className) {
+          const classes = Array.from(el.classList).join('.');
+          uniqueSelector = `${el.tagName.toLowerCase()}.${classes}`;
+        } else {
+          uniqueSelector = el.tagName.toLowerCase();
+        }
+
+        elements.push({
+          index: index,
+          tagName: el.tagName.toLowerCase(),
+          type: el.type || null,
+          id: el.id || null,
+          className: el.className || null,
+          name: el.name || null,
+          value: el.value || null,
+          text: el.textContent?.trim().substring(0, 100) || null,
+          href: el.href || null,
+          selector: uniqueSelector,
+          xpath: getXPath(el),
+          visible: rect.width > 0 && rect.height > 0,
+          position: {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+          }
+        });
+      });
+
+      function getXPath(element) {
+        if (element.id) {
+          return `//*[@id="${element.id}"]`;
+        }
+        if (element === document.body) {
+          return '/html/body';
+        }
+        let ix = 0;
+        const siblings = element.parentNode?.childNodes || [];
+        for (let i = 0; i < siblings.length; i++) {
+          const sibling = siblings[i];
+          if (sibling === element) {
+            return getXPath(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix + 1) + ']';
+          }
+          if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
+            ix++;
+          }
+        }
+        return '';
+      }
+
+      return elements;
+    });
+
+    const result = {
+      success: true,
+      url: page.url(),
+      title: await page.title(),
+      elementCount: elements.length,
+      elements: elements
+    };
+
+    if (args.output) {
+      await fs.writeFile(args.output, JSON.stringify(result, null, 2));
+      outputJSON({
+        success: true,
+        output: args.output,
+        elementCount: elements.length
+      });
+    } else {
+      outputJSON(result);
+    }
+
+    // Default: disconnect to keep browser running for session persistence
+    // Use --close true to fully close browser
+    if (args.close === 'true') {
+      await closeBrowser();
+    } else {
+      await disconnectBrowser();
+    }
+  } catch (error) {
+    outputError(error);
+  }
+}
+
+snapshot();

package/.opencode/skills/chrome-devtools/scripts/ws-debug.js

@@ -0,0 +1,44 @@
+import { getBrowser, getPage, disconnectBrowser, outputJSON } from './lib/browser.js';
+
+async function debugWs() {
+  const browser = await getBrowser();
+  const page = await getPage(browser);
+
+  const logs = [];
+  const wsEvents = [];
+
+  // Capture console
+  page.on('console', msg => {
+    logs.push({ type: msg.type(), text: msg.text() });
+  });
+
+  // Monitor WebSocket via CDP
+  const client = await page.createCDPSession();
+  await client.send('Network.enable');
+
+  client.on('Network.webSocketCreated', e => wsEvents.push({ event: 'created', ...e }));
+  client.on('Network.webSocketWillSendHandshakeRequest', e => wsEvents.push({ event: 'handshake', ...e }));
+  client.on('Network.webSocketHandshakeResponseReceived', e => wsEvents.push({ event: 'response', ...e }));
+  client.on('Network.webSocketClosed', e => wsEvents.push({ event: 'closed', ...e }));
+  client.on('Network.webSocketFrameError', e => wsEvents.push({ event: 'error', ...e }));
+
+  await page.goto('http://localhost:5173', { waitUntil: 'networkidle0', timeout: 15000 });
+
+  // Wait for WS connections
+  await new Promise(r => setTimeout(r, 5000));
+
+  outputJSON({
+    success: true,
+    url: page.url(),
+    logs: logs.filter(l => l.text.toLowerCase().includes('websocket') || l.text.toLowerCase().includes('ws') || l.type === 'error'),
+    wsEvents
+  });
+
+  await disconnectBrowser();
+  process.exit(0);
+}
+
+debugWs().catch(e => {
+  console.error(JSON.stringify({ success: false, error: e.message }));
+  process.exit(1);
+});

package/.opencode/skills/chrome-devtools/scripts/ws-full-debug.js

@@ -0,0 +1,107 @@
+import { getBrowser, getPage, disconnectBrowser, outputJSON } from './lib/browser.js';
+
+async function debugWsFull() {
+  const browser = await getBrowser({ headless: false });
+  const page = await getPage(browser);
+
+  const logs = [];
+  const wsEvents = [];
+  const networkErrors = [];
+
+  // Capture ALL console messages
+  page.on('console', msg => {
+    logs.push({
+      type: msg.type(),
+      text: msg.text(),
+      location: msg.location()
+    });
+  });
+
+  // Capture page errors
+  page.on('pageerror', err => {
+    logs.push({ type: 'pageerror', text: err.message });
+  });
+
+  // Monitor WebSocket via CDP
+  const client = await page.createCDPSession();
+  await client.send('Network.enable');
+
+  client.on('Network.webSocketCreated', e => {
+    console.log('WS Created:', e.url);
+    wsEvents.push({ event: 'created', url: e.url, requestId: e.requestId });
+  });
+
+  client.on('Network.webSocketWillSendHandshakeRequest', e => {
+    console.log('WS Handshake Request:', e.requestId);
+    wsEvents.push({ event: 'handshake_request', requestId: e.requestId, request: e.request });
+  });
+
+  client.on('Network.webSocketHandshakeResponseReceived', e => {
+    console.log('WS Handshake Response:', e.response?.status);
+    wsEvents.push({
+      event: 'handshake_response',
+      requestId: e.requestId,
+      status: e.response?.status,
+      headers: e.response?.headers
+    });
+  });
+
+  client.on('Network.webSocketClosed', e => {
+    console.log('WS Closed:', e.requestId);
+    wsEvents.push({ event: 'closed', requestId: e.requestId });
+  });
+
+  client.on('Network.webSocketFrameError', e => {
+    console.log('WS Frame Error:', e.errorMessage);
+    wsEvents.push({ event: 'frame_error', requestId: e.requestId, error: e.errorMessage });
+  });
+
+  client.on('Network.webSocketFrameReceived', e => {
+    wsEvents.push({ event: 'frame_received', requestId: e.requestId, data: e.response?.payloadData?.substring(0, 200) });
+  });
+
+  client.on('Network.webSocketFrameSent', e => {
+    wsEvents.push({ event: 'frame_sent', requestId: e.requestId, data: e.response?.payloadData?.substring(0, 200) });
+  });
+
+  // Track failed requests
+  client.on('Network.loadingFailed', e => {
+    if (e.type === 'WebSocket') {
+      networkErrors.push({ requestId: e.requestId, error: e.errorText, canceled: e.canceled });
+    }
+  });
+
+  console.log('Navigating to app...');
+  await page.goto('http://localhost:5173', { waitUntil: 'networkidle0', timeout: 20000 });
+
+  console.log('Current URL:', page.url());
+
+  // Wait longer and collect events
+  console.log('Waiting 10s to collect WebSocket events...');
+  await new Promise(r => setTimeout(r, 10000));
+
+  // Filter for /ws connections only (not vite-hmr)
+  const appWsEvents = wsEvents.filter(e => e.url?.includes('/ws') && !e.url?.includes('token='));
+
+  outputJSON({
+    success: true,
+    url: page.url(),
+    appWsEvents,
+    allWsEvents: wsEvents,
+    networkErrors,
+    logs: logs.filter(l =>
+      l.text?.toLowerCase().includes('websocket') ||
+      l.text?.toLowerCase().includes('unauthorized') ||
+      l.text?.toLowerCase().includes('error') ||
+      l.type === 'error'
+    ).slice(0, 20)
+  });
+
+  await disconnectBrowser();
+  process.exit(0);
+}
+
+debugWsFull().catch(e => {
+  console.error(JSON.stringify({ success: false, error: e.message, stack: e.stack }));
+  process.exit(1);
+});

package/.opencode/skills/cip-design/.env.example

@@ -0,0 +1,6 @@
+# CIP Design Skill Environment Variables
+# Copy this file to .env and fill in your API key
+
+# Gemini API Key (required for image generation)
+# Get from: https://aistudio.google.com/apikey
+GEMINI_API_KEY=your-gemini-api-key-here

package/.opencode/skills/cip-design/SKILL.md

@@ -0,0 +1,161 @@
+---
+name: ckm:cip-design
+description: "Corporate Identity Program design with 50 deliverables, 20 styles, 20 industries. Generate CIP mockups with Gemini Nano Banana (Flash/Pro). Actions: design, create, generate brand identity. Deliverables: business card, letterhead, signage, vehicle, apparel, packaging. Styles: corporate, luxury, minimal, modern."
+argument-hint: "[deliverable or brand-element]"
+license: MIT
+dependencies:
+  - ai-multimodal  # For Gemini Nano Banana image generation
+metadata:
+  author: claudekit
+  version: "1.0.0"
+---
+
+# CIP Design - Corporate Identity Program Intelligence
+
+Comprehensive Corporate Identity Program (CIP) design system with 50+ deliverables, 20 design styles, 20 industry guides. Search design guidelines and generate mockups using Gemini Nano Banana (Flash/Pro) models.
+
+> **Note:** This skill uses `ai-multimodal` skill's Gemini integration for image generation with Nano Banana models (NOT Imagen).
+
+## When to Apply
+
+Activate when user requests:
+- Corporate identity or brand identity design
+- CIP/CI deliverable mockups (business cards, letterheads, signage, etc.)
+- Brand application guidelines
+- Vehicle branding, office signage, uniforms
+- Complete brand identity packages
+
+## Quick Reference
+
+### 1. Generate CIP Brief (RECOMMENDED START)
+
+```bash
+python3 ~/.opencode/skills/cip-design/scripts/search.py "tech startup" --cip-brief -b "BrandName"
+```
+
+Returns: Industry analysis, style recommendations, key deliverables.
+
+### 2. Search Specific Domains
+
+```bash
+# Search deliverables
+python3 ~/.opencode/skills/cip-design/scripts/search.py "business card letterhead" --domain deliverable
+
+# Search design styles
+python3 ~/.opencode/skills/cip-design/scripts/search.py "luxury premium elegant" --domain style
+
+# Search industry guidelines
+python3 ~/.opencode/skills/cip-design/scripts/search.py "hospitality hotel" --domain industry
+
+# Search mockup contexts
+python3 ~/.opencode/skills/cip-design/scripts/search.py "office reception" --domain mockup
+```
+
+### 3. Generate CIP Mockups with Gemini Nano Banana
+
+**RECOMMENDED: Use --logo for accurate brand mockups**
+
+```bash
+# Generate with brand logo (RECOMMENDED - uses image editing)
+python3 ~/.opencode/skills/cip-design/scripts/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
+
+# Generate full CIP set with logo
+python3 ~/.opencode/skills/cip-design/scripts/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
+
+# Use Pro model for higher quality / 4K text rendering
+python3 ~/.opencode/skills/cip-design/scripts/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
+
+# Custom deliverables with aspect ratio
+python3 ~/.opencode/skills/cip-design/scripts/generate.py --brand "GreenLeaf" --logo logo.png --industry "organic food" --deliverables "letterhead,packaging,vehicle" --ratio 16:9
+
+# Without logo (AI generates its own interpretation)
+python3 ~/.opencode/skills/cip-design/scripts/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt
+```
+
+**Models:**
+- `flash` (default): `gemini-2.5-flash-image` - Fast, cost-effective
+- `pro`: `gemini-3-pro-image-preview` - Quality, 4K text rendering
+
+**Image Editing Mode:**
+When `--logo` is provided, uses Gemini's text-and-image-to-image capability to incorporate your ACTUAL logo into mockups. Without `--logo`, AI generates its own brand interpretation.
+
+## Deliverable Categories
+
+| Category | Items |
+|----------|-------|
+| Core Identity | Logo, Logo Variations |
+| Stationery | Business Card, Letterhead, Envelope, Folder, Notebook, Pen |
+| Security/Access | ID Badge, Lanyard, Access Card |
+| Office Environment | Reception Signage, Wayfinding, Meeting Room Signs, Wall Graphics |
+| Apparel | Polo Shirt, T-Shirt, Cap, Jacket, Apron |
+| Promotional | Tote Bag, Gift Box, USB Drive, Water Bottle, Mug, Umbrella |
+| Vehicle | Car Sedan, Van, Truck |
+| Digital | Social Media, Email Signature, PowerPoint, Document Templates |
+| Product | Packaging Box, Labels, Tags, Retail Display |
+| Events | Trade Show Booth, Banner Stand, Table Cover, Backdrop |
+
+## Design Styles Quick Guide
+
+| Style | Colors | Best For |
+|-------|--------|----------|
+| Corporate Minimal | Navy, White, Blue | Finance, Legal, Consulting |
+| Modern Tech | Purple, Cyan, Green | Tech, Startups, SaaS |
+| Luxury Premium | Black, Gold, White | Fashion, Jewelry, Hotels |
+| Warm Organic | Brown, Green, Cream | Food, Organic, Artisan |
+| Bold Dynamic | Red, Orange, Black | Sports, Entertainment |
+
+## Workflow Example
+
+**User:** "Create a complete CIP for a luxury hotel called Grand Vista"
+
+1. Generate CIP brief:
+```bash
+python3 ~/.opencode/skills/cip-design/scripts/search.py "luxury hospitality hotel" --cip-brief -b "Grand Vista"
+```
+
+2. Generate key deliverables with logo (RECOMMENDED):
+```bash
+python3 ~/.opencode/skills/cip-design/scripts/generate.py --brand "Grand Vista" --logo /path/to/grandvista-logo.png --industry "hospitality" --style "luxury premium" --set
+```
+
+3. Or without logo (AI generates interpretation):
+```bash
+python3 ~/.opencode/skills/cip-design/scripts/generate.py --brand "Grand Vista" --industry "hospitality" --style "luxury premium" --set --no-logo-prompt
+```
+
+**Note:** If no logo exists, consider using the `logo-design` skill first to generate one.
+
+### 4. Render HTML Presentation (Final Step)
+
+Generate a professional HTML presentation from CIP mockups with detailed descriptions, concepts, and specifications.
+
+```bash
+# Generate HTML presentation from CIP images
+python3 ~/.opencode/skills/cip-design/scripts/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
+
+# Specify custom output path
+python3 ~/.opencode/skills/cip-design/scripts/render-html.py --brand "TopGroup" --industry "consulting" --images ./topgroup-cip --output presentation.html
+```
+
+**HTML Presentation Features:**
+- Hero section with brand name, industry, style, and mood
+- Individual deliverable cards with mockup images
+- Detailed descriptions: concept, purpose, specifications
+- Responsive design for desktop and mobile viewing
+- Dark theme professional aesthetic
+- Images embedded as base64 (single-file portable)
+
+## References
+
+- `references/deliverable-guide.md` - Detailed deliverable specifications
+- `references/style-guide.md` - Design style descriptions
+- `references/prompt-engineering.md` - AI generation prompts
+
+## Setup
+
+```bash
+export GEMINI_API_KEY="your-key"  # Get from https://aistudio.google.com/apikey
+pip install google-genai pillow
+```
+
+See `ai-multimodal` skill's `references/image-generation.md` for detailed Nano Banana documentation.

package/.opencode/skills/cip-design/data/deliverables.csv

@@ -0,0 +1,51 @@
+No,Deliverable,Category,Keywords,Description,Dimensions,File Format,Logo Placement,Color Usage,Typography Notes,Mockup Context,Best Practices,Avoid
+1,Primary Logo,Core Identity,logo main primary brand mark,Main logo used as primary brand identifier,Vector scalable,SVG AI EPS PNG,Center prominent,Full color palette,Primary typeface,Clean background product shots,Ensure clear space maintain proportions,Distortion crowding busy backgrounds
+2,Logo Variations,Core Identity,logo alternate secondary horizontal vertical,Alternative logo formats for different applications,Vector scalable,SVG AI EPS PNG,Context dependent,Mono color reverse,Consistent with primary,Various application contexts,Create horizontal vertical stacked icon versions,Inconsistent modifications unauthorized changes
+3,Business Card,Stationery,namecard card contact professional,Professional contact card with brand identity,3.5x2 inches 85x55mm,PDF AI print-ready,Front center or corner,Primary secondary colors,Name title contact details,Marble wood desk surface,Premium paper stock spot UV foil,Cluttered design too many fonts cheap paper
+4,Letterhead,Stationery,letter paper document official,Branded document paper for official correspondence,A4 Letter size,PDF AI Word template,Top header or corner,Subtle brand colors,Body text headers,Flat lay with pen envelope,Consistent margins proper hierarchy,Overpowering logo excessive graphics
+5,Envelope,Stationery,envelope mail correspondence,Branded envelopes for business mail,DL C4 C5 sizes,PDF AI print-ready,Flap or front corner,Primary brand color,Return address company name,Stacked with letterhead cards,Match letterhead design system,Misaligned printing poor paper quality
+6,Folder,Stationery,folder presentation document holder,Presentation folder for documents,A4 Letter pocket folder,PDF AI die-cut template,Front cover spine,Full brand colors,Company tagline contact,Business documents inside,Pockets die-cuts premium finish,Flimsy material poor construction
+7,Notebook,Stationery,notebook journal notepad branded,Branded notebooks for employees or gifts,A5 A6 sizes,Print cover design,Front cover emboss,Cover in brand colors,Logo minimal text,Desk flat lay with pen,Quality binding emboss or deboss,Cheap paper poor binding
+8,Pen,Promotional,pen writing instrument promo,Branded pens for promotional use,Standard pen dimensions,Vector for print,Barrel clip,Limited color 1-2,Logo only or tagline,Product shot lifestyle,Quality mechanism smooth writing,Cheap mechanism poor print
+9,ID Badge,Security Access,badge identification employee pass,Employee identification and access card,CR80 86x54mm,PDF AI template,Center or top,Photo area brand colors,Name department title,Lanyard neck office setting,Clear photo area security features,Poor photo quality cluttered design
+10,Lanyard,Security Access,lanyard neck strap badge holder,Neck strap for ID badges,20-25mm width,Vector repeat pattern,Continuous pattern,Primary brand color,Logo repeated or continuous,Worn with badge professional,Quality material comfortable width,Scratchy material cheap clips
+11,Access Card,Security Access,key card rfid access control,Electronic access control card,CR80 standard,PDF AI template,One side or both,Minimal brand colors,Card number access level,Security context door reader,Functional design clear hierarchy,Security info visible cluttered
+12,Reception Signage,Office Environment,lobby reception wall sign 3D,Main reception area brand signage,Custom based on wall,3D fabrication files,Center of wall,Backlit or dimensional,Logo only or with tagline,Modern office lobby interior,Backlit LED brushed metal acrylic,Poor lighting cheap materials dim
+13,Wayfinding Signage,Office Environment,directional signs navigation office,Interior navigation and directional signs,Various sizes,AI vector templates,Consistent placement,Secondary palette,Clear readable fonts,Hallway corridor office,Consistent system clear hierarchy,Inconsistent styles poor visibility
+14,Meeting Room Signs,Office Environment,conference room name plate door,Meeting room identification signs,A5 A6 custom,AI templates,Center or left,Accent colors,Room name capacity,Glass door or wall mounted,Digital or static consistent style,Hard to read small text
+15,Wall Graphics,Office Environment,mural wall art brand values,Large scale wall murals and graphics,Wall dimensions,Large format print,Full wall coverage,Full palette gradients,Mission values quotes,Open office space,Inspiring messaging quality install,Peeling edges poor resolution
+16,Window Graphics,Office Environment,glass frosted privacy film,Frosted or printed window graphics,Window dimensions,Vector cut files,Privacy zones branding,Frosted with logo,Minimal text,Glass partitions entrance,Privacy function brand presence,Blocking natural light cluttered
+17,Desk Accessories,Office Environment,desk organizer mousepad coaster,Branded desk items for employees,Various sizes,Print-ready files,Product surface,Subtle branding,Logo tagline,Desktop lifestyle shot,Useful quality materials,Purely decorative poor quality
+18,Polo Shirt,Apparel,polo uniform employee clothing,Branded polo shirts for staff,S M L XL XXL,Embroidery vector,Left chest back,Garment brand colors,Logo small embroidered,Folded or worn lifestyle,Quality fabric embroidery,Cheap fabric poor embroidery
+19,T-Shirt,Apparel,tshirt casual staff event,Casual branded t-shirts,S M L XL XXL,Screen print vector,Center chest back,Limited colors 1-3,Logo tagline graphic,Flat lay or worn model,Quality cotton proper sizing,Cheap material design too large
+20,Cap Hat,Apparel,cap hat headwear baseball,Branded caps and hats,One size adjustable,Embroidery vector,Front center,1-2 colors embroidery,Logo small,Product shot worn,Quality embroidery structured cap,Cheap construction poor embroidery
+21,Jacket,Apparel,jacket outerwear coat uniform,Branded jackets for outdoor staff,S M L XL XXL,Embroidery vector,Left chest back,Garment brand colors,Logo department,Lifestyle outdoor shot,Quality material practical design,Impractical poor quality
+22,Apron,Apparel,apron uniform service hospitality,Branded aprons for service staff,Standard adjustable,Screen print embroidery,Center chest,Workwear colors,Logo business name,Hospitality setting,Durable material functional pockets,Poor material impractical design
+23,Tote Bag,Promotional,bag shopping eco reusable,Branded reusable shopping bags,Various sizes,Screen print vector,Center both sides,1-2 colors typically,Logo tagline,Lifestyle shopping context,Quality canvas sturdy handles,Cheap material weak handles
+24,Paper Bag,Promotional,shopping bag retail paper,Retail paper shopping bags,Small medium large,Print template,Side and front,Full color or kraft,Logo website,Retail product context,Quality paper rope or ribbon handles,Cheap paper weak handles
+25,Gift Box,Promotional,packaging box gift premium,Premium gift packaging boxes,Various sizes,Die-cut templates,Lid or all sides,Brand colors patterns,Logo minimal text,Unboxing product shot,Quality board magnetic closure,Cheap cardboard poor construction
+26,USB Drive,Promotional,flash drive storage tech promo,Branded USB flash drives,Standard USB size,Print area template,Drive surface,Limited 1-2 colors,Logo only,Product shot tech context,Quality drive sufficient storage,Cheap mechanism low storage
+27,Water Bottle,Promotional,bottle drink drinkware hydration,Branded water bottles,500ml 750ml 1L,Print wrap template,Wrap or pad print,Bottle brand colors,Logo tagline,Lifestyle fitness outdoor,Quality insulated BPA-free,Cheap plastic leaking poor insulation
+28,Mug Cup,Promotional,mug cup drinkware coffee,Branded mugs and cups,Standard 11oz 15oz,Sublimation vector,Wrap or one side,Full color sublimation,Logo tagline graphic,Lifestyle office desk,Quality ceramic dishwasher safe,Cheap material poor print durability
+29,Umbrella,Promotional,umbrella rain promotional,Branded umbrellas,Standard compact golf,Panel print template,Panels or handle,Limited panel colors,Logo repeated,Lifestyle rainy weather,Quality mechanism wind resistant,Cheap mechanism breaks easily
+30,Car Sedan,Vehicle,company car sedan branding,Sedan vehicle branding wrap,Vehicle template,Vehicle wrap template,Doors hood trunk,Partial or full wrap,Logo contact URL,Side angle motion blur,Professional installation quality vinyl,Amateur install bubbles peeling
+31,Van,Vehicle,delivery van transport branding,Van and delivery vehicle branding,Vehicle template,Vehicle wrap template,All sides back,Bold visible colors,Logo contact services,Street delivery context,Maximum visibility contact info,Cluttered hard to read
+32,Truck,Vehicle,truck lorry freight branding,Large truck and lorry branding,Vehicle template,Large format wrap,Sides rear trailer,High contrast visible,Logo contact large scale,Highway road context,High visibility fleet consistency,Inconsistent fleet poor visibility
+33,Social Media Profile,Digital,avatar profile picture social,Social media profile pictures,Various platform sizes,PNG JPG optimized,Center crop safe,Simplified for small,Logo icon only,Platform context preview,Recognizable at small size,Too detailed loses clarity
+34,Social Media Cover,Digital,banner cover header social,Social media cover and header images,Platform specific sizes,PNG JPG optimized,Safe zone placement,Full brand expression,Tagline campaign message,Platform context preview,Platform-specific safe zones,Text in unsafe crop zones
+35,Email Signature,Digital,email signature footer contact,Professional email signature,600px max width,HTML responsive,Left aligned,Limited colors web-safe,Name title contact links,Email client preview,Responsive clean links,Images blocked heavy files
+36,Website Favicon,Digital,favicon browser icon tab,Browser tab icon,16x16 32x32 ICO,ICO PNG SVG,Centered square,Simplified colors,Icon only,Browser tab context,Recognizable at tiny size,Too complex loses form
+37,PowerPoint Template,Digital,presentation slides deck,Branded presentation templates,16:9 4:3 widescreen,PPTX template,Footer header title,Full brand system,Heading body fonts,Presentation meeting context,Master slides consistent layouts,Inconsistent slides poor hierarchy
+38,Document Template,Digital,word document letterhead template,Branded document templates,A4 Letter,DOCX template,Header footer,Subtle consistent,Body heading styles,Document printed digital,Easy to use consistent,Hard to edit breaks formatting
+39,Invoice Template,Digital,invoice billing financial document,Branded invoice templates,A4 Letter,PDF XLSX template,Header corner,Professional minimal,Clear hierarchy amounts,Financial context payment,Clear totals payment details,Confusing layout unclear totals
+40,Packaging Box,Product,product box retail package,Product packaging boxes,Product specific,Dieline templates,Principal display panel,Retail appeal,Product name features,Retail shelf context,Stand out shelf appeal,Lost among competitors bland
+41,Packaging Label,Product,label sticker product tag,Product labels and stickers,Various sizes,Vector dieline,Product surface,Brand compliant,Product required info,Applied to product,Regulatory compliant appealing,Missing required info poor adhesion
+42,Product Tag,Product,hang tag swing tag retail,Hang tags and swing tags,Standard custom sizes,Die-cut template,Front centered,Brand colors,Product price info,Attached to product,Quality card stock string,Cheap card tears easily
+43,Retail Display,Product,POP display stand retail,Point of purchase displays,Custom dimensions,Structural design,Display surfaces,Bold attention-getting,Brand product promo,Retail store context,Sturdy eye-catching,Flimsy unstable falls apart
+44,Trade Show Booth,Events,exhibition stand booth display,Trade show booth design,10x10 10x20 custom,Large format print,Backdrop walls,Bold visible colors,Company key messages,Exhibition hall context,Professional portable modular,Cheap materials hard to assemble
+45,Banner Stand,Events,roll up pull up banner,Retractable banner stands,80x200cm standard,Large format print,Full height center,Bold readable,Key message CTA,Event lobby entrance,Quality print mechanism,Flimsy curling edges poor mechanism
+46,Table Cover,Events,tablecloth throw event,Branded table covers,6ft 8ft standard,Fabric print,Front and sides,Full brand expression,Logo tagline contact,Event booth table,Wrinkle-resistant fitted,Wrinkles cheap fabric poor fit
+47,Backdrop,Events,media wall step repeat backdrop,Event backdrops and media walls,Custom event size,Large format print,Repeat pattern logo,Limited colors works on camera,Logo repeated pattern,Event photo opportunity,Photo-friendly repeat pattern,Random placement looks awkward
+48,Name Badge Event,Events,event badge conference delegate,Event name badges,CR80 custom sizes,Template design,Top with logo,Event brand colors,Name company title,Conference event context,Clear name large enough,Name too small hard to read
+49,Lanyard Event,Events,event lanyard conference sponsor,Event branded lanyards,20-25mm width,Repeat pattern,Continuous or repeat,Event sponsor colors,Event name sponsors,Worn at event,Quality material sponsor visibility,Scratchy poor print quality
+50,Certificate,Documents,certificate award achievement,Achievement and recognition certificates,A4 Letter,Print template,Top header,Gold premium accents,Achievement details,Framed or presented,Premium paper emboss seal,Cheap paper looks unofficial