agentskills.codes
AD

add-template

by TonnyWong1052DesignSource

Automates the scaffolding and registration of new React UI templates using HTML and CSS inputs.

FrontendUI designReactTypeScript

Install

mkdir -p .claude/skills/add-template && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/6193" && unzip -o skill.zip -d .claude/skills/add-template && rm skill.zip

Installs to .claude/skills/add-template

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

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.
336 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Beginner

Key capabilities

  • →Creates directory structures for new style templates
  • →Generates HTML and CSS placeholder files
  • →Registers new templates into the system manifest
  • →Assigns default or specific list ordering for new styles

How it works

Executes a directory-creation and file-generation script followed by a manifest registration step.

Inputs & outputs

You give it
JSON object with template metadata (category, family, html, css)
You get back
New template files and updated manifest.json

When to use add-template

  • →Create new UI style templates
  • →Register React UI components
  • →Add style preview pages

About this skill

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:

ParameterRequiredDescriptionExample
category✅Style categoryvisual, core, retro, interaction, layout
familyId✅Family/group namegrain, glassmorphism, minimalism
templateId✅Unique template IDvisual-grain-film-noir
htmlContent✅Full HTML contentComplete <!DOCTYPE html> page
cssContent✅CSS stylesCorresponding stylesheet
titleZhOptionalChinese title胶片黑色风格
titleEnOptionalEnglish titleFilm Noir Style
setAsDefault✅ Default: trueSet 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:

# 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 <!DOCTYPE html>
  • 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:

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: <link rel="stylesheet" href="fullpage.css">
  • Remove any inline <style> tags, move content to CSS file
  • Keep <script> tags for interactivity

Write fullpage.css:

  • Extract all CSS from the original HTML
  • Include any CSS variables and custom properties

🚨 JSX Template Format Requirements (CRITICAL!)

🚨 JSX 模板格式要求（关键！）

If the user provides React JSX code instead of HTML, you MUST follow these rules:

Rule 1: Use export default function syntax (NOT arrow function) 规则 1：使用 export default function 语法（不要用箭头函数）

The JSX compiler (jsxCompiler.js) uses regex to strip export statements. It ONLY matches:

export default function ComponentName()

JSX 编译器使用正则表达式来处理 export 语句，它只能匹配上述格式！

// ✅ CORRECT - 正确格式（编译器可以处理）
import React, { useState } from 'react';
import { Icon1, Icon2 } from 'lucide-react';

export default function MyComponent() {
  const [state, setState] = useState(null);

  return (
    <div>...</div>
  );
}
// ← 文件在这里结束，不需要额外的 export 语句！

// ❌ WRONG - 错误格式（会导致 "Unexpected token 'export'" 错误！）
import React, { useState } from 'react';
import { Icon1, Icon2 } from 'lucide-react';

const MyComponent = () => {  // ← 箭头函数
  const [state, setState] = useState(null);

  return (
    <div>...</div>
  );
};

export default MyComponent;  // ← 这行不会被编译器移除，导致运行时错误！

Rule 2: File naming for JSX templates 规则 2：JSX 模板文件命名

public/data/content/styles/{category}/{familyId}/{templateId}/
├── fullpage.jsx    ← React/JSX component
└── fullpage.css    ← Base styles (can be minimal for Tailwind CSS)

Rule 3: Supported imports (automatically provided by runtime) 规则 3：支持的 imports（运行时自动提供）

The React runtime (reactRuntime.js) provides these globally:

  • All React hooks: useState, useEffect, useRef, useMemo, etc.
  • All Lucide React icons: Zap, Star, Heart, ArrowRight, etc.
  • React APIs: createElement, Fragment, memo, forwardRef, etc.

You can import them normally - the compiler will strip the imports and use the runtime-provided versions.

Rule 4: Component name extraction 规则 4：组件名称提取

The compiler extracts the component name from export default function ComponentName. Make sure:

  • Component name starts with uppercase letter
  • Component name matches the expected preview component

Step 4: Update previewIdMapping

Edit src/utils/previewLoader.js:

Find the previewIdMapping object (around line 107) and add:

'{templateId}': {
  category: '{category}',
  familyId: '{familyId}',
  templateId: '{templateId}'
},

Important: Add the entry in alphabetical order within the appropriate section (organized by category comments).

Step 5: Update styleTagsMapping

