Add StitchFlow external skill

External/stitchflow/SKILL.md

@@ -0,0 +1,106 @@
+---
+name: stitchflow
+description: Turn product briefs and mockups into Stitch UI screens, design variants, Tailwind-friendly HTML, and screenshots across Codex, Claude Code, OpenClaw, GitHub Copilot, and Gemini CLI.
+homepage: https://github.com/yshishenya/stitchflow
+compatibility: Requires Node.js 22+, a configured STITCH_API_KEY, and the local stitch-starter toolkit installed by this repository.
+metadata:
+  author: Yshishenya
+  category: External
+category: design
+install: bash install.sh --target all
+legacy_aliases: stitch-design-local
+platforms: codex, claude-code, openclaw, github-copilot, gemini-cli
+slug: stitchflow
+toolkit_root: ${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}
+version: 1.3.0
+---
+
+# StitchFlow
+
+Use this skill when the user wants to create a new screen, refine an existing one, generate design variants, or export local HTML and screenshots through Stitch.
+
+It uses the local toolkit at `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}` instead of a Stitch MCP tool.
+
+## Local setup
+
+- Toolkit root: `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}`
+- API key is expected in `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/.env`
+- Outputs are saved to `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs`
+- The latest single-screen result is tracked in `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs/latest-screen.json`
+
+## When to use
+
+- The user says to use Stitch or StitchFlow
+- The user wants a screen generated from a brief, spec, or rough idea
+- The user wants design variants before implementation
+- The user wants targeted visual edits to a generated screen
+- The user wants HTML and screenshots exported locally for review
+
+## Workflow routing
+
+- New screen from a prompt or brief:
+  Read [text-to-design](workflows/text-to-design.md)
+- Targeted changes to an existing Stitch screen:
+  Read [edit-design](workflows/edit-design.md)
+- Multiple directions from one base screen:
+  Read [variants](workflows/variants.md)
+
+## Core rules
+
+1. Before any Stitch command, rewrite the user request into a stronger design prompt.
+2. If the user already has a codebase or UI context, inspect it first and carry that context into the prompt.
+3. Prefer `DESKTOP` by default unless the user clearly asks for mobile or tablet.
+4. For first-pass exploration, prefer one generated screen plus `3` variants.
+5. If a screen is already close, prefer `edit` over full regeneration.
+6. Always tell the user where the resulting files were saved.
+7. Never print or expose `STITCH_API_KEY` or `.env` contents.
+
+## What good output looks like
+
+- the brief is rewritten into a stronger design prompt
+- the right Stitch workflow is chosen: generate, edit, or variants
+- the command completes and saves artifacts locally
+- the response includes project id, screen id, output folder, and what to do next
+
+## Prompt shaping
+
+Use [prompt-keywords](references/prompt-keywords.md) to translate vague requests into design language Stitch understands better.
+
+Structure prompts like this:
+
+```md
+[overall vibe, product intent, and audience]
+
+Platform: [web/mobile], [desktop/mobile]-first
+
+Page goal:
+- what the screen is for
+- what primary action matters most
+
+Page structure:
+1. Header / navigation
+2. Main content / hero / dashboard body
+3. Secondary content
+4. Footer / actions / supporting detail
+
+Visual direction:
+- palette roles
+- typography tone
+- spacing density
+- component style
+```
+
+## After running Stitch
+
+Report:
+
+- the command used at a high level, not the secret env
+- the project and screen ids
+- the output folder under `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs`
+- the HTML and image artifact paths if they were downloaded
+- a short design assessment and the best next step
+
+## References
+
+- [cli-usage](references/cli-usage.md)
+- [prompt-keywords](references/prompt-keywords.md)

External/stitchflow/agents/openai.yaml

@@ -0,0 +1,8 @@
+interface:
+  display_name: "StitchFlow"
+  short_description: "Turn product briefs into Stitch screens, variants, Tailwind HTML, and screenshots"
+  brand_color: "#1C6BFF"
+  default_prompt: "Use $stitchflow to turn my brief and product context into a Stitch screen, edit or explore variants, and save Tailwind-ready HTML and screenshots locally."
+
+policy:
+  allow_implicit_invocation: true

External/stitchflow/references/cli-usage.md

