From stitch-kit
Creates new stitch-kit skills enforcing naming conventions, SKILL.md structure, examples format, and Design-First SOP. Use for adding framework support, domain-specific prompts, or new capabilities.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stitch-kit:stitch-skill-creatorThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
A factory for creating new **stitch-kit skills**. Enforces standard structure, naming conventions, and the plugin's architectural patterns.
A factory for creating new stitch-kit skills. Enforces standard structure, naming conventions, and the plugin's architectural patterns.
stitch-ui-ecommerce-architect)stitch-performance, stitch-seo)| 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:
stitch--componentsstitch-mcp-{snake_case_tool → kebab} from docs/mcp-naming-convention.mdskills/[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
---
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
# [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]
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
For a new framework (e.g. Astro):
mkdir -p skills/stitch-astro-components/resources
mkdir -p skills/stitch-astro-components/examples
mkdir -p skills/stitch-astro-components/scripts
cp skills/stitch-mcp-get-screen/scripts/fetch-stitch.sh \
skills/stitch-astro-components/scripts/fetch-stitch.sh
Use the template above. Key sections for framework skills:
Write resources/component-template.[ext] — a working boilerplate component that demonstrates:
Write resources/architecture-checklist.md with framework-specific checks.
At least 2 examples in examples/usage.md.
Add to the appropriate plugin group in .claude-plugin/marketplace.json:
stitch-frameworksstitch-mobileAdd the new skill to the table.
Add to the appropriate layer table.
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:
[Context] [Layout] [Components] prompt template for this domainstitch-ued-guide for visual vocabularystitch-mcp-generate-screen-from-textdocs/skills-index.md — existing skills (check before creating duplicates)docs/mcp-naming-convention.md — MCP tool naming rulesstitch-nextjs-components/SKILL.md — reference for a well-structured framework conversion skillstitch-swiftui-components/SKILL.md — reference for a mobile platform skillnpx claudepluginhub gabelul/stitch-kit --plugin stitch-kitUse when creating new skills, restructuring existing skills, or improving skill documentation. Generates SKILL.md + references/ structure with proper patterns.
Creates directory and SKILL.md scaffold with YAML frontmatter for new Claude skills. Invoke via /create-skill [kebab-case-name] when starting skills from scratch.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.