skills.rest
TonnyWong1052
TonnyWong1052COMMUNITY
Explore all skills by this author →
GitHub

add-template

Automates adding UI style templates to the ui-style-react project.

401|32|Updated Nov 13, 2025
Search Tags:#automation#template#build#manifest.json#UI style#previewLoader
One-click install
npx skills add https://github.com/TonnyWong1052/UI-Prompt --skill add-template
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-template
Source: https://github.com/TonnyWong1052/UI-Prompt/tree/main/.claude/skills/add-template
Command: npx skills add https://github.com/TonnyWong1052/UI-Prompt --skill add-template

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the end-to-end process of adding a new UI style template to the ui-style-react project, eliminating repetitive setup and registration tasks.

Core Features & Use Cases

  • Directory & file scaffolding: creates the category/family/template directories and writes HTML/CSS templates.
  • Registration automation: updates previewIdMapping, styleTagsMapping, and the central manifest.json to keep the UI in sync with new templates.
  • Template migration & onboarding: supports adding templates to existing families or creating new families, with proper template indexing and build compatibility.

Quick Start

Use the add-template script to create a new UI style template by supplying category, family, templateId, and either HTML/CSS content or file inputs. Example commands are provided in the script's README and usage docs.

Frequently Asked Questions about add-template

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate adding a new UI style template to my React project?▼

To automate adding a UI style template, you can use a scaffolding script to generate directory structures, write HTML/CSS files, and register the template in preview loaders and manifest.json automatically.

How do I register a new UI template in manifest.json and preview loaders?▼

Registering a new UI template requires updating previewIdMapping, styleTagsMapping, and the central manifest.json to synchronize the UI with the newly added template files and maintain consistent indexing.

What is the process for scaffolding template files into an existing UI family?▼

Scaffolding template files into an existing UI family involves creating the necessary template directories, writing the HTML/CSS content, and updating the central manifest and mappings to ensure proper template indexing.

Can I create a new UI family and add templates to it automatically?▼

Yes, you can create a new UI family and add templates automatically by scaffolding the category/family/template directories, writing the template files, and registering them across the manifest and mapping configurations.

Does adding a UI style template manually break build compatibility?▼

Manually adding a UI style template can break build compatibility if previewIdMapping, styleTagsMapping, or manifest.json are not updated correctly, which is why automating the registration process ensures consistent indexing.

Related Skills

Explore More Software Engineering Skills→
tentacle-protentacle-pro
4

tentacle-markdown2html

Convert Obsidian-flavored markdown to HTML via an enterprise rendering API.

Community
Intermediate
1k-off1k-off
1

template-instantiation

Create .NET projects from dotnet new templates with Central Package Management.

Community
Intermediate
jubscodesjubscodes
49

gsp-scaffold

Set up Next.js, Vite, or React Native projects with Tailwind and shadcn/ui, then verify the build.

Community
Advanced
sauvalasauvala

note-link

Scan zettelkasten notes for link candidates and update Related sections.

Community
Advanced