@@ -0,0 +1,75 @@
+# Local CLI Usage
+
+All commands run from:
+
+```bash
+cd "${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}"
+```
+
+## List projects and screens
+
+```bash
+npm run list
+```
+
+Use this when you need to discover existing `projectId` and `screenId` values.
+
+## Generate a new screen
+
+```bash
+npm run generate -- --prompt "..."
+```
+
+Optional flags:
+
+- `--project-id 123456789`
+- `--title "Project Name"`
+- `--device DESKTOP|MOBILE|TABLET|AGNOSTIC`
+
+## Edit a screen
+
+If `latest-screen.json` exists, you can edit without ids:
+
+```bash
+npm run edit -- --prompt "..."
+```
+
+Or target a specific screen:
+
+```bash
+npm run edit -- --project-id 123 --screen-id abc --prompt "..."
+```
+
+## Generate variants
+
+```bash
+npm run variants -- --prompt "..." --variant-count 3
+```
+
+Useful options:
+
+- `--creative-range REFINE|EXPLORE|REIMAGINE`
+- `--aspects LAYOUT,COLOR_SCHEME,IMAGES,TEXT_FONT,TEXT_CONTENT`
+- `--project-id 123 --screen-id abc`
+
+## Output layout
+
+Each run creates a folder under:
+
+```text
+${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs/<timestamp>-<operation>-<slug>/
+```
+
+Typical artifacts:
+
+- `result.json` or `variants.json`
+- `screen.html`
+- `screen.png` or `screen.jpeg`
+- `html-url.txt`
+- `image-url.txt`
+
+The most recent single-screen result is tracked in:
+
+```text
+${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs/latest-screen.json
+```

External/stitchflow/references/prompt-keywords.md

@@ -0,0 +1,79 @@
+# Prompt Keywords
+
+Use these terms to convert vague visual requests into prompts Stitch can act on.
+
+## Layout and sections
+
+- navigation bar
+- sticky header
+- sidebar layout
+- hero section
+- card grid
+- stat cards
+- split layout
+- tabbed content
+- settings panel
+- footer
+
+## Inputs and actions
+
+- primary button
+- secondary button
+- ghost button
+- icon button
+- search input
+- form actions
+- dropdown
+- toggle switch
+- step indicator
+
+## Visual tone
+
+- minimal
+- polished
+- premium
+- futuristic
+- editorial
+- enterprise clean
+- playful
+- brutalist
+- dark mode
+
+## Shape and density
+
+- sharp edges
+- gently rounded corners
+- generously rounded corners
+- compact density
+- balanced spacing
+- generous whitespace
+
+## Color roles
+
+- page background
+- surface color
+- card background
+- primary text
+- secondary text
+- muted text
+- primary accent
+- secondary accent
+- success color
+- warning color
+- error color
+
+## Example transformation
+
+Weak:
+
+```text
+Make it cooler and nicer
+```
+
+Stronger:
+
+```text
+Create a polished desktop web dashboard with a sidebar layout, compact stat cards,
+gently rounded corners, a dark surface background, high-contrast primary text,
+and one strong electric-blue primary accent for calls to action.
+```

External/stitchflow/workflows/edit-design.md

@@ -0,0 +1,49 @@
+---
+description: Edit an existing Stitch screen through the local starter toolkit.
+---
+
+# Workflow: Edit-Design
+
+## Steps
+
+1. Identify the target screen.
+- Prefer the latest screen if the user is iterating on the most recent result.
+- Otherwise discover ids with:
+
+```bash
+cd "${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}"
+npm run list
+```
+
+2. Rewrite the user request into a focused edit prompt.
+Good edit prompts name:
+- the section
+- the component
+- the visual change
+- the intended effect
+
+3. Run the edit command:
+
+```bash
+cd "${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}"
+npm run edit -- --prompt "..."
+```
+
+Or target a specific screen:
+
+```bash
+cd "${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}"
+npm run edit -- --project-id ... --screen-id ... --prompt "..."
+```
+
+4. Report:
+- original or base screen id
+- new screen id
+- saved output folder
+- whether the new direction is closer to the user's goal
+
+## Best practice
+
+- Keep each edit focused
+- Prefer a few iterative edits over one overloaded prompt
+- If the user wants multiple visual directions, switch to [variants](variants.md)

External/stitchflow/workflows/text-to-design.md

@@ -0,0 +1,35 @@
+---
+description: Generate a new Stitch screen from a brief using the local starter toolkit.
+---
+
+# Workflow: Text-to-Design
+
+## Steps
+
+1. Read the user's brief and, if relevant, inspect the current project for style, layout, and component patterns.
+2. Rewrite the brief into a structured Stitch prompt using [prompt-keywords](../references/prompt-keywords.md).
+3. If the user named a Stitch project, use it. Otherwise create or reuse a suitable project by calling:
+
+```bash
+cd "${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}"
+npm run list
+```
+
+4. Generate the screen:
+
+```bash
+cd "${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}"
+npm run generate -- --prompt "..." [--project-id ...] [--device DESKTOP]
+```
+
+5. Read the output folder path from the command result and report back:
+- project id
+- screen id
+- saved folder
+- whether HTML and screenshot were downloaded
+
+## Default behavior
+
+- Default device: `DESKTOP`
+- If the user wants exploration, follow generation with the [variants](variants.md) workflow
+- If the layout is basically right but polish is off, use [edit-design](edit-design.md) instead of regenerating