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