Modify for OpenCode

An optional OpenCode command and skill for implementing visual frontend changes exported by Modify.

Modify lets you adjust a rendered webpage in Chrome and copy a structured implementation prompt. This companion teaches OpenCode how to map that browser evidence back to the owning React, Vue, Tailwind, CSS, or HTML source without blindly adding inline styles.

Install

Install into the current project:

npx modify-opencode init

Or install for every OpenCode project on your machine:

npx modify-opencode init --global

The installer refuses to replace existing files unless you explicitly pass --force. Preview the exact destinations first with:

npx modify-opencode init --dry-run

Use

1. Open your frontend in Chrome.
2. Use Modify to adjust styles, layout, text, or comments.
3. Click Copy AI Prompt.
4. In OpenCode, type /modify and paste the exported prompt after the command.
5. Review the source diff and the validation OpenCode reports.

The companion installs:

.opencode/
├── commands/
│   └── modify.md
└── skills/
    └── modify-frontend/
        └── SKILL.md

The /modify command uses OpenCode's $ARGUMENTS placeholder. The modify-frontend skill tells the agent how to interpret selectors, before-and-after values, text replacements, deletion actions, component/source hints, and per-element comments.

This follows OpenCode's documented project/global locations for custom commands and Agent Skills. Both installed assets are plain Markdown, so teams can inspect, version, and adapt them with the rest of a project.

Local development

npm test
npm run check
node ./bin/modify-opencode.js init --dry-run

To test an actual project-level install from this checkout:

node /path/to/modify-opencode/bin/modify-opencode.js init

What this is not

This package does not connect the Modify extension to an OpenCode process, edit your repository from Chrome, or send page content to OpenCode automatically. It installs plain Markdown instructions. You still choose when to copy a prompt, paste it into OpenCode, review the diff, and accept the implementation.

Modify for OpenCode is an independent community project. It is not built by, endorsed by, or affiliated with the OpenCode team.

License

MIT