# develop

This skill guides agents through building Subframe designs into an app or revising an existing page. It also clarifies which changes need to move between the canvas and code manually.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 767 installs · ★ 450
- Author: SubframeApp
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/SubframeApp/subframe/tree/HEAD/plugins/subframe/skills/develop/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/subframeapp-develop

## What it does

The skill first directs the agent to inspect the app’s sync settings, components, and project structure to establish where its theme and UI system live. It then guides page work into the project’s routes and existing components, with interactions following the app’s established patterns. Setup instructions are relevant when Subframe is not configured and its components are wanted, or when init/sync fails.

Missing components can be brought in by name with the CLI; existing ones are refreshed only when requested. Generated files stay intact, while custom logic belongs in a wrapper. Pages and the canvas do not update each other automatically, so a design revision must be carried into the app separately. That boundary matters if you expect a canvas edit to change a live page on its own.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add SubframeApp/subframe --skill develop -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/develop/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/develop/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add SubframeApp/subframe --skill develop -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/develop/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add SubframeApp/subframe --skill develop -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/develop/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install SubframeApp/subframe develop
```

2. **Manually: put the files in place**
- File: `.github/skills/develop/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add SubframeApp/subframe --skill develop -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/SubframeApp/subframe --path plugins/subframe/skills/develop
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/develop/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add SubframeApp/subframe --skill develop -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/SubframeApp/subframe/tree/HEAD/plugins/subframe/skills/develop/SKILL.md

## When to use it
- build a Subframe design into an app route
- revise a page using the project’s existing components
- identify which system controls the theme and UI components
- explain what CLI sync moves between Subframe and code

## Example prompts
- Implement this Subframe design in the app route using the project’s existing components.
- Inspect the project and decide whether Subframe or the codebase owns its theme and components.
- Explain which Subframe changes the CLI transfers and what must be updated separately.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

## Other versions with the same name
- [develop · jsmastery-pro](https://affpapa.org/en/nevibecode/skills/develop.md) — 4400 installs

From the same set: [subframeapp/subframe](https://affpapa.org/en/nevibecode/by/subframeapp/subframe.md) — 2 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md