Integrates native device APIs with web applications for cross-platform mobile apps.
Install
mkdir -p .claude/skills/capacitor && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18149" && unzip -o skill.zip -d .claude/skills/capacitor && rm skill.zipInstalls to .claude/skills/capacitor
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Builds cross-platform mobile apps with Capacitor, bridging web apps to native device features. Use for hybrid mobile development.Key capabilities
- →Add Capacitor to a web project
- →Add iOS platform to a Capacitor project
- →Add Android platform to a Capacitor project
- →Sync Capacitor project with native platforms
- →Access native device features like Camera
- →Build cross-platform mobile apps
How it works
The skill integrates Capacitor into a web project, allowing the addition of iOS and Android platforms. It then synchronizes the web app with these native platforms, enabling access to device APIs.
Inputs & outputs
When to use capacitor
- →Native mobile feature access
- →Cross-platform app packaging
- →PWA to mobile app conversion
About this skill
Capacitor
Cross-platform native runtime for web apps with access to device APIs.
Quick Start
npm install @capacitor/core @capacitor/cli
npx cap init MyApp com.example.myapp
npx cap add ios
npx cap add android
When to Use
- Web to mobile app migration
- Accessing native device features
- Sharing code across platforms
- Progressive Web Apps to stores
Step-by-Step
- Build web app (React, Vue, etc.)
- Add Capacitor:
npx cap init - Add platforms:
npx cap add ios - Sync:
npx cap sync
Dependencies
npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
Examples
import { Camera } from '@capacitor/camera'
const image = await Camera.getPhoto({
quality: 90,
resultType: CameraResultType.Uri
})
Resources
Validation
- App builds for iOS/Android
- Native features work (camera, etc.)
- Hot reload works:
npx cap run ios
When not to use it
- →When building native-only mobile applications
- →When the user does not want to share code across platforms
- →When the user does not want to use web technologies for mobile development
Limitations
- →The skill is for hybrid mobile development
- →It relies on Capacitor for native feature access
How it compares
This skill bridges web technologies with native device capabilities, allowing web developers to create hybrid mobile applications without writing separate native codebases.
Compared to similar skills
capacitor side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| capacitor (this skill) | 0 | 1mo | Review | Beginner |
| screenshot-to-code | 204 | 1mo | No flags | Beginner |
| web-component-design | 5 | 4mo | No flags | Intermediate |
| web-development | 5 | 1mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by ssrjkk
View all by ssrjkk →You might also like
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
web-component-design
wshobson
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
web-development
TencentCloudBase
Web frontend project development rules. Use this skill when developing web frontend pages, deploying static hosting, and integrating CloudBase Web SDK.
webf-quickstart
openwebf
Get started with WebF development - setup WebF Go, create a React/Vue/Svelte project with Vite, and load your first app. Use when starting a new WebF project, onboarding new developers, or setting up development environment.
ai-model-web
TencentCloudBase
Use this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities. Features text generation (generateText) and streaming (streamText) via @cloudbase/js-sdk. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). NOT for Node.js backend (use ai-model-nodejs), WeChat Mini Program (use ai-model-wechat), or image generation (Node SDK only).
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.