Framework To Capacitor

If you're trying to turn a Next.js, React, or Vue app into a mobile app with Capacitor, this walks you through the entire setup. It covers the critical gotcha that Capacitor needs static exports, not SSR, and shows exactly how to configure Next.js with output: 'export', point Capacitor at the right build directory, and handle things like image optimization and routing that break in static mode. The framework support matrix is handy for checking what works. It's detailed enough that you can follow it step by step without hunting through Capacitor docs, and it includes the Live Project Snapshot commands to detect your current setup.

skills.sh installs: 912
GitHub stars: 77
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cap-go/capgo-skills --skill framework-to-capacitor --agent claude-code

Installs into .claude/skills of the current project.

Files

Framework to Capacitor

Make a framework emit a static bundle that Capacitor can copy into the native projects, and wire the scripts so build -> cap sync is one step.

When to Use

TRIGGER when:

Adding Capacitor to a Next.js, Nuxt, Angular, SvelteKit, Vite (React/Vue/Svelte/Solid), React Router, Qwik, or Astro project.
npx cap sync fails with The web assets directory (./dist) must contain an index.html file. or Could not find the web assets directory: ./dist.
The app launches to a white screen or loads the wrong page after a reload or deep link.
The framework build fails because of SSR-only features (output: 'export' errors, prerender errors, API routes, middleware, server actions).

Do not use for:

Store readiness, native UX, permissions, billing, review risk -> webapp-to-capacitor, capacitor-app-store, capacitor-apple-review-preflight.
Cordova/PhoneGap apps -> cordova-to-capacitor.
Capacitor version upgrades -> capacitor-app-upgrades.
Live updates setup -> capgo-live-updates.