AI SKILL

[Skill Name]

[Brief tagline]

[All sections from Phase 3]
``` **Critical Requirements:** ✅ Both YAML and JSON-LD metadata present ✅ LLM instructions hidden with `display:none` ✅ Instructions in `
AI SKILL META FACTORY

HTML Skill Creator

Build cross-platform AI skills in minutes

🏭 What This Does

This is a meta-skill – it creates other AI skills. Think of it as a factory that builds factories.

Starting with just your concept, it generates complete, production-ready HTML skill packages that work across all major LLMs (Claude, ChatGPT, Gemini, and more).

Input: Your skill idea and requirements

Output: Self-contained HTML file with embedded instructions, documentation, and integration code

Result: Universal AI skill deployable via single URL

What Gets Generated:

🚀 How to Use

Simply tell your AI assistant:

The Interview Process

The skill will ask you about:

  1. Purpose: What problem does this solve?
  2. Triggers: What phrases activate it?
  3. Inputs: What information is needed?
  4. Workflow: What are the steps?
  5. Edge Cases: What could go wrong?
  6. Output: What should the result look like?

💡 Tip: The more specific you are about workflow steps and edge cases, the better the generated skill will be. Think through the complete process before starting.

💡 How It Works

6-Phase Generation Process

Phase 1: Concept Extraction

Interactive interview to understand your skill requirements, trigger patterns, and desired behavior.

Phase 2: Instruction Generation

Creates complete, execution-ready LLM instructions with examples, edge cases, and quality gates.

Phase 3: Documentation Creation

Writes human-readable docs covering usage, integration, technical details, and troubleshooting.

Phase 4: HTML Assembly

Combines everything into a single HTML file with proper structure, metadata, and styling.

Phase 5: Validation

Verifies completeness, accuracy, and cross-platform compatibility.

Phase 6: Output & Publishing

Delivers HTML file with publishing instructions and integration snippets.

Single-File Architecture

Each generated skill is a self-contained HTML package:

  • Hidden Instructions: Complete LLM execution logic (in <script type="text/plain"> tags)
  • Visible Documentation: Human-readable usage guide and examples
  • Dual Metadata: Both YAML and JSON-LD for maximum compatibility
  • Zero Dependencies: Everything needed is embedded in one file

⚙️ For LLM Integration

Add this meta-skill to your AI assistant:

<skill>
  <name>html-skill-creator</name>
  <description>Creates universal HTML skill packages for cross-platform LLM deployment</description>
  <url>https://skills.masterymade.com/html-skill-creator.html</url>
</skill>

Generated Skills Work With

Publishing Generated Skills

Skills can be hosted anywhere that serves static HTML:

📦 Generated Skill Structure

Metadata (Both Formats)

Each skill includes machine-readable metadata in two formats:

LLM Instructions (Hidden)

Complete execution instructions including:

Human Documentation (Visible)

Professional docs covering:

Example Generated Skill:

substack-toc.html - Creates numbered table of contents for Substack articles

  • Complete workflow logic embedded
  • Anchor link generation rules
  • Before/after examples
  • Troubleshooting guide
  • Integration snippets

→ View Example Skill

🎯 Best Practices

When Designing Skills

Common Skill Types

Quality Standards

The "First Try" Test:

Would this skill work perfectly the first time another LLM uses it? If not, add more detail.

🔧 Publishing Workflow

Manual Publishing (Current)

  1. Generate skill HTML file
  2. Upload to your hosting (GitHub Pages, Vercel, etc.)
  3. Get public URL
  4. Add to your LLM's system prompt
  5. Test trigger phrases

Automated Publishing (Future)

Planned features:

Current State: Generates production-ready HTML files

Next Phase: End-to-end automation with one-command publishing

📊 Skill Metadata

Version:
1.0.0
Type:
Meta Factory (creates other skills)
Author:
MasteryMade
License:
MIT
Dependencies:
None
Platform:
Cross-platform (any LLM with web_fetch and create_file)
Output:
Self-contained HTML skill packages

🌐 Ecosystem Vision

The Network Effect

HTML skills create a universal skill ecosystem:

From Local to Global

Old Way (MD Skills):

  • Platform locked (Claude Desktop only)
  • Manual installation required
  • No updates without reinstalling
  • Can't share with others easily

New Way (HTML Skills):

  • Works everywhere (any LLM)
  • Zero installation (just URL)
  • Updates propagate instantly
  • Share with single link

The Leverage Cascade

  1. Build this meta-skill once (html-skill-creator)
  2. Use it to create 30 skills rapidly (minutes per skill)
  3. Each skill works cross-platform (universal access)
  4. Updates propagate automatically (edit once, update everywhere)
  5. Community discovers and uses (network effects)

🐛 Troubleshooting

Generated Skill Won't Trigger

Instructions Incomplete

Cross-Platform Issues