clone

What it does and when to use it

Walk through any existing Windows app (native or web), screenshot every screen, menu, and dialog, write a screen index, and turn it into user stories. Use when the user wants to clone, rebuild, replace, or copy the design of an app, or says "screenshot every screen".

Triggers from the description

Arguments

/clone <app name as in Task Manager, or a URL>

How it works

1. 1. Pick the tool
2. 2. Agree on privacy
3. 3. Save real files
4. 4. Walk the app in this order
5. 5. Write docs/screens/INDEX.md
6. Done when

---
name: clone
description: Walk through any existing Windows app (native or web), screenshot every screen, menu, and dialog, write a screen index, and turn it into user stories. Use when the user wants to clone, rebuild, replace, or copy the design of an app, or says "screenshot every screen".
argument-hint: "<app name as in Task Manager, or a URL>"
---

# Clone

Output: a folder of screenshots, one index that describes everything the
app shows, and a backlog built from it.

```text
docs/screens/
  INDEX.md
  01-inbox.png
  02-today.png
  ...
docs/STORIES.md      (from the user-stories skill)
```

## 1. Pick the tool

| The app is | Use |
| --- | --- |
| A native Windows app, or Electron | Computer use or `window-shot.ps1` |
| A web app | A browser tool: built-in browser or Playwright |

## 2. Agree on privacy

Tell the user you will see everything in the app. Suggest a demo account or
sample data. Look, do not touch: open screens and menus, press Escape to
close dialogs. Type or change data only when instructed.

## 3. Save real files

Save each screen at full resolution with the script in this skill:

```powershell
& "${PHANTEE_SKILL_DIR}\scripts\window-shot.ps1" "<AppName>" docs/screens/01-inbox.png
```

## 4. Walk the app in this order

1. Main window, default page.
2. Every navigation item, top to bottom.
3. Every view mode (list, grid, board), sort menu, filter menu.
4. One item opened in detail: fields, notes, status.
5. Creation flows: add button, quick-add panel, inline editor.
6. Context menus on an item, a section, a navigation entry.
7. Title bar, menu bar, and CommandBar items.
8. Settings: every tab.
9. Empty states.
10. Dark mode: the main pages again.

## 5. Write docs/screens/INDEX.md

One section per screenshot:

```markdown
## 01-inbox.png

Page: Inbox. Reached from: NavigationView > Inbox.
Layout: CommandBar at top with Add button; master list; detail pane on the right.
Elements: task row (checkbox, title, description, star icon).
Actions: complete, select, star, delete.
Shortcuts seen: Ctrl+N (new task), Delete (delete task).
```

## Done when

`docs/screens/INDEX.md` exists and lists every capture, and you called the
`user-stories` skill.

Versions

Database snapshot: 13.11.2026 · package version fded46da3f2b (SHA-256 digest of the entire package)

Downloads in the last 30 days: 0 · ranking

Report a problem with this skill: harmful content, incorrect descriptions or an author’s removal request.

Similar skills

• 90regenerate-screen-index
  Use to rebuild the ScreenIndex navigation hub from the Screen_*.html files actually present in documents/ — after adding, removing, or renaming prototype screens. Triggers on "regenerate the screen index", "rebuild the index", "the index is out of date", "update the navigation hub".
• 100user-stories
  Prioritized backlog of user stories with checkable acceptance criteria (docs/STORIES.md) for a Windows app, built from a brief, research, or screen index. Use after app-brief or clone, or when the user asks for user stories, a backlog, a feature list, or "what do we build first".
• 100replicate-screen
  Rebuild UI screenshots (app windows, dialogs, start menus, settings pages, dashboards, web pages) as pixel-accurate HTML/CSS, verified by rendering and diffing against the original. Use when the user shares a screenshot and says replicate, rebuild, recreate, clone, "build this",…
• 100user-stories
  Turn a brief or screen index into a backlog (docs/STORIES.md) for a Windows app, with checkable acceptance criteria, organized in milestones. Use when the brief is done, or before writing code.
• 100windows-design
  Design rules that make a WinUI 3 app look and feel like a native Windows 11 app, from the Fluent design principles to Mica, the title bar, navigation, command bars, menus, keyboard, type, color, and dark mode. Use when building or reviewing any window, page, command bar, menu,…
• 100figma-from-code
  Rebuild a mobile app or a web app in Figma from its code - every screen in light and dark with its states, responsive desktop, tablet and mobile views for the web, a design system of components and variables, an optional brand deck - in reviewed batches. Use when someone wants…