stitch-skill-creator

Stitch Skill Creator

A factory for creating new stitch-kit skills. Enforces standard structure, naming conventions, and the plugin's architectural patterns.

When to use this skill

• Adding support for a new framework (e.g. "Astro", "Qwik", "Flutter")
• Creating a domain-specific prompt architect (e.g. stitch-ui-ecommerce-architect)
• Adding a new quality tool (e.g. stitch-performance, stitch-seo)
• Any time you need a new SKILL.md that integrates with the stitch-kit ecosystem

---

Naming conventions

Skill type	Name pattern	Example
Framework conversion	stitch-[framework]-components	stitch-astro-components
Domain prompt architect	stitch-ui-[domain]-architect	stitch-ui-ecommerce-architect
MCP wrapper	stitch-mcp-[tool-name]	stitch-mcp-edit-screen
Quality / analysis tool	stitch-[capability]	stitch-performance
Meta / utility	stitch-[name]	stitch-setup

Rules:

• Always kebab-case
• Always starts with stitch-
• Framework conversion skills end with -components
• MCP wrappers follow stitch-mcp-{snake_case_tool → kebab} from docs/mcp-naming-convention.md

---

Required directory structure

skills/[skill-name]/
├── SKILL.md              ← Required: frontmatter + workflow (keep under 500 lines)
├── examples/
│   └── usage.md          ← Required: 2+ worked examples
├── resources/            ← Optional: templates, checklists, reference tables
│   ├── component-template.[ext]
│   └── architecture-checklist.md
├── scripts/              ← Optional: bash scripts
│   └── fetch-stitch.sh   ← Copy from stitch-mcp-get-screen/scripts/ if needed
└── references/           ← Optional: style guides, contracts, long reference docs

---

SKILL.md template

---
name: stitch-[skill-name]
description: [One clear sentence — when to use this skill and what it does. This is used for routing by the orchestrator and for marketplace display.]
allowed-tools:
  - "stitch*:*"   # Include if skill calls Stitch MCP tools
  - "Bash"        # Include if skill runs shell commands
  - "Read"        # Usually yes
  - "Write"       # Usually yes
---

# Stitch → [Target] [Type]

**Constraint:** Only use this skill when the user explicitly mentions "Stitch" [and any additional trigger condition].

[One sentence explaining what this skill does and who the agent "is" while using it.]

## When to use this skill vs. similar skills

[Table comparing this skill to its nearest alternatives — help the orchestrator route correctly]

## Prerequisites

[What the user/environment needs before this skill can run]

## Step 1: Retrieve the design

1. Run `list_tools` → find Stitch MCP prefix
2. Call `[prefix]:get_screen` with numeric `projectId` and `screenId`
3. Download HTML: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"`

## Step 2: [Core conversion / workflow]

[The main logic of this skill]

## Step N: Output

[What the skill produces — files, code, commands]

## Troubleshooting

| Issue | Fix |
|-------|-----|

## References

- `resources/component-template.[ext]` — [description]
- `resources/architecture-checklist.md` — Pre-ship checklist
- `scripts/fetch-stitch.sh` — Reliable GCS HTML downloader

---

Examples template (examples/usage.md)

# [Skill Name] — Usage Examples

## Example 1: [Scenario title]

**User:** "[Specific user request]"

**Skill activates because:** [Why this triggers the skill]

**What the skill does:**
1. [Step 1]
2. [Step 2]
3. ...

**Output:**
[Description or code snippet of what gets generated]

---

## Example 2: [Different scenario]

[Same format]

---

Architecture checklist template (resources/architecture-checklist.md)

Adapt this to the target platform/framework:

# [Framework] Components — Architecture Checklist

Run through this checklist before marking the task complete.

## Structure
- [ ] [Project structure check]
- [ ] Components are in separate files

## [Framework-specific category]
- [ ] [Framework-specific check]

## TypeScript / Types
- [ ] No `any` types
- [ ] All props have Readonly<> wrapper

## Dark mode
- [ ] Theme tokens used everywhere — no hardcoded colors

## Accessibility
- [ ] All interactive elements are keyboard accessible
- [ ] Images have descriptive alt text

## Performance
- [ ] No console.log in production code

---

Creating a framework conversion skill

For a new framework (e.g. Astro):

1. Create the directory

mkdir -p skills/stitch-astro-components/resources
mkdir -p skills/stitch-astro-components/examples
mkdir -p skills/stitch-astro-components/scripts

2. Copy the fetch script

cp skills/stitch-mcp-get-screen/scripts/fetch-stitch.sh \
   skills/stitch-astro-components/scripts/fetch-stitch.sh

3. Write SKILL.md

Use the template above. Key sections for framework skills:

• When to use vs. similar skills — distinguish from Next.js, Svelte, etc.
• Project structure — show the file layout
• HTML → Framework mapping — table of HTML/CSS patterns → framework equivalents
• Design tokens — how to handle Stitch's CSS variables in this framework
• Dark mode — how this framework handles it
• Accessibility — framework-specific ARIA patterns

4. Create component template

Write resources/component-template.[ext] — a working boilerplate component that demonstrates:

• Props interface
• Theme token usage
• Dark mode
• Accessibility attributes
• Conditional rendering patterns

5. Create architecture checklist

Write resources/architecture-checklist.md with framework-specific checks.

6. Write examples

At least 2 examples in examples/usage.md.

7. Register in marketplace.json

Add to the appropriate plugin group in .claude-plugin/marketplace.json:

• Web frameworks → stitch-frameworks
• Mobile → stitch-mobile
• New category → create a new group

8. Update docs/skills-index.md

Add the new skill to the table.

9. Update README.md

Add to the appropriate layer table.

---

Creating a domain-specific prompt architect

For a new domain (e.g. e-commerce):

The skill name: stitch-ui-ecommerce-architect

This skill does not generate or execute — it produces a structured Stitch prompt. Pattern:

1. Identify domain-specific components (product card, cart, checkout flow, review stars, etc.)
2. Define the [Context] [Layout] [Components] prompt template for this domain
3. Reference stitch-ued-guide for visual vocabulary
4. Output is: a ready-to-use prompt for stitch-mcp-generate-screen-from-text

---

References

• docs/skills-index.md — existing skills (check before creating duplicates)
• docs/mcp-naming-convention.md — MCP tool naming rules
• stitch-nextjs-components/SKILL.md — reference for a well-structured framework conversion skill
• stitch-swiftui-components/SKILL.md — reference for a mobile platform skill