---
name: add-template
description: Add new UI style template to the ui-style-react project. This skill should be used when users want to add a new style template with HTML/CSS code, create a new preview page, or register a template in the system. Triggers include "add template", "create new style", "add new template", or when users provide HTML code for a new UI style.
---
# Add Template
## Overview
This skill automates the complete workflow for adding new UI style templates to the ui-style-react project. It handles directory creation, file generation, and automatic registration in the preview system.
## When to Use
- When a user says "add new template" or "create style template"
- When a user provides HTML/CSS code that should become a new template
- When a user wants to add a new style to `/styles/preview/` pages
- When migrating templates from external sources
## Quick Start
To add a new template, collect the following information:
| Parameter | Required | Description | Example |
|-----------|----------|-------------|---------|
| `category` | ✅ | Style category | `visual`, `core`, `retro`, `interaction`, `layout` |
| `familyId` | ✅ | Family/group name | `grain`, `glassmorphism`, `minimalism` |
| `templateId` | ✅ | Unique template ID | `visual-grain-film-noir` |
| `htmlContent` | ✅ | Full HTML content | Complete `` page |
| `cssContent` | ✅ | CSS styles | Corresponding stylesheet |
| `titleZh` | Optional | Chinese title | `胶片黑色风格` |
| `titleEn` | Optional | English title | `Film Noir Style` |
| `setAsDefault` | **✅ Default: true** | Set new template as default (first in list) | `true` / `false` |
### ⭐ Default Template Behavior / 默认模板行为
**By default, newly added templates are set as the default template (first in the list).**
新添加的模板**默认会被设置为默认模板**（列表中的第一个）。
- `setAsDefault: true` (默认) - 新模板显示在第一位，用户打开预览页面首先看到新模板
- `setAsDefault: false` - 新模板添加到列表末尾
## Workflow
### 🚨🚨🚨 CRITICAL RULES (READ FIRST!) 🚨🚨🚨
### 关键规则（必须首先阅读！）
**Rule 1: ALWAYS check existing templates BEFORE creating manifest.json**
- List existing template directories in `public/data/content/styles/{category}/{familyId}/`
- The number of templates in manifest.json MUST equal the number of directories
**Rule 2: NEVER overwrite existing templates in manifest.json**
- When adding to an existing family, READ the current manifest.json first
- ADD your new template to the EXISTING templates array
- Do NOT create a new templates array with only your template
**Rule 3: New templates are DEFAULT by default (first position)**
- Unless user specifies otherwise, place new template FIRST in the templates array
- First template = default template shown when user opens preview page
**Rule 4: Verify templatesCount after build**
- After running build script, check that `templatesCount` matches expected value
- If templatesCount is wrong, you likely forgot to include existing templates
---
### ⚠️ Pre-flight Checklist (MUST DO FIRST!)
### ⚠️ 预检清单（必须首先执行！）
Before starting the workflow, **ALWAYS check for existing templates** in the target family:
```bash
# 1. Check if family directory exists and list existing templates
ls -la public/data/content/styles/{category}/{familyId}/ 2>/dev/null || echo "New family - no existing templates"
# 2. Check existing manifest.json
cat src/data/styles/generated/{category}/{familyId}/manifest.json 2>/dev/null | grep -A 30 '"templates"' || echo "No existing manifest"
# 3. Count existing templates
EXISTING_COUNT=$(ls -d public/data/content/styles/{category}/{familyId}/*/ 2>/dev/null | wc -l | tr -d ' ')
echo "Existing templates: $EXISTING_COUNT"
echo "Expected after adding: $((EXISTING_COUNT + 1))"
```
**Record the expected templatesCount** and verify it after Step 8!
---
### Step 1: Validate Parameters
Verify all required parameters are provided:
- `category` must be one of: `core`, `visual`, `retro`, `interaction`, `layout`
- `familyId` should match existing family or be a new valid name
- `templateId` should follow format: `{category}-{familyId}-{variant}` (kebab-case)
- `htmlContent` should be a complete HTML document with ``
- `cssContent` should contain valid CSS
### Step 2: Create Directory Structure
Create the template directory:
```
public/data/content/styles/{category}/{familyId}/{templateId}/
├── fullpage.html
└── fullpage.css
```
Execute:
```bash
mkdir -p public/data/content/styles/{category}/{familyId}/{templateId}
```
### Step 3: Write Template Files
Write `fullpage.html`:
- Ensure the HTML links to `fullpage.css` with: ``
- Remove any inline `