stitch-skill-creator

Stitch Skill Creator

This skill guides the creation of new Stitch Scenario Skills. A Scenario Skill is a specialized "Prompt Architect" for a specific domain (e.g., stitch-ui-music-designer, stitch-ui-blog-designer).

Core Philosophy

All Stitch Skills created by this creator MUST adhere to the Stitch Design SOP:

1. Trigger Safety: The skill must ONLY trigger when the user explicitly mentions "Stitch".
2. Design First: Never execute. Always construct a high-quality prompt first.
3. Self-Contained: The skill should act as a specialized "Prompt Template" that encapsulates domain knowledge (e.g., a Music App needs a "Play Button", "Cover Art").

Workflow (Progressive Disclosure)

Keep this file concise. Use bundled references when you need full details:

• Workflow: references/workflows.md
• Output patterns: references/output-patterns.md

Quick start (Automated Creation)

Option A: Automated Creation (Recommended)

Use the bundled script to automatically generate the skill structure, SKILL.md (with Golden Template), and examples/usage.md.

# Usage: ./scripts/init_stitch_skill.py <scenario-name> --path <skills-directory>
./scripts/init_stitch_skill.py music-designer --path skills/

This will automatically:

1. Create skills/stitch-ui-music-designer.
2. Populate SKILL.md with the required SOP and Templates.
3. Create examples/usage.md.

Option B: Manual Creation (Only if needed)

Follow: references/workflows.md -> Manual creation.

Step 1: Define the Scenario

Identify the domain and name the skill following the strict naming convention: stitch-ui-<scenario>-designer.

• Example Scenario: "Music Apps"
• Skill Name: stitch-ui-music-designer (MUST start with stitch-ui-)
• Example Scenario: "Login Pages"
• Skill Name: stitch-ui-login-designer

Step 2: Create Directory Structure

mkdir -p skills/stitch-ui-<scenario>-designer/examples

Step 3: Write SKILL.md (The Golden Template)

You MUST use the following template for the new skill. It enforces the required SOP.

---


# <Scenario> Screen Designer

**Constraint**: Only use this skill when the user explicitly mentions "Stitch" or when orchestrating a Stitch design task.

This skill helps you construct high-quality prompts for <Scenario> flows to be used by the Stitch Orchestrator.

## Functionality
It encapsulates best practices for <Scenario> UI design and translates user intent into a structured Stitch prompt.

## Integration with Stitch Designer SOP
This skill is part of the **Stitch UI Orchestration** flow.
1.  **Orchestrator**: `stitch-ui-designer` calls this skill when a scenario-specific prompt is needed.
2.  **Guidelines**: You MUST apply principles from `stitch-ued-guide` (e.g., visual vocabulary, device constraints).
3.  **Output**: You do NOT execute. You return a prompt only.

## Prompt Template

When the user asks for a <Scenario> screen, use this template to construct the prompt:

```text
[Context]
[Device] <Scenario> screen for [App Name]. [Style] aesthetic.

[Layout]
Header: [...]
Body: [...]
Footer: [...]

[Components]
- [...]
- [...]
```

## Output Format (STRICT)

Return exactly one code block and no extra prose:

```text
[Context]
...

[Layout]
...

[Components]
...
```

## Usage in Orchestrator
This skill is designed to be called by `stitch-ui-designer`. It does NOT execute; it returns a prompt only.

Step 4: Write examples/usage.md

Provide at least 2 distinct examples of how this skill transforms a vague request into a detailed prompt.

Best Practices for New Skills

1. Domain Specificity: The value of a Scenario Skill is in its specific knowledge.
   • Bad: "A page with text."
   • Good (Music): "A player view with a scrubbing bar, album art, and waveform visualization."
2. Device Awareness: Ensure the template supports Mobile (default) and Desktop.
3. No Direct Execution: The Scenario Skill must not call any MCP tool. It produces the prompt that the Orchestrator uses.

References

• Examples
• Workflows
• Output Patterns
• Init Script