--- name: generate-proposal description: Generate interactive HTML slide proposals (PPT-style). Supports `--language korean|english` (default `korean`). Korean mode = mixed (left-column titles stay English, only project-content variables translate). argument-hint: [--language korean|english] --- # Generate Proposal - Client Proposal HTML Generator Generate professional client proposals as **interactive HTML slide presentations (PPT-style)**. Language is controlled by the `--language` flag (see Step 1). `english` produces a fully-English deck. `korean` produces a **mixed Korean deck** — left-column section titles and all hardcoded boilerplate remain English, only the project-content `{{PLACEHOLDER}}` variables are filled in Korean. See "Mixed Korean Mode" section below for the exact scope. --- ## Step-by-Step Generation Process ### Step 1: Gather Information #### 1a. Parse `$ARGUMENTS` for the `--language` flag Syntax: `/generate-proposal [--language korean|english]` - Accepted values: `korean` | `english` (full words only). - If the flag is absent, set `LANGUAGE = korean`. - If the flag is present with an unrecognized value, stop and reply: > Unknown `--language` value. Use `--language korean` or `--language english`. Default is `korean` when omitted. - Store the resolved `LANGUAGE` for use in Step 3 and Step 4. #### 1b. Ask the user for required inputs Ask for these **required** inputs (if not already provided). Do **not** re-ask about language — it comes from the flag. | Input | Question | Default | |-------|----------|---------| | Client name | "What is the client company name?" | — | | Project name | "What is the project title?" | — | | Total cost | "What is the total project cost (USD)?" | — | | Key features | "List the key features of the project" | — | | Service flow | "Describe the user/service flow steps" | — | **Optional** (use your best judgment to fill these if user doesn't provide): - Admin features, Our comments, Tech stack, Timeline - Milestone breakdown (default: 30/30/40 split) - MVP vs Post-MVP feature grouping - Team composition for FAQ ### Step 2: Copy Template ```bash cp templates/proposal-template.html ".claude-project/proposals/[Proposal] [PROJECT_NAME].html" ``` **Naming**: `[Proposal] Artlive.html` #### Step 2b: Rewrite the `` tag The template uses `` so that image paths (`src=".claude/resources/..."`) resolve from project root when the template is previewed standalone from its own location (7 dirs deep inside `.claude/operation/skills/...`). After copy to `.claude-project/proposals/` (which is 2 dirs deep from project root), you MUST rewrite the base href: ```bash sed -i.bak 's|||' ".claude-project/proposals/[Proposal] [PROJECT_NAME].html" && rm ".claude-project/proposals/[Proposal] [PROJECT_NAME].html.bak" ``` Or use the Edit tool to perform the same replacement. Skipping this step causes all images to 404 in the output HTML. ### Step 3: Set Language Branch on the `LANGUAGE` resolved in Step 1a: - **`LANGUAGE = english`** → keep `` on line 2. Fill every `{{PLACEHOLDER}}` in English. - **`LANGUAGE = korean` (mixed mode)** → **keep ``** on line 2. Do NOT change it to `ko`. The template's `data-lang="ko"` CSS would swap hardcoded boilerplate to Korean, which mixed mode intentionally avoids. Do not edit any hardcoded English text in the template. Only the project-content variables in Step 4 are filled in Korean — see "Mixed Korean Mode" section below for the exact list. ### Step 4: Replace All Variables Replace every `{{PLACEHOLDER}}` with project-specific content. See **Variables Reference** below. In mixed Korean mode (`LANGUAGE = korean`), fill variables according to the "Mixed Korean Mode" table below — some variables translate to Korean, others stay English. --- ## Mixed Korean Mode — What Translates vs Stays English When `LANGUAGE = korean`, the template file stays untouched except for the `{{PLACEHOLDER}}` variable substitutions. Apply the following rules: ### Translates to Korean (project-content variables) Fill these with Korean text in Korean mode, English text in English mode: | Variable | Example (Korean mode) | |----------|----------------------| | `{{FEATURES_LIST}}` | `
  • 진단 설문 및 결과 리포트
    • ` | | `{{SERVICE_FLOW_TITLE}}` | `기본 진단-상담 플로우` | | `{{SERVICE_FLOW_STEPS}}` | `
  • 부모가 진단 설문을 완료합니다
    • ` | | `{{ADMIN_FEATURES}}` | `
    사용자 관리
    ` | | `{{OUR_COMMENT_TITLE}}` | `개선 제안 2가지` | | `{{OUR_COMMENTS}}` | `
  • MVP에서는 UX를 단순화해야 합니다
    • ` | | `{{MVP_FEATURES}}` | `
  • Toss 결제 연동
    • ` | | `{{POST_MVP_FEATURES}}` | `
  • 화상 상담 연동
    • ` | | `{{POST_MVP_FEATURES_2}}` | `
  • 전문가별 맞춤 견적
    • ` | | `{{TEAM_MEMBERS_FAQ}}` | `
  • 경력 10년 PM
    • ` | | `{{MILESTONE_1_NAME}}` ~ `{{MILESTONE_3_NAME}}` | `프로젝트 착수 (계약 체결)` | | `{{TIMELINE}}` | `3개월` | Also translate the following hardcoded slide-body blocks. **In Korean mode, left-column section titles also translate** for the slides listed below — exception clauses are noted per slide. - **Table of Contents (Slide 2)** — translate the heading (`Table of Content` → `목차`), every chapter label (`Who we are` → `회사 소개`, `Client Request` → `고객 요청사항`, `Proposed Solution` → `제안 솔루션`, `Our Process` → `진행 프로세스`, `Our Portfolio` → `포트폴리오`), and the chapter number prefix (`Chapter - N` → `N장`). **Important — TOC heading line break:** the English template uses `Table of
    Content` for visual balance. In Korean mode, replace the entire two-line block with a **single-line** `목차` and remove the `
    `. Do not split `목` and `차` across the break — `목차` is one word and stacking one character per line renders broken. - **Who We Are (Slide 3)** — translate the title (`Who / We are` → `회사 / 소개`), all three stat labels (`Team member` → `팀 멤버`, `Successful Project` → `성공 프로젝트`, `Years of Experience` → `년 경력`), the agency description paragraph (`We're a Design and Development focused agency…` → Korean equivalent), and the `Learn more` button label → `더 알아보기`. Numeric stats (`40+`, `100+`, `3+`) stay as-is. - **Cover (Slide 1)** — for consistency with the Who We Are stat labels, also translate the cover stat block (`Team member` → `팀 멤버`, `Successful Project` → `성공 프로젝트`). Other cover elements (`Proposal` heading, `Visit Website` button, Clutch sub-label) stay English. - **Our Process (Slide 7)** — translate the title (`Our / Process` → `진행 / 프로세스`), the 4 step pills (`Step 01` → `단계 01`), step name h3 (`Discovery & Research` → `발굴 & 리서치`; `Design & Development` → `디자인 & 개발`; `Testing & Deployment` → `테스트 & 배포`; `Maintenance & Growth` → `유지보수 & 성장`), the step description paragraphs, and the matching `alt=` attributes on the step icons. - **Portfolio / Case Studies (every per-project slide, Slides 8–26)** — translate the metadata labels (`Platform` → `개발 범위`, `Project Duration` → `소요 시간`), the `Live Link` CTA (→ `바로 가기`), the platform value (`Design & Development` → `디자인 & 개발`), and the duration units (`X Months` / `X Month` → `X개월`). The project name and project type stay English (they're brand names like `343Pet`, `Pet HealthCare App`). - **Portfolio links** — point every project card's `href` to the company portfolio listing page `https://potentialai.com/portfolio` (root). Per-project pretty paths like `/portfolio/` are not maintained and 404 — never use them. This also applies to the cover-slide CTA link. - **What is Behance? (Slide 10)** — translate the right-column body: the "Behance is the Biggest Portfolio platform…" lead paragraph (→ `Behance는 세계 최대 포트폴리오 플랫폼으로, Adobe가 운영하며 전 세계 크리에이터가 작품을 선보이는 곳입니다.`), the "Why it's difficult to be featured?" sub-heading (→ `Featured 선정이 어려운 이유`), and its bullet (`It features only 1 project a week in the world.` → `전 세계에서 주 1개 프로젝트만 Featured로 선정됩니다.`). The word "Behance" itself stays English (brand name); "Featured" stays English as a loanword. - **Featured on Behance (Slide 11)** — translate the card CTA (`Check Out` → `바로 가기`) on all 4 cards. Card images and the section title stay as-is. Collect the 4 Behance gallery URLs from the user; fall back to `https://www.behance.net/potentipotenti` if a specific URL is missing. - **Clutch Reviews (Slide 13)** — translate the lead paragraph next to the Clutch logo to `글로벌 최대 에이전시 리뷰 플랫폼, 클러치에서 Potential의 리뷰를 확인해보세요.` and translate the `Live Link` CTA in this section to `바로 가기`. The individual reviewer cards (names, titles, quotes) stay English — those are real client quotes. - **To Client FAQ (Slide 14)** — translate every Q (h3) and A (p/ul body) in the 5 glass-card FAQ stack: agreement timing, project duration, server hosting cost, team composition, extra cost policy. Left-column title `To / Client` stays English. Team-composition bullets (e.g., `10 year experienced PM` → `경력 10년 PM`) follow the pattern in the Korean example. - **Our Pricing (Slide 15)** — translate table headers (`Milestone` → `마일스톤`, `Payment Due` → `지급 시점`, `Amount (USD)` → `금액 (USD)`, or `금액 (KRW · 부가세 별도)` if quoting Won), row labels (`Project Kickoff (Contract Signed)` → `프로젝트 착수 (계약 체결)`, `After Delivery` → `납품 완료 후`, `Total Project Cost` → `총 프로젝트 비용`), and the section header (`Only Design` → project-specific label like `DogWalker MVP`). Left-column title `Our / Pricing` and the `PROJECT BASED` pill badge stay English (they sit in the left column). All numeric amounts and percentages stay as-is. **Currency exception:** if the project is invoiced domestically in KRW (matching a Korean 견적서), display Won amounts (`5,400,000원`) instead of USD on this slide for consistency with the invoice the client will countersign. - **Thank You (final slide)** — translate the heading (`Thank You !` → `감사 합니다 !`) and the coffee chat button text (`Let's grab an online coffee and talk more.` → `프로젝트와 관련없는 커피챗도 늘 환영합니다`). The coffee emoji stays. ### Stays English (always, in both modes) Do not translate these. In Korean mode leave them in English: - `{{CLIENT_NAME}}` — e.g., `Artlive`, `ChildSocial` - `{{PROJECT_NAME}}` — e.g., `ChildSocial MVP` - All currency amounts (`{{TOTAL_COST}}`, `{{MILESTONE_N_AMOUNT}}`, `{{MVP_AMOUNT}}`, `{{POST_MVP_AMOUNT}}`, `{{POST_MVP_2_AMOUNT}}`, `{{MILESTONE_N_PERCENT}}`) — keep USD format like `$20,000`, `30%`. ### Hardcoded template content (never edit) The following are hardcoded in `templates/proposal-template.html` and must stay **exactly as-is** in both modes: - Left-column section titles **NOT explicitly listed in the translate-block above** — i.e., `Client Request`, `Tech Stack`, `Our Clients`, `Expert Team`, `Contact Us`, plus chapter section titles for slides without translation rules. - Portfolio project names and project types (e.g., `343Pet`, `Pet HealthCare App`) — brand identifiers, never translated. Only the metadata labels (`Platform`, `Project Duration`, `Live Link`) and unit suffixes (`X Months`) translate per the Portfolio rule above. - Real client testimonial quotes inside the Clutch review cards. - All team section headers and individual bio text. - All Contact Us office blocks (city / address / contact lines). - The cover-slide `Proposal` headline + `Visit Website` button. - Numeric stats (`40+`, `100+`, `3+`). - Logo `` and SVG `` references. ### Step 5: Embed Images as Base64 Read each image file and convert to inline base64 for self-contained HTML: ```html Project Name ``` Shared brand and portfolio assets live in the Tier 1 resources folder at `.claude/resources/` (path relative to project root). Only proposal-specific assets (testimonial portraits) remain inside the skill at `images/`. - **Cover image**: **ALWAYS** use `.claude/resources/case-studies/projects/cover.png` as the Slide 1 hero/cover image (the main dashboard card). Never use any other project image for the cover slide. - **Portfolio images**: Read each project PNG from `.claude/resources/case-studies/projects/` and embed inline - **Featured project images**: Read from `.claude/resources/case-studies/projects/featured-[1-4].png` for the Behance Featured Projects slide - **Team images**: Read from `.claude/resources/brand/team/` — only include when names are specified in the request - **Tech stack icons**: Read from `.claude/resources/brand/tech-stack/[category]/` and embed inline - **Client logos**: Read from `.claude/resources/case-studies/client-logos/` and embed inline - **Office icons**: Read from `.claude/resources/brand/offices/` for Contact slide - **Testimonial portraits**: Read from `images/clutch-reviewer/` (skill-local) and embed inline - **Project name = image filename** (strip the `.png` extension) ### Step 6: Validate Run this to confirm no unreplaced placeholders remain: ```bash grep -c '{{' ".claude-project/proposals/[Proposal] [PROJECT_NAME].html" ``` Expected: `0` ### Step 7: Publish — share as HTTPS URL Two paths; pick whichever fits your workflow. #### Prerequisite: bundle the HTML + assets Both paths need the bundle folder. It's what gets uploaded. ```bash python3 .claude/operation/scripts/netlify-publish/bundle-for-netlify.py ".claude-project/proposals/[Proposal] [PROJECT_NAME].html" ``` Produces a sibling folder `.claude-project/proposals/[Proposal] [PROJECT_NAME]-bundle/` with: - `index.html` — the HTML with `` stripped and every `src="..."` rewritten to `assets/` - `assets/` — every referenced image/svg copied over, preserving its subpath so filename collisions are impossible The script HTML-decodes entities (`&` → `&`) before filesystem lookups so project-image filenames with `&` in them resolve correctly. Expected bundle size: ~10–30MB. #### Path A — CLI (recommended, one command) One-time setup (per machine, per teammate): ```bash npm i -g netlify-cli netlify login # opens browser, authorize once ``` Then deploy in one command. The shared [`netlify-publish`](../../../../scripts/netlify-publish/) utility runs the bundler first, then `netlify deploy`: ```bash bash .claude/operation/scripts/netlify-publish/publish.sh ".claude-project/proposals/[Proposal] [PROJECT_NAME].html" # production (stable URL): # → https://.netlify.app # or a draft preview URL: bash .claude/operation/scripts/netlify-publish/publish.sh ".claude-project/proposals/[Proposal] [PROJECT_NAME].html" --draft ``` First run per bundle folder is interactive — netlify-cli asks whether to create a new site or link to an existing one. Pick "Create & configure a new site" for a fresh deck; pick "Link this directory to an existing site" to redeploy updates to the same URL. #### Path B — Netlify Drop (no CLI, no login) 1. Open https://app.netlify.com/drop in a browser. 2. Drag the **entire bundle folder** onto the drop zone. 3. Wait ~10s. Netlify returns an HTTPS URL like `proposal-childsocial-abc123.netlify.app`. 4. Send that URL to the client. Fastest for ad-hoc one-offs. Each drop = new URL unless you later claim the site to an account. --- ## Variables Reference (26 total) ### Basic Info | Variable | Type | Description | Example | |----------|------|-------------|---------| | `{{CLIENT_NAME}}` | text | Client company name | `Artlive` | | `{{PROJECT_NAME}}` | text | Project title | `Expert Artwork Appraisal Platform` | | `{{TIMELINE}}` | text | Project duration | `3 months` | ### Client Request (Chapter 02) | Variable | Type | Description | Example | |----------|------|-------------|---------| | `{{FEATURES_LIST}}` | HTML `
  • ` | Key features list | `
  • Stripe Integration
    • ` | | `{{SERVICE_FLOW_TITLE}}` | text | Title for service flow diagram | `Basic Appraisal Flow` | | `{{SERVICE_FLOW_STEPS}}` | HTML `
  • ` | Numbered flow steps | `
  • Customer searches Expert
    • ` | | `{{ADMIN_FEATURES}}` | HTML `
    ` | Admin dashboard features (pill-badge) | `
    User Management
    ` | | `{{OUR_COMMENT_TITLE}}` | text | Title for comments section | `2 things to IMPROVE` | | `{{OUR_COMMENTS}}` | HTML `
  • ` | Improvement suggestions | `
  • Simplify UX for MVP
    • ` | ### Pricing - Milestone Based (Chapter 10, Slide 31) | Variable | Type | Description | Example | |----------|------|-------------|---------| | `{{TOTAL_COST}}` | text | Total project cost | `$20,000` | | `{{MILESTONE_1_NAME}}` | text | Milestone 1 name | `Project Kickoff (Contract Signed)` | | `{{MILESTONE_1_PERCENT}}` | text | Milestone 1 percentage | `30%` | | `{{MILESTONE_1_AMOUNT}}` | text | Milestone 1 dollar amount | `$6,000` | | `{{MILESTONE_2_NAME}}` | text | Milestone 2 name | `After Design Approval` | | `{{MILESTONE_2_PERCENT}}` | text | Milestone 2 percentage | `30%` | | `{{MILESTONE_2_AMOUNT}}` | text | Milestone 2 dollar amount | `$6,000` | | `{{MILESTONE_3_NAME}}` | text | Milestone 3 name | `After Development Completed` | | `{{MILESTONE_3_PERCENT}}` | text | Milestone 3 percentage | `40%` | | `{{MILESTONE_3_AMOUNT}}` | text | Milestone 3 dollar amount | `$8,000` | ### Pricing - Feature Based (Chapter 10, Slide 32) | Variable | Type | Description | Example | |----------|------|-------------|---------| | `{{MVP_FEATURES}}` | HTML `
  • ` | MVP feature list | `
  • Photo/Video Only
    • ` | | `{{MVP_AMOUNT}}` | text | MVP cost (can differ from TOTAL_COST) | `$20,000` | | `{{POST_MVP_FEATURES}}` | HTML `
  • ` | Post-MVP group 1 features | `
  • Virtual Call
    • ` | | `{{POST_MVP_AMOUNT}}` | text | Post-MVP group 1 cost | `$3,000` | | `{{POST_MVP_FEATURES_2}}` | HTML `
  • ` | Post-MVP group 2 features | `
  • Expert Quote
    • ` | | `{{POST_MVP_2_AMOUNT}}` | text | Post-MVP group 2 cost | `$5,000` | ### FAQ (Slide 30) | Variable | Type | Description | Example | |----------|------|-------------|---------| | `{{TEAM_MEMBERS_FAQ}}` | HTML `
  • ` | Team composition for FAQ | `
  • 10 year experienced PM
    • ` | --- ## Common Pitfalls 1. **`{{MVP_AMOUNT}}` vs `{{TOTAL_COST}}`**: These are different variables on different slides. `TOTAL_COST` goes on the milestone-based pricing slide (slide 31). `MVP_AMOUNT` goes on the feature-based pricing slide (slide 32). They may have the same value but they can also differ. 2. **Admin features use `
    ` not `
  • `**: `{{ADMIN_FEATURES}}` uses `
    ` elements, not `
  • ` elements like all other list variables. 3. **HTML entities**: Use `&` for `&` in HTML content (e.g., `Design & Development`). 4. **Nested lists**: `{{OUR_COMMENTS}}` should contain flat `
  • ` items, not nested `
      ` structures. 5. **Logo SVG**: The logo is defined once as a `` at the top of the template and referenced via `` across all slides. Do not modify individual logo references. 6. **Vertical centering**: Slides use `justify-content: center` to vertically center content. Do NOT add `flex:1` to the main content div inside a slide (it fills the full height, defeating centering). Do NOT add `padding-top` to offset for the logo — the logo is absolutely positioned. 7. **Title position**: All section titles (`title-line1` / `title-line2`) must be placed at the **top** of the slide content in their own wrapper div (`margin-bottom:24px`), with content below. Do NOT place titles in a left-right flex layout next to content. --- ## Template Structure (Slides) | # | Slide | Type | Variables Used | |---|-------|------|----------------| | 1 | Cover | PROJECT | `CLIENT_NAME` | | 2 | Table of Contents | BOILERPLATE | — | | 3 | Who We Are | BOILERPLATE | — | | 4 | Client Request - Features | PROJECT | `PROJECT_NAME`, `FEATURES_LIST` | | 5 | Client Request - Flow | PROJECT | `SERVICE_FLOW_TITLE`, `SERVICE_FLOW_STEPS` | | 6 | Client Request - Admin | PROJECT | `ADMIN_FEATURES` | | 7 | Our Comment | PROJECT | `OUR_COMMENT_TITLE`, `OUR_COMMENTS` | | 8 | Our Process | BOILERPLATE | — | | 8+N | **Portfolio Projects (1 slide per project image)** | **AUTO-GENERATED** | — | | — | What is Behance? | BOILERPLATE | — | | — | Featured Projects | BOILERPLATE | — | | — | Our Clients | BOILERPLATE | — | | — | Expert Team | BOILERPLATE | — | | — | Project Team | PROJECT | Team member names/images | | — | Tech Stack | BOILERPLATE | — | | — | Clutch Reviews | BOILERPLATE | — | | — | To Client FAQ | PROJECT | `TIMELINE`, `TEAM_MEMBERS_FAQ` | | — | Pricing - Milestones | PROJECT | `TOTAL_COST`, `MILESTONE_1/2/3_*` | | — | Pricing - Feature Based | PROJECT | `MVP_FEATURES`, `MVP_AMOUNT`, `POST_MVP_*` | | — | Contact Us | BOILERPLATE | — | | — | Thank You | BOILERPLATE | — | > **Note**: Slide numbers after Portfolio are dynamic because the total number of portfolio slides depends on how many images exist in `.claude/resources/case-studies/projects/`. --- ## Boilerplate Sections (Fixed Content) These sections are pre-filled in the template. Do NOT modify unless updating company info: - **Who We Are** — Company stats (40+ team, 100+ projects, 3+ years) - **Our Process** — 4-step workflow (Discovery → Design → Testing → Maintenance) - **Portfolio** — DiaFit, Stockify, PET, Mentora, Agrilo (5 projects × 2 slides each) - **Behance** — Featured explanation + 2×2 grid (images from `.claude/resources/case-studies/projects/featured-[1-4].png`) - **Clients** — Client logo grid (images from `.claude/resources/case-studies/client-logos/`) - **Expert Team** — Leadership, Design (6+3), Full-Stack (6+2), Backend, Mobile & QA - **Tech Stack** — 5-column technology grid (icons from `.claude/resources/brand/tech-stack/`) - **Testimonials** — 4 Clutch review cards (portraits from `images/clutch-reviewer/`) - **Contact** — 3 office locations (icons from `.claude/resources/brand/offices/`) - **Thank You** — Closing slide --- ## Brand Guidelines > **Brand guidelines:** See `.claude/base/brand/BRAND_GUIDELINES.md` for the canonical color palette, typography, and logo rules. This document uses the **Dark Theme** palette with the following proposal-specific overrides: | Element | Value | CSS Variable | |---------|-------|--------------| | **Accent** | `#EBFE5B` (Lime Green) | `--accent` | | Gradient Border | `linear-gradient(135deg, rgba(98,77,255,0.4), rgba(235,254,91,0.4))` | — | ### Layout | Property | Value | |----------|-------| | Orientation | 16:9 Full Screen (100vw × 100vh) | | Slide Padding | `56px 64px` | | Content Alignment | Vertically centered (`justify-content: center`) | | Logo | Fixed top-left (`position: absolute; top: 28px; left: 40px`) | | Title Style | Line 1: White (400wt) + Line 2: Lime Green (700wt) | | Title Position | **Always at the TOP** of the slide content, never side-by-side | | Assets Source | https://potentialai.com | ### Title Layout Rule **All slide titles MUST be placed at the top of the content, NOT in a left-right (side-by-side) layout.** Correct pattern: ```html
      Section
      Title
      ``` Do NOT use this pattern (left-right flex with title on the left): ```html
      Title
      Content
      ``` **Important**: Do NOT use `flex:1` on the main content wrapper inside a slide — it defeats vertical centering. Use `flex:1` only on inner column elements for horizontal layout. Do NOT add `padding-top` to push content below the logo — the logo is absolutely positioned and does not affect content flow. ### Project Team Card Layout **Project team members MUST be displayed horizontally in a single row**, not stacked vertically by role group. Each card shows the member photo, name, role, and a color-coded badge for their department. Correct pattern: ```html

      Member Name

      Role Title

      Department
      ``` Badge colors by department: - **Design**: `bg-lime-400 text-black` - **Full-Stack**: `bg-brand-purple text-white` - **Operations**: `bg-white/10 text-white border border-white/20` --- ## Portfolio Projects & Images **Image Source**: `.claude/resources/case-studies/projects/` **Rules**: - **Auto-generate portfolio slides from ALL images** in `.claude/resources/case-studies/projects/`, creating one slide per image file - **Excluded images** (do NOT create portfolio slides for these): - `cover.png` — Reserved for Slide 1 cover only - `featured-1.png` — Reserved for Behance Featured slide - `featured-2.png` — Reserved for Behance Featured slide - `featured-3.png` — Reserved for Behance Featured slide - `featured-4.png` — Reserved for Behance Featured slide - **If new images are added** to the `.claude/resources/case-studies/projects/` folder, they MUST automatically get a portfolio slide. Do not hardcode a fixed list — always scan the folder and include every image except the excluded ones above. - **Project name = image filename** (strip the file extension). If the filename contains ` - ` or ` - `, split into project name (before) and project type (after). E.g. `DiaFit - Healthtech AI App.png` → name: "DiaFit", type: "Healthtech AI App" - **Base64 embed images** — Read image files and convert to inline `data:image/png;base64,` for self-contained HTML ### Portfolio Slide HTML Pattern **CRITICAL**: Every project image MUST get its own slide using this exact pattern. Do NOT skip any images. ```html

      {{PROJECT_NAME}} -

      {{PROJECT_TYPE}}

      Platform
      Design & Development
      Project Duration
      {{DURATION}}
      {{PROJECT_NAME}}
      ``` Portfolio slides are inserted **after the "Our Process" slide** and **before the "What is Behance?" slide**. ### Portfolio Priority Ordering Rule **Portfolio slides MUST be sorted by relevance to the proposal's project type.** Projects whose tags match the proposal domain appear first, followed by the rest alphabetically. **How to apply:** 1. Identify the proposal's domain keywords (e.g. "fintech mobile app" → keywords: `fintech`, `mobile`, `app`, `finance`, `payment`) 2. Score each project: count how many of its tags match the proposal keywords 3. Sort: highest-scoring projects first, then alphabetically for ties | Project | Image File | Type | Duration | Tags | |---------|-----------|------|----------|------| | 343Pet | `343Pet - Pet HealthCare App.png` | Pet HealthCare App | 3 Months | `mobile`, `healthtech`, `app` | | Agrilo | `Agrilo - Agritech AI Agent.png` | Agritech AI Agent | 4 Months | `ai`, `agritech`, `agent` | | CART | `CART - Card Traders App.png` | Card Traders App | 3 Months | `mobile`, `marketplace`, `e-commerce`, `fintech` | | Dexulin | `Dexulin - Smart Health & Fitness Tracking App.png` | Smart Health & Fitness Tracking | 3 Months | `mobile`, `healthtech`, `fitness`, `app` | | DiaFit | `DiaFit - Healthtech AI App.png` | Healthtech AI App | 4 Months | `mobile`, `healthtech`, `ai`, `app` | | Elite4print | `Elite4print - E-commerce & ERP Solution.png` | E-commerce & ERP | 3 Months | `web`, `e-commerce`, `erp`, `dashboard` | | Hacamong | `Hacamong - Reliable Babysitter Finder App.png` | Babysitter Finder App | 3 Months | `mobile`, `marketplace`, `app` | | K-Talk | `K-Talk - Korean Language Learning Platform.png` | Language Learning Platform | 3 Months | `web`, `education`, `platform` | | Maloha | `Maloha - Real-time Voice Translation App.png` | Voice Translation App | 3 Months | `mobile`, `ai`, `translation`, `app` | | Mentora | `Mentora - AI Student Managment.png` | AI Student Management | 3 Months | `web`, `ai`, `education`, `dashboard` | | NearWork | `NearWork - Smart job portal website.png` | Smart Job Portal | 3 Months | `web`, `marketplace`, `portal` | | Omni | `Omni - Fitness Tracking App.png` | Fitness Tracking App | 3 Months | `mobile`, `fitness`, `healthtech`, `app` | | Park Park | `Park Park - Smart Parking Lot Sharing Platform.png` | Smart Parking | 3 Months | `mobile`, `platform`, `sharing` | | Personal Expense Tracking | `Personal Expense Tracking - AI Agent.png` | AI Agent | 3 Months | `mobile`, `fintech`, `ai`, `finance`, `app` | | Silvara | `Silvara - Personal Health Companion App.png` | Health Companion | 1 Month | `mobile`, `healthtech`, `ai`, `app` | | Stockify | `Stockify - AI Business Automation.png` | AI Business Automation | 3 Months | `web`, `ai`, `fintech`, `automation`, `dashboard` | | Thrill | `Thrill - Adventure Matching Platform.png` | Adventure Matching | 3 Months | `mobile`, `social`, `platform` | | Tobeone | `Tobeone - Community app.png` | Community App | 3 Months | `mobile`, `social`, `community`, `app` | | Tustix | `Tustix - Ticket & Supplier Management Dashboard.png` | Ticket Dashboard | 3 Months | `web`, `dashboard`, `management` | **Example** — Proposal for "fintech mobile app": - Keywords: `fintech`, `mobile`, `finance`, `app` - Priority order: Personal Expense Tracking (4 tags match) → CART (2) → Stockify (1) → DiaFit, Dexulin, Omni, Silvara, etc. (1 each: `mobile`/`app`) → rest alphabetically ### Featured Project Images (Behance Slide) **Image Source**: `.claude/resources/case-studies/projects/` | Image File | Used On | |-----------|---------| | `featured-1.png` | Featured Projects slide (2×2 grid) | | `featured-2.png` | Featured Projects slide (2×2 grid) | | `featured-3.png` | Featured Projects slide (2×2 grid) | | `featured-4.png` | Featured Projects slide (2×2 grid) | --- ## Tech Stack Images **Image Source**: `.claude/resources/brand/tech-stack/` **Rule**: Embed each icon inline as base64 next to the tech name in the Tech Stack slide. ### Design | Tech | Image File | |------|-----------| | Figma | `design/figma.png` | | Motion | `design/motion.png` | | After Effects | `design/after-effects.png` | | Cinema 4D | `design/cinema-4d.png` | ### Frontend | Tech | Image File | |------|-----------| | React | `front-end/react.png` | | Vue.js | `front-end/vue-js.png` | | Next.js | `front-end/nextjs.png` | | Angular | `front-end/angular.png` | ### Backend | Tech | Image File | |------|-----------| | Python | `backend/python.png` | | Django | `backend/django.png` | | Node.js | `backend/nodejs.png` | ### Mobile | Tech | Image File | |------|-----------| | Flutter | `mobile/flutter.png` | | React Native | `mobile/react-native.png` | ### Infra | Tech | Image File | |------|-----------| | AWS | `infra/aws.png` | --- ## Client Logos **Image Source**: `.claude/resources/case-studies/client-logos/` **Rule**: Embed client logos inline as base64 in the Our Clients slide grid. | Client | Image File | |--------|-----------| | HaKaMong | `hakamong.png` | | NearWork | `nearwork.png` | | KTalk | `ktalk.png` | | CART | `cart.png` | | Omni | `omni.png` | | ParkPark | `parkpark.png` | | 343Pet | `343pet.png` | | Tobeone | `tobeone.png` | | Maloha | `maloha.png` | | Elite4Print | `elite4print.png` | | Silvara.AI | `silvara-ai.png` | | Saero | `saero.png` | | iTTech | `ittech.png` | | Yonsei University | `yonsei-university.png` | | Korea University | `korea-university.png` | | Payments | `payments.png` | | Dx-i Soft | `dxi-soft.png` | | Able | `able.png` | | AI Solutions | `ai-solutions.png` | | DVSN Studios | `dvsn-studios.png` | | Kongju National University | `kongju-university.png` | | BGF Retail | `bgf-retail.png` | | Dexulin | `dexulin.png` | --- ## Office Icons **Image Source**: `.claude/resources/brand/offices/` **Rule**: Embed office flag/icon SVGs inline for the Contact Us slide. | Office | Image File | |--------|-----------| | HQ - South Korea | `south-korea.png` | | USA | `usa.png` | | Bangladesh | `bangladesh.png` | --- ## Team Images **Image Source**: `.claude/resources/brand/team/` **Rule**: Only use a team member's image when their name is specifically mentioned in the proposal. Files are named with the lowercase shortname from `.claude/resources/team-directory.md` — match by the `Name` column there. ### CEO & CTO | Name | Image File | |------|-----------| | Shin Lukas Dongsub | `ceo-cto/lukas.png` | | Siam Maruf | `ceo-cto/siam.png` | ### Design Team | Name | Image File | |------|-----------| | Nazirul Hoque | `design-team/nazirul.png` | | Shamima Nasrin | `design-team/shamima.png` | | Md Forhad Alam | `design-team/forhad-alam.png` | | MD Ahosan Habib | `design-team/habib.png` | | Abu MD Ehsan | `design-team/ehsan.png` | | Md Foysal Alam | `design-team/foysal.png` | | Redwanul Haque | `design-team/redwan.png` | | Rukaiya Sharmeen | `design-team/rukaiya.png` | | Tasfia | `design-team/tasfia.png` | | MD Romjan | `design-team/romjan.png` | | Mehedi Hasan | `design-team/mehedi.png` | | Mosarrof Hossain | `design-team/mosarrof.png` | ### Full-Stack Team | Name | Image File | |------|-----------| | Md Hossen Rana | `full-stack-team/rana.png` | | G M Zulkar Nine | `full-stack-team/zulkar.png` | | Atik Bhuiyan | `full-stack-team/atik.png` | | Abdullah Al Nomaan | `full-stack-team/nomaan.png` | | Shamim Hossain | `full-stack-team/shamim.png` | | Md. Mohibulla | `full-stack-team/mohibulla.png` | | Forhad | `full-stack-team/forhad.png` | | Abdur Rahman | `full-stack-team/abdur.png` | | Muksitur Rahman | `full-stack-team/muksitur.png` | | Dolan Bairagi | `full-stack-team/dolan.png` | | Hasan Al Mahmud | `full-stack-team/hasan.png` | | Meherab Irfan | `full-stack-team/meherab.png` | | Talha Mahmud | `full-stack-team/talha.png` | | Israt Jahan Rothy | `full-stack-team/israt.png` | | Md. Tonmoy Khan | `full-stack-team/tonmoy.png` | | Md. Zihad Hossion | `full-stack-team/zihad.png` | | Saiful Islam | `full-stack-team/saiful.png` | ### Operations Team | Name | Image File | |------|-----------| | Jayden | `operation-team/jayden.png` | | Riaz Uddin | `operation-team/riaz.png` | | Eddy | `operation-team/eddy.png` | | Istimam Hossen Akib | `operation-team/akib.png` | | Symon Barua | `operation-team/symon.png` | | Yasin Billah | `operation-team/yasin.png` | | Rahid Uddin Ahmed | `operation-team/rahid.png` | --- ## Output Location ``` .claude-project/proposals/ └── [Proposal] [PROJECT_NAME].html ``` One file per generation. Language is set via `` at the top of the file; re-run the skill with a different language to produce a second file (overwrites unless the project name differs). --- ## Related Files - **Template**: `templates/proposal-template.html` - **Korean Content**: `prompts/content-korean.md` - **English Content**: `prompts/content-english.md` - **Guide**: `prompts/template-guide.md` --- **Skill Status**: COMPLETE **Output Format**: HTML (16:9 Full Screen) **Languages**: Korean, English