From lovable-to-app-store
Add a native Capacitor feature or plugin to a published app. Installs the plugin, wires up the code, rebuilds, and submits a new version to TestFlight and Play Store. Triggered by: "add haptics to [app]", "add camera", "add biometrics", "add [native feature] to [app]", "enable push notifications", "add native [feature]", "the new Capacitor [plugin] is out", "add Face ID", "add Apple Pay".
How this skill is triggered — by the user, by Claude, or both
Slash command
/lovable-to-app-store:add-nativeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Install and configure a Capacitor native plugin, update the app code, and submit a new build. Required whenever a feature needs platform-level APIs beyond what the web can provide.
Install and configure a Capacitor native plugin, update the app code, and submit a new build. Required whenever a feature needs platform-level APIs beyond what the web can provide.
| Feature | Package | Notes |
|---|---|---|
| Haptics / vibration | @capacitor/haptics (already installed) | May just need to be used in code |
| Camera | @capacitor/camera | Requires permission strings in Info.plist |
| Biometrics / Face ID | @capacitor-community/biometric-auth | Requires capability in Developer Portal |
| Push notifications | Already configured via OneSignal | Use OneSignal SDK |
| Local notifications | @capacitor/local-notifications | No extra permissions needed |
| File system access | @capacitor/filesystem | |
| Contacts | @capacitor-community/contacts | Requires NSContactsUsageDescription |
| Calendar | @capacitor-community/calendar | Requires calendar permission |
| In-app browser | @capacitor/browser | |
| Share sheet | @capacitor/share | |
| Clipboard | @capacitor/clipboard | |
| Geolocation | @capacitor/geolocation | Requires location permission strings |
| Apple Pay / Google Pay | @capacitor-community/stripe | Requires Stripe account + Apple Pay setup |
| Google Sign In | @codetrix-studio/capacitor-google-auth | Requires Supabase Edge Function — see ship skill references/07-google-native-signin.md. Native idToken alone won't work on Lovable-managed Supabase. |
| Apple Sign In | @capacitor-community/apple-sign-in | Requires Sign In with Apple capability + App.entitlements + Edge Function — see ship skill references/08-apple-native-signin.md. |
| NFC | @capacitor-community/nfc | iPhone XS+ only |
| Barcode / QR scanner | @capacitor-community/barcode-scanner | Requires camera permission |
| Health data | @capacitor-community/health | Requires HealthKit entitlement |
| Background tasks | @capacitor/background-runner | |
| Screen reader / accessibility | Built into platform | No plugin needed |
⚠️ Native Google/Apple Sign-In is NOT a single-package install. Installing the package and adding
signInWithOAuth()calls produces a token that Lovable-managed Supabase rejects (wrongaudclaim). The fix requires a Supabase Edge Function that exchanges the native auth code server-side. If the user asks to add Google or Apple Sign-In, switch to theshipskill'sreferences/07-google-native-signin.mdor08-apple-native-signin.md— the standard add-native workflow below will leave them with a broken sign-in flow.
Parse the user's request. If ambiguous (e.g., "add login with Apple"), clarify which specific capability they mean, then map to the right package.
ls ~/Documents/Claude/lovable-to-app-store/memory/apps/
Load the app's memory file. Get: github_repo, bundle_id, apple_team_id, capgo.api_key, build method.
if [ -d "/tmp/lovable-to-app-store/{repo-name}" ]; then
cd /tmp/lovable-to-app-store/{repo-name} && git pull origin main
else
git clone {github_repo} /tmp/lovable-to-app-store/{repo-name} --depth=1
fi
cd /tmp/lovable-to-app-store/{repo-name}
npm install {package-name}
npx cap sync
iOS — Info.plist (ios/App/App/Info.plist):
Add appropriate permission description key for the feature. Examples:
NSCameraUsageDescription — "This app needs camera access to [specific reason]."NSLocationWhenInUseUsageDescriptionNSContactsUsageDescriptionNSMicrophoneUsageDescriptionNSPhotoLibraryUsageDescriptionAndroid — AndroidManifest.xml (android/app/src/main/AndroidManifest.xml):
Add appropriate uses-permission. Examples:
<uses-permission android:name="android.permission.CAMERA" /><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />Features requiring Developer Portal capabilities:
Navigate to developer.apple.com → Certificates, Identifiers & Profiles → find the app's App ID → Edit → enable the required capability.
Find a natural place in the app to demonstrate the feature. Typically:
src/lib/native/{feature}.tsExample for haptics:
// src/lib/native/haptics.ts
import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { Capacitor } from '@capacitor/core';
export const hapticFeedback = async (style: 'light' | 'medium' | 'heavy' = 'medium') => {
if (!Capacitor.isNativePlatform()) return;
await Haptics.impact({ style: ImpactStyle[style.charAt(0).toUpperCase() + style.slice(1) as keyof typeof ImpactStyle] });
};
export const hapticSuccess = async () => {
if (!Capacitor.isNativePlatform()) return;
await Haptics.notification({ type: 'SUCCESS' } as any);
};
Show the user what was added and where to call it from their components.
npm run build
npx cap sync
Increment the version in package.json (patch version: 1.0.0 → 1.0.1):
npm version patch
Then follow the build and submit steps from ship skill references/04-build-and-submit.md.
This requires a new App Store submission (not OTA) because native code changed.
Update build.last_build_date and version in the app's memory file.
✅ Added {feature} to {AppName}
What was installed: {package-name}
What changed: [brief description of code added]
A new build has been submitted to TestFlight and Play internal testing.
This update requires users to install the new version from the store —
it cannot be delivered over-the-air since native code changed.
To use {feature} in your Lovable app, call:
import { hapticFeedback } from './lib/native/haptics'
hapticFeedback('light') // on button press, etc.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub mark-taikai/lovable-to-app-store --plugin lovable-to-app-store