Edit src/data/metadata/styleTagsMapping.js:

Find the styleEnhancements object and add:

'{templateId}': {
  primaryCategory: '{category}',
  categories: ['{category}'],
  tags: ['contemporary'],
  relatedStyles: []
},

⚠️ Pre-flight Checklist (MUST DO FIRST!)

🚨 THIS IS CRITICAL - NEVER SKIP THIS STEP! This prevents the "only one template showing" bug!

Before doing anything, ALWAYS check for existing templates in the target family. This is the #1 cause of the manifest.json mistake!

# 1. Check if family directory exists and list existing templates
echo "=== Checking existing templates in {category}/{familyId} ===" && \
ls -la public/data/content/styles/{category}/{familyId}/ 2>/dev/null || echo "✓ New family - no existing templates"

# 2. Check existing manifest.json
echo "=== Checking existing manifest.json ===" && \
cat src/data/styles/generated/{category}/{familyId}/manifest.json 2>/dev/null | grep -A 50 '\"templates\"' || echo "✓ No existing manifest"

# 3. Count existing templates (CRITICAL!)
echo "=== Template Count ===" && \
EXISTING_COUNT=$(ls -d public/data/content/styles/{category}/{familyId}/*/ 2>/dev/null | wc -l | tr -d ' ') && \
echo "Existing template directories: $EXISTING_COUNT" && \
echo "Expected templatesCount after adding: $((EXISTING_COUNT + 1))"

⚠️ SAVE THE NUMBERS ABOVE! Use them to verify after Step 8!

If existing templates found: SAVE the existing manifest.json - you will add to it, not replace it!

Step 6: Check Existing Templates (⚠️ CRITICAL!)

步骤 6：检查现有模板（⚠️ 关键！）

Before creating or modifying manifest.json, you MUST check for existing templates! 在创建或修改 manifest.json 之前，必须检查现有模板！

6.1 List existing template directories

ls -la public/data/content/styles/{category}/{familyId}/

This will show all existing template directories. For example:

core-flat-design/
core-flat-design-ecommerce-landing/

6.2 Check existing manifest.json (if exists)

cat src/data/styles/generated/{category}/{familyId}/manifest.json 2>/dev/null || echo "No existing manifest"

If manifest.json exists, read and preserve the existing templates array!

6.3 Count expected templates

Formula: Expected templatesCount = Existing templates + 1 (new template)

Record this number to verify after the build.

Step 7: Create/Update Manifest File (⚠️ PRESERVE EXISTING!)

步骤 7：创建/更新 Manifest 文件（⚠️ 保留现有模板！）

Path: src/data/styles/generated/{category}/{familyId}/manifest.json

mkdir -p src/data/styles/generated/{category}/{familyId}

Scenario A: New Family (no existing manifest)

Create new manifest.json:

{
  "id": "{category}-{familyId}",
  "category": "{category}",
  "family": {
    "name": {
      "zh-CN": "{Chinese Title}",
      "en-US": "{English Title}"
    },
    "description": {
      "zh-CN": "{Chinese description}",
      "en-US": "{English description}"
    },
    "tags": ["contemporary", "other-tags"],
    "relatedStyles": ["rel

---

*Content truncated.*

When not to use it

  • →If you only need to modify existing style values without creating a new file
  • →When deploying to non-React projects

Prerequisites

Access to ui-style-react repositoryStyle metadata (category, familyId, templateId)

Limitations

  • →Requires existing category and family folder structures
  • →Manifest updates must be verified against current template count

How it compares

It handles the full directory and manifest sync automatically, whereas manual creation requires updating multiple path-indexed files.

Compared to similar skills

add-template side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
add-template (this skill)17moReviewBeginner
scroll-experience1016moNo flagsIntermediate
anthropic-frontend-design126moNo flagsIntermediate
infographic-structure-creator15moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

scroll-experience

davila7

Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.

101142

anthropic-frontend-design

chaibuilder

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

1237

infographic-structure-creator

antvis

Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.

110

logo-with-variants

crafter-station

Create logo components with multiple variants (icon, wordmark, logo) and light/dark modes. Use when the user provides logo SVG files and wants to create a variant-based logo component following the Clerk pattern in the Elements project.

47

design-context

WellApp-ai

Refresh UI/UX context from design system, Storybook, and codebase

17

core-components

davila7

Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

10

Search skills

Search the agent skills registry