add-template
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.
Install
mkdir -p .claude/skills/add-template && curl -L -o skill.zip "https://mcp.directory/api/skills/download/6193" && unzip -o skill.zip -d .claude/skills/add-template && rm skill.zipInstalls to .claude/skills/add-template
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:
| 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 <!DOCTYPE html> 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
templatesCountmatches 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:
categorymust be one of:core,visual,retro,interaction,layoutfamilyIdshould match existing family or be a new valid nametemplateIdshould follow format:{category}-{familyId}-{variant}(kebab-case)htmlContentshould be a complete HTML document with<!DOCTYPE html>cssContentshould 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.csswith:<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.*
You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
drawio-diagrams-enhanced
jgtolentino
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
ui-ux-pro-max
nextlevelbuilder
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
godot
bfollington
This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
nano-banana-pro
garg-aayush
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.
fastapi-templates
wshobson
Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.
Related MCP Servers
Browse all servers
RepomixOptimize your codebase for AI with Repomix—transform, compress, and secure repos for easier analysis with modern AI tool
MagicCreate modern React UI components instantly with Magic AI Agent. Integrates with top IDEs for fast, stunning design and
Specs WorkflowStreamline project docs with Specs Workflow: automate software project plan templates, tracking, and OpenAPI-driven prog
Yandex TrackerIntegrate Yandex Tracker with project management software for advanced issue tracking, project plan templates, Gantt cha
TaskFlowTaskFlow manages tasks with project plan templates, subtasks, dependencies, and approval for systematic tracking and use
GitHub KanbanBoost agile software development with Kanban boards integrated into GitHub for efficient project management and powerful
Stay ahead of the MCP ecosystem
Get weekly updates on new skills and servers.