Clone Project

Clone Project

Overview

This skill automates the creation of new gallery projects for the portfolio website. It handles project scaffolding, template selection, metadata management, and content syncing using a standardized workflow.

When to Use This Skill

Use this skill when:

• User wants to create a new gallery/portfolio project
• User mentions adding a case study or project to the website
• User says "create project", "clone project", "add portfolio project"
• User needs to set up a new project page with proper structure

Workflow

Step 1: Gather Project Information

Collect the following information from the user using AskUserQuestion tool:

Required Parameters:

1. Template Type: Ask which layout to use

   • two-column - For case studies and product/design narratives with sticky left titles and right content (like Alibaba case study)
   • stacked - For art/visual projects with vertical flow of text and images (like art project layout)

2. Project Slug: URL-friendly identifier (will be auto-slugified)

   • Use kebab-case format (e.g., "my-design-project")
   • Avoid spaces and special characters

3. Project Title: Full display name (e.g., "Re-Architecting Alibaba Help Center for Global Consistency")

4. Date: Project date in flexible formats

   • Accepts: YYYY-MM-DD, YYYY.MM, YYYY-MM, or YYYY
   • Will be stored as ISO YYYY-MM-DD in gallery.json
   • Will be displayed as YYYY.MM on the page

5. Tags: Comma-separated tags (e.g., "UX Design, NLP, BART Transformer")

6. Company: Company or organization name (use "-" if not applicable)

7. Classification: Project category (must be one of):

   • UX/Product - UX and product design work
   • Experiential - Experience design and installations
   • Content - Content strategy and social media
   • Visual - Visual design and branding

8. Description (optional): Brief meta description for SEO

Step 2: Execute Project Creation

Run the scaffolding script from the project root directory:

node scripts/new-gallery.js \
  --type <two-column|stacked> \
  --slug <project-slug> \
  --title "<Project Title>" \
  --date "<YYYY-MM-DD | YYYY.MM | YYYY-MM | YYYY>" \
  --tag "<Tag1, Tag2, Tag3>" \
  --company "<Company Name>" \
  --classification "<UX/Product|Experiential|Content|Visual>" \
  --description "<Optional description>" \
  --update-json true \
  --sync true

What this does:

• Creates gallery/<slug>/ directory
• Copies and customizes template files from assets/templates/<type>/
• Generates index.html with metadata
• Creates text.md with template content
• Creates public/ directory for images
• Updates content/gallery.json with project entry (sorted by date, newest first)
• Auto-syncs content from text.md into index.html

Script locations in this skill:

• scripts/new-gallery.js - Main scaffolding script
• scripts/sync-gallery.js - Content sync utility (used by new-gallery.js)

Step 3: Guide Next Steps

After successful creation, inform the user of the following next steps:

1. Add Images:

   • Place cover.png in gallery/<slug>/public/ (required for hero image)
   • Add body images (e.g., body-1.png, body-2.png) as needed
   • Recommend PNG/JPG format, optimized for web

2. Edit Content:

   • Update gallery/<slug>/text.md with actual project content
   • Follow the Markdown format in /.claude/references/GALLERY_GUIDE.md
   • Use ## or ### for section headers
   • Use #### for subsection headers
   • Reference images as ./public/image-name.png

3. Re-sync Content (if needed):

   • If text.md is updated after creation, run:

     node scripts/sync-gallery.js --slug <slug>
     

   • This updates the HTML between SYNC markers in index.html

4. Preview:

   • Open gallery/<slug>/index.html in browser to preview
   • Or use live server for real-time updates

Step 4: Verify

Confirm that:

• Project directory exists at gallery/<slug>/
• content/gallery.json has been updated with new entry
• Project appears in the gallery (check homepage)

Content Authoring Format

Projects use a standardized Markdown format in text.md:

![cover](./public/cover.png)

# Project Title

### Project Brief
- Date: YYYY.MM
- Project Name: Project Title
- Tag: Tag 1, Tag 2
- Company: Company Name

### Section Title
Paragraph text here.

![Alt text](./public/image1.png)

#### Subsection Title
More detailed content.

### Another Section
- Bullet point A
- Bullet point B

![Another image](./public/image2.png)

Key points:

• The "Project Brief" section is ignored during sync (metadata comes from gallery.json)
• Headings: ## or ### for sections, #### for subsections
• Images: Keep in public/ directory, reference as ./public/<name>
• The sync script converts Markdown to HTML and injects it between sync markers

Embedding Video

Projects can include embedded video content from platforms like Vimeo or YouTube:

1. In text.md:

   • Add video link at any position in your content flow where you want the video to appear
   • Use standard Markdown link format: [Watch the installation video](https://vimeo.com/417398448)
   • The video will appear in the order you place it within your content sections

2. In index.html:

   • After running the sync script, manually add a responsive iframe embed at the corresponding position
   • Use the .video-embed wrapper class (included in templates) for responsive 16:9 aspect ratio
   • Example HTML structure:

     <div class="video-embed">
       <iframe src="https://player.vimeo.com/video/417398448?fl=pl&fe=sh"
               title="Video description"
               allow="autoplay; fullscreen; picture-in-picture"
               allowfullscreen
               loading="lazy">
       </iframe>
     </div>
     

3. Supported platforms:

   • Vimeo: Convert link to https://player.vimeo.com/video/VIDEO_ID
   • YouTube: Convert link to https://www.youtube.com/embed/VIDEO_ID

4. Reference example:

   • See gallery/my-friends-are-my-power-station/ for working implementation
   • Shows video link in text.md and corresponding iframe embed in index.html

Note: The sync script does not automatically convert video links to iframes. You must manually insert the iframe HTML after syncing content.

Template Information

Two-Column Template (assets/templates/two-column/):

• Grid layout: sticky left title + scrolling right content
• Best for: Case studies, product narratives, design processes
• Responsive: Collapses to single column on mobile

Stacked Template (assets/templates/stacked/):

• Vertical flow: title above content
• Best for: Art projects, visual portfolios, galleries
• Simpler structure for image-heavy content

Both templates include:

• Hero image container (2:1 aspect ratio by default)
• Responsive design with mobile breakpoints
• SEO meta tags and Open Graph support
• Automatic fallback for missing cover images

Troubleshooting

Duplicate project error:

• Check if project with same name or URL already exists in content/gallery.json
• Use a different slug or update the existing project

Sync markers not found:

• Ensure index.html contains <!-- SYNC:CONTENT-START --> and <!-- SYNC:CONTENT-END --> markers
• Templates should include these by default

Images not showing:

• Verify images are in gallery/<slug>/public/ directory
• Check image paths in text.md use correct format: ./public/<name>.ext
• Ensure cover.png exists for hero image

Resources

scripts/

• new-gallery.js - Main project scaffolding script (Node.js, no external dependencies)
• sync-gallery.js - Content sync utility that parses Markdown and injects into HTML

assets/

• templates/two-column/ - Two-column layout template files
• templates/stacked/ - Stacked layout template files

Global references

• /.claude/references/GALLERY_GUIDE.md - Complete documentation of the gallery workflow and standards