[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7EMFDMSPZDZCPC87C5SNAKC":3,"skill-same:01M7EMFDMSPZDZCPC87C5SNAKC":45},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":23,"commitSha":24,"skillDirectory":25,"forksCount":26,"repositoryHtmlUrl":27,"repositoryHomepageUrl":6,"ownerHtmlUrl":28,"ownerBlogUrl":29,"ownerDescription":6,"updatedAt":30,"install":31,"resources":44},"01M7EMFDMSPZDZCPC87C5SNAKC","ams-capacitor-pro",null,"TanNhatCMS\u002Fjarvis","TanNhatCMS","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F113796420?v=4","01M753MV17KG5CD3152G3WQEQY","KietNT","01M7EKEDYVYQ6PWVJJMZ911VMX",0,"MIT","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fams-capacitor-pro\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: capacitor-pro\ndescription: Ship iOS\u002FAndroid apps with Capacitor: web codebase, native plugins, live updates, and store builds. Use when wrapping a web app as native mobile apps.\ncategory: development\n---\n\n# Capacitor Pro\n\nA practical guide to Capacitor: turning a web app into native iOS and Android apps with full access to native APIs via plugins — setup, the plugin bridge, platform projects, live updates, and store deployment.\n\n## Overview\n\nCapacitor wraps your built web app in a native shell with a WebView, plus a plugin bridge to native APIs (camera, filesystem, push notifications, geolocation...). Unlike older \"write once\" web containers, Capacitor embraces the native projects: `ios\u002F` and `android\u002F` are real, editable Xcode\u002FGradle projects checked into your repo. You own the native side.\n\nThe flow: **web code → `npx cap sync` → native projects → build in Xcode\u002FAndroid Studio → stores.**\n\n## When to use\n\n- An existing web app (React, Vue, Angular, plain JS) needs iOS\u002FAndroid apps.\n- You want native features (push, camera, biometrics) without going fully native.\n- Teams that are web-first but need store presence.\n- OTA content updates without full store review (within store policy limits).\n\n## Core concepts\n\n- **The bridge.** `Plugins.Camera.getPhoto(...)` in JS calls native code. Official plugins cover the essentials; community plugins fill gaps; you can write custom native plugins (Swift\u002FKotlin) when needed.\n- **`npx cap sync`.** Copies your web build output into the native projects and updates plugin native code. Run after every web build and every plugin install.\n- **Native projects are source.** `ios\u002F` and `android\u002F` are checked in and editable — add native dependencies, entitlements, deep links directly. Capacitor regenerates only what it owns.\n- **Config (`capacitor.config.ts`).** App ID, app name, web directory (`dist`), server settings for live reload during development.\n- **Live reload.** Point the native app at your dev server (`server.url`) for instant iteration on a device — then clear it for production builds.\n- **Push notifications.** Via the Push Notifications plugin + FCM (Android) \u002F APNs (iOS). Certificates, entitlements, and token handling are the fiddly parts — budget time.\n- **Live updates.** Services exist to push web-bundle updates over the air. Allowed for web content; native changes still need store review. Stay within Apple\u002FGoogle policy (no changing app purpose or sneaking features past review).\n\n## Practical workflow\n\n**1. Add to a web app.**\n```bash\nnpm i @capacitor\u002Fcore @capacitor\u002Fcli\nnpx cap init \"MyApp\" com.example.myapp --web-dir=dist\nnpm i @capacitor\u002Fcamera @capacitor\u002Fpush-notifications   # plugins you need\nnpx cap add ios\nnpx cap add android\n```\n\n**2. Use a plugin.**\n```ts\nimport { Camera, CameraResultType } from '@capacitor\u002Fcamera';\n\nconst photo = await Camera.getPhoto({\n  resultType: CameraResultType.Uri,\n  quality: 90,\n});\n\u002F\u002F photo.webPath -> display; photo.path -> native file access\n```\nAlways wrap in try\u002Fcatch — users deny permissions, and simulators lack cameras.\n\n**3. Dev loop.**\n```bash\nnpm run build && npx cap sync\n# then run from Xcode \u002F Android Studio on a device\n```\nFor speed: set `server.url` to your LAN dev server + `cleartext: true` for live reload during development.\n\n**4. Platform specifics.** iOS: set bundle ID, signing team, capabilities (push, associated domains) in Xcode. Android: `applicationId`, signing config, permissions in `AndroidManifest.xml`.\n\n**5. Build for stores.** iOS: Archive in Xcode → App Store Connect. Android: signed AAB (`.\u002Fgradlew bundleRelease`). Automate signing in CI with secrets — never commit keystores or provisioning profiles.\n\n**6. Maintain.** After Capacitor major upgrades, re-run `npx cap sync`, check plugin compatibility, and re-verify permissions — upgrades are the #1 source of \"it worked last release\" bugs.\n\n## Common pitfalls\n\n- **Forgetting `cap sync`.** Web changes not appearing on device? You built but didn't sync. Make it part of the build script.\n- **Permissions as an afterthought.** Camera\u002Flocation\u002Fnotifications need `Info.plist` entries (iOS, with usage descriptions) and manifest entries + runtime requests (Android). Missing usage descriptions = instant App Store rejection.\n- **Simulator-only testing.** Push notifications, cameras, and performance behave differently on real devices. Test on hardware before submission.\n- **WebView quirks.** iOS WKWebView and Android WebView differ: scrolling behavior, input focus, file access. Test both; use `viewport-fit=cover` and safe-area insets for notched devices.\n- **Storing secrets in the web bundle.** The JS bundle is readable. API keys in web code are public — use a backend or native secure storage (Keychain\u002FKeystore via plugins).\n- **OTA overreach.** Pushing native-code-equivalent changes or altering app purpose via live update violates store policy. Web content and bug fixes only.\n- **Plugin rot.** Community plugins lag behind Capacitor majors. Prefer official plugins; vet community ones for maintenance activity before depending on them.\n- **Ignoring app lifecycle.** `appStateChange` \u002F `pause` \u002F `resume` events — persist state, refresh stale data on resume, handle deep links (`appUrlOpen`) for auth callbacks.\n","# Capacitor Pro\n\nA practical guide to Capacitor: turning a web app into native iOS and Android apps with full access to native APIs via plugins — setup, the plugin bridge, platform projects, live updates, and store deployment.\n\n## Overview\n\nCapacitor wraps your built web app in a native shell with a WebView, plus a plugin bridge to native APIs (camera, filesystem, push notifications, geolocation...). Unlike older \"write once\" web containers, Capacitor embraces the native projects: `ios\u002F` and `android\u002F` are real, editable Xcode\u002FGradle projects checked into your repo. You own the native side.\n\nThe flow: **web code → `npx cap sync` → native projects → build in Xcode\u002FAndroid Studio → stores.**\n\n## When to use\n\n- An existing web app (React, Vue, Angular, plain JS) needs iOS\u002FAndroid apps.\n- You want native features (push, camera, biometrics) without going fully native.\n- Teams that are web-first but need store presence.\n- OTA content updates without full store review (within store policy limits).\n\n## Core concepts\n\n- **The bridge.** `Plugins.Camera.getPhoto(...)` in JS calls native code. Official plugins cover the essentials; community plugins fill gaps; you can write custom native plugins (Swift\u002FKotlin) when needed.\n- **`npx cap sync`.** Copies your web build output into the native projects and updates plugin native code. Run after every web build and every plugin install.\n- **Native projects are source.** `ios\u002F` and `android\u002F` are checked in and editable — add native dependencies, entitlements, deep links directly. Capacitor regenerates only what it owns.\n- **Config (`capacitor.config.ts`).** App ID, app name, web directory (`dist`), server settings for live reload during development.\n- **Live reload.** Point the native app at your dev server (`server.url`) for instant iteration on a device — then clear it for production builds.\n- **Push notifications.** Via the Push Notifications plugin + FCM (Android) \u002F APNs (iOS). Certificates, entitlements, and token handling are the fiddly parts — budget time.\n- **Live updates.** Services exist to push web-bundle updates over the air. Allowed for web content; native changes still need store review. Stay within Apple\u002FGoogle policy (no changing app purpose or sneaking features past review).\n\n## Practical workflow\n\n**1. Add to a web app.**\n```bash\nnpm i @capacitor\u002Fcore @capacitor\u002Fcli\nnpx cap init \"MyApp\" com.example.myapp --web-dir=dist\nnpm i @capacitor\u002Fcamera @capacitor\u002Fpush-notifications   # plugins you need\nnpx cap add ios\nnpx cap add android\n```\n\n**2. Use a plugin.**\n```ts\nimport { Camera, CameraResultType } from '@capacitor\u002Fcamera';\n\nconst photo = await Camera.getPhoto({\n  resultType: CameraResultType.Uri,\n  quality: 90,\n});\n\u002F\u002F photo.webPath -> display; photo.path -> native file access\n```\nAlways wrap in try\u002Fcatch — users deny permissions, and simulators lack cameras.\n\n**3. Dev loop.**\n```bash\nnpm run build && npx cap sync\n# then run from Xcode \u002F Android Studio on a device\n```\nFor speed: set `server.url` to your LAN dev server + `cleartext: true` for live reload during development.\n\n**4. Platform specifics.** iOS: set bundle ID, signing team, capabilities (push, associated domains) in Xcode. Android: `applicationId`, signing config, permissions in `AndroidManifest.xml`.\n\n**5. Build for stores.** iOS: Archive in Xcode → App Store Connect. Android: signed AAB (`.\u002Fgradlew bundleRelease`). Automate signing in CI with secrets — never commit keystores or provisioning profiles.\n\n**6. Maintain.** After Capacitor major upgrades, re-run `npx cap sync`, check plugin compatibility, and re-verify permissions — upgrades are the #1 source of \"it worked last release\" bugs.\n\n## Common pitfalls\n\n- **Forgetting `cap sync`.** Web changes not appearing on device? You built but didn't sync. Make it part of the build script.\n- **Permissions as an afterthought.** Camera\u002Flocation\u002Fnotifications need `Info.plist` entries (iOS, with usage descriptions) and manifest entries + runtime requests (Android). Missing usage descriptions = instant App Store rejection.\n- **Simulator-only testing.** Push notifications, cameras, and performance behave differently on real devices. Test on hardware before submission.\n- **WebView quirks.** iOS WKWebView and Android WebView differ: scrolling behavior, input focus, file access. Test both; use `viewport-fit=cover` and safe-area insets for notched devices.\n- **Storing secrets in the web bundle.** The JS bundle is readable. API keys in web code are public — use a backend or native secure storage (Keychain\u002FKeystore via plugins).\n- **OTA overreach.** Pushing native-code-equivalent changes or altering app purpose via live update violates store policy. Web content and bug fixes only.\n- **Plugin rot.** Community plugins lag behind Capacitor majors. Prefer official plugins; vet community ones for maintenance activity before depending on them.\n- **Ignoring app lifecycle.** `appStateChange` \u002F `pause` \u002F `resume` events — persist state, refresh stale data on resume, handle deep links (`appUrlOpen`) for auth callbacks.\n",{},"main","af388a77c2fe5e0b4fd879cca4300a0ffa9a6579","skills\u002Fams-capacitor-pro",1,"https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis","https:\u002F\u002Fgithub.com\u002FTanNhatCMS","https:\u002F\u002Fmrkiet.name.vn","2026-11-07 14:23:08",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add TanNhatCMS\u002Fjarvis --skill ams-capacitor-pro",{"tool":37,"command":38},"bunx","bunx skills add TanNhatCMS\u002Fjarvis --skill ams-capacitor-pro",{"tool":40,"command":41},"pnpm","pnpm dlx skills add TanNhatCMS\u002Fjarvis --skill ams-capacitor-pro","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fams-capacitor-pro\u002FSKILL.md",true,[],[46,53,61,68,75,82],{"skillNo":47,"name":48,"nameZh":6,"description":49,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":50,"categories":51,"keywords":52,"publishedAt":18},"01M7EWYJR0J8DARY7E59Z6Y9MV","web-scrape","Turn web pages into LLM-ready markdown via the Firecrawl API (renders JS, anti-bot handling). Use when browser_open\u002Ffetch fails on JS-heavy pages, or when you need clean markdown\u002Fstructured extraction from a site. Requires FIRECRAWL_API_KEY.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fweb-scrape\u002FSKILL.md",[],[],{"skillNo":54,"name":55,"nameZh":6,"description":56,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":57,"sourceHtmlUrl":58,"categories":59,"keywords":60,"publishedAt":18},"01M7EWYBN5P6F2AJG3FR24T9BP","design-taste-frontend","tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML\u002FCSS, React, Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated, \"AI-made\", sloppy, or asks to make it look designed, premium, award-level or less like every other site. Not for dashboards or app screens.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Ftaste-design\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Ftaste-design\u002FSKILL.md",[],[],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":67,"publishedAt":18},"01M7EWY8FQFNQ2GB7NZZWGSSDX","test-driven-development","Use when implementing any feature or bugfix, before writing implementation code","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-tdd\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":18},"01M7EWY5SHBFRH1HDHVWM9K7TV","systematic-debugging","Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-debugging\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":18},"01M7EWY3NM0Z0JAKS7HDZ24K66","requesting-code-review","Use when completing tasks, implementing major features, or before merging to verify work meets requirements","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-code-review\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":18},"01M7EWY0WRMWX4M9ZFY0WKC593","brainstorming","You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or planning anything new, in software or out of it (a talk, a business, a renovation).","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-brainstorming\u002FSKILL.md",[],[]]