develop · subframeapp — Subframe skill for Claude Code: features and setup
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.
npx skills add SubframeApp/subframe --skill develop -a claude-codeWhat develop 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.
What it helps with
- 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 for the agent
- 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.
How to install develop
1Skills CLI (Vercel)
npx skills add SubframeApp/subframe --skill develop -a claude-code2Manually: put the files in place
~/.claude/skills/develop/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/develop/
1Skills CLI (Vercel)
npx skills add SubframeApp/subframe --skill develop -a codex2Manually: put the files in place
.agents/skills/develop/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add SubframeApp/subframe --skill develop -a cursor2Manually: put the files in place
.cursor/skills/develop/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install SubframeApp/subframe develop2Manually: put the files in place
.github/skills/develop/SKILL.md1Skills CLI (Vercel)
npx skills add SubframeApp/subframe --skill develop -a gemini-cli2Platform CLI
gemini skills install https://github.com/SubframeApp/subframe --path plugins/subframe/skills/developManually: put the files in place
.devin/skills/develop/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add SubframeApp/subframe --skill develop -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about develop
How do I install develop in Claude Code?
Run npx skills add SubframeApp/subframe --skill develop -a claude-code. The skill file is available at ~/.claude/skills/develop/SKILL.md.
What does the develop skill do?
It guides agents building or revising Subframe pages in an app, using either synced Subframe components or the project’s own UI system. It also covers component setup and the canvas-to-code boundary.
Does CLI sync keep app pages in step with the canvas?
No. The CLI handles components and theme files; page code is separate. When a design changes, fetch the updated page and merge the relevant changes into the app.
Similar skills
Everything for Design →develop by other authors comes first.
