[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EF7AS06CX92ENBTB075T28":3,"skill-same:01M6EF7AS06CX92ENBTB075T28":51},{"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":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EF7AS06CX92ENBTB075T28","ionic",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fionic\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# Ionic — Cross-Platform Apps with Web Technologies\n\n\n## Overview\n\n\nIonic, the open-source framework for building cross-platform mobile, desktop, and progressive web apps using web technologies (HTML, CSS, JavaScript\u002FTypeScript). Helps developers build apps with Ionic's UI components, integrate with native device APIs via Capacitor, and deploy to iOS, Android, and web from a single codebase.\n\n\n## Instructions\n\n### Project Setup\n\n```bash\n# Install Ionic CLI\nnpm install -g @ionic\u002Fcli\n\n# Create a new project (React, Angular, or Vue)\nionic start my-app tabs --type=react\ncd my-app\n\n# Run in browser\nionic serve\n\n# Add native platforms\nionic cap add ios\nionic cap add android\n\n# Build and sync to native\nionic cap sync\nionic cap open ios          # Opens Xcode\nionic cap open android      # Opens Android Studio\n```\n\n### UI Components\n\n```tsx\n\u002F\u002F src\u002Fpages\u002FHome.tsx — Ionic React component with native-feeling UI\n\u002F\u002F Ionic provides 100+ UI components that adapt to iOS\u002FAndroid automatically.\n\nimport {\n  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,\n  IonList, IonItem, IonLabel, IonBadge, IonSearchbar,\n  IonRefresher, IonRefresherContent, IonFab, IonFabButton,\n  IonIcon, IonSegment, IonSegmentButton, IonCard, IonCardHeader,\n  IonCardTitle, IonCardContent, IonChip, IonAvatar,\n} from \"@ionic\u002Freact\";\nimport { add, filterOutline } from \"ionicons\u002Ficons\";\nimport { useState } from \"react\";\n\nconst Home: React.FC = () => {\n  const [segment, setSegment] = useState(\"all\");\n  const [searchText, setSearchText] = useState(\"\");\n\n  const handleRefresh = async (event: CustomEvent) => {\n    await fetchTasks();\n    event.detail.complete();    \u002F\u002F Dismiss the refresher spinner\n  };\n\n  return (\n    \u003CIonPage>\n      \u003CIonHeader>\n        \u003CIonToolbar>\n          \u003CIonTitle>Tasks\u003C\u002FIonTitle>\n        \u003C\u002FIonToolbar>\n        \u003CIonToolbar>\n          \u003CIonSearchbar\n            value={searchText}\n            onIonInput={(e) => setSearchText(e.detail.value ?? \"\")}\n            placeholder=\"Search tasks...\"\n          \u002F>\n        \u003C\u002FIonToolbar>\n        \u003CIonToolbar>\n          \u003CIonSegment value={segment} onIonChange={(e) => setSegment(e.detail.value as string)}>\n            \u003CIonSegmentButton value=\"all\">\u003CIonLabel>All\u003C\u002FIonLabel>\u003C\u002FIonSegmentButton>\n            \u003CIonSegmentButton value=\"active\">\u003CIonLabel>Active\u003C\u002FIonLabel>\u003C\u002FIonSegmentButton>\n            \u003CIonSegmentButton value=\"done\">\u003CIonLabel>Done\u003C\u002FIonLabel>\u003C\u002FIonSegmentButton>\n          \u003C\u002FIonSegment>\n        \u003C\u002FIonToolbar>\n      \u003C\u002FIonHeader>\n\n      \u003CIonContent>\n        \u003CIonRefresher slot=\"fixed\" onIonRefresh={handleRefresh}>\n          \u003CIonRefresherContent \u002F>\n        \u003C\u002FIonRefresher>\n\n        \u003CIonList>\n          {tasks.map((task) => (\n            \u003CIonItem key={task.id} routerLink={`\u002Ftask\u002F${task.id}`}>\n              \u003CIonAvatar slot=\"start\">\n                \u003Cimg src={task.assignee.avatar} alt=\"\" \u002F>\n              \u003C\u002FIonAvatar>\n              \u003CIonLabel>\n                \u003Ch2>{task.title}\u003C\u002Fh2>\n                \u003Cp>{task.description}\u003C\u002Fp>\n              \u003C\u002FIonLabel>\n              \u003CIonBadge slot=\"end\" color={task.priority === \"high\" ? \"danger\" : \"medium\"}>\n                {task.priority}\n              \u003C\u002FIonBadge>\n            \u003C\u002FIonItem>\n          ))}\n        \u003C\u002FIonList>\n\n        \u003CIonFab vertical=\"bottom\" horizontal=\"end\" slot=\"fixed\">\n          \u003CIonFabButton routerLink=\"\u002Ftask\u002Fnew\">\n            \u003CIonIcon icon={add} \u002F>\n          \u003C\u002FIonFabButton>\n        \u003C\u002FIonFab>\n      \u003C\u002FIonContent>\n    \u003C\u002FIonPage>\n  );\n};\n```\n\n### Native APIs with Capacitor\n\n```typescript\n\u002F\u002F src\u002Fservices\u002Fnative.ts — Access device features via Capacitor plugins\nimport { Camera, CameraResultType, CameraSource } from \"@capacitor\u002Fcamera\";\nimport { Geolocation } from \"@capacitor\u002Fgeolocation\";\nimport { LocalNotifications } from \"@capacitor\u002Flocal-notifications\";\nimport { Share } from \"@capacitor\u002Fshare\";\nimport { Haptics, ImpactStyle } from \"@capacitor\u002Fhaptics\";\nimport { Preferences } from \"@capacitor\u002Fpreferences\";\n\n\u002F\u002F Camera — take photo or pick from gallery\nexport async function takePhoto(): Promise\u003Cstring> {\n  const image = await Camera.getPhoto({\n    quality: 80,\n    allowEditing: false,\n    resultType: CameraResultType.Uri,\n    source: CameraSource.Prompt,          \u002F\u002F Let user choose camera or gallery\n  });\n  return image.webPath!;\n}\n\n\u002F\u002F Geolocation\nexport async function getCurrentPosition() {\n  const coords = await Geolocation.getCurrentPosition({\n    enableHighAccuracy: true,\n  });\n  return {\n    lat: coords.coords.latitude,\n    lng: coords.coords.longitude,\n  };\n}\n\n\u002F\u002F Local notifications\nexport async function scheduleReminder(title: string, body: string, date: Date) {\n  await LocalNotifications.schedule({\n    notifications: [{\n      title,\n      body,\n      id: Date.now(),\n      schedule: { at: date },\n    }],\n  });\n}\n\n\u002F\u002F Share\nexport async function shareContent(title: string, text: string, url?: string) {\n  await Share.share({ title, text, url });\n}\n\n\u002F\u002F Haptic feedback\nexport async function hapticTap() {\n  await Haptics.impact({ style: ImpactStyle.Light });\n}\n\n\u002F\u002F Local storage (key-value, persists across app restarts)\nexport async function savePreference(key: string, value: string) {\n  await Preferences.set({ key, value });\n}\n\nexport async function getPreference(key: string): Promise\u003Cstring | null> {\n  const { value } = await Preferences.get({ key });\n  return value;\n}\n```\n\n### Theming\n\n```css\n\u002F* src\u002Ftheme\u002Fvariables.css — Custom theme *\u002F\n:root {\n  --ion-color-primary: #4f46e5;\n  --ion-color-primary-rgb: 79, 70, 229;\n  --ion-color-primary-contrast: #ffffff;\n  --ion-color-primary-shade: #463ec9;\n  --ion-color-primary-tint: #6158e8;\n\n  --ion-color-secondary: #06b6d4;\n  --ion-color-success: #22c55e;\n  --ion-color-warning: #f59e0b;\n  --ion-color-danger: #ef4444;\n\n  --ion-font-family: 'Inter', system-ui, sans-serif;\n}\n\n\u002F* Dark mode — Ionic auto-detects system preference *\u002F\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ion-background-color: #0f172a;\n    --ion-text-color: #e2e8f0;\n    --ion-card-background: #1e293b;\n  }\n}\n```\n\n## Installation\n\n```bash\nnpm install -g @ionic\u002Fcli\nnpm install @ionic\u002Freact @ionic\u002Freact-router\nnpm install @capacitor\u002Fcore @capacitor\u002Fcli\nnpm install @capacitor\u002Fcamera @capacitor\u002Fgeolocation  # Per-plugin\n```\n\n\n## Examples\n\n\n### Example 1: Setting up Ionic with a custom configuration\n\n**User request:**\n\n```\nI just installed Ionic. Help me configure it for my TypeScript + React workflow with my preferred keybindings.\n```\n\nThe agent creates the configuration file with TypeScript-aware settings, configures relevant plugins\u002Fextensions for React development, sets up keyboard shortcuts matching the user's preferences, and verifies the setup works correctly.\n\n### Example 2: Extending Ionic with custom functionality\n\n**User request:**\n\n```\nI want to add a custom ui components to Ionic. How do I build one?\n```\n\nThe agent scaffolds the extension\u002Fplugin project, implements the core functionality following Ionic's API patterns, adds configuration options, and provides testing instructions to verify it works end-to-end.\n\n\n## Guidelines\n\n1. **Capacitor over Cordova** — Capacitor is Ionic's modern native runtime; it supports any web framework and has better plugin ecosystem\n2. **Platform-adaptive components** — Ionic components auto-adapt to iOS\u002FAndroid look; don't override platform styles unless necessary\n3. **Lazy load pages** — Use React.lazy or Angular lazy modules for each page; keeps initial bundle small\n4. **Test in browser first** — Develop and debug with `ionic serve`; only test on device for native features (camera, GPS)\n5. **Use Ionic's CSS utilities** — Ionic includes padding, margin, text alignment utilities; avoid writing custom CSS for spacing\n6. **Progressive Web App first** — Ionic apps are PWAs by default; test the web version before adding native platforms\n7. **Capacitor plugins for native** — Always use Capacitor plugins over direct Cordova plugins; they have better TypeScript support\n8. **Live reload on device** — `ionic cap run ios --livereload --external` for instant feedback during native testing\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fionic",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill ionic",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill ionic",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill ionic","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fionic\u002FSKILL.md",true,[45],{"path":46,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":49,"sourceHtmlUrl":50},"customize.toml","OTHER","其他",4540,"https:\u002F\u002Fgithub.com\u002FdevelopAgent\u002Fbmad-start\u002Fblob\u002Fmain\u002F.qoder\u002Fskills\u002Fbmad-cis-agent-presentation-master\u002Fcustomize.toml",[52,66,76,85,91,98],{"skillNo":53,"name":54,"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":55,"categories":56,"keywords":62,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[57],{"categoryNo":58,"categoryName":59,"taxonomyType":60,"taxonomyTypeDesc":61},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[63,64,65],"model","model hierarchy","model hierarchy skill",{"skillNo":67,"name":68,"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":69,"categories":70,"keywords":72,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[71],{"categoryNo":58,"categoryName":59,"taxonomyType":60,"taxonomyTypeDesc":61},[73,74,75],"MCP","zoom","zoom mcp",{"skillNo":77,"name":78,"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":79,"categories":80,"keywords":81,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[82,83,84,74],"sdk","zoom apps sdk","apps",{"skillNo":86,"name":87,"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":88,"categories":89,"keywords":90,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[87],{"skillNo":92,"name":93,"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":94,"categories":95,"keywords":97,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[96],{"categoryNo":58,"categoryName":59,"taxonomyType":60,"taxonomyTypeDesc":61},[93],{"skillNo":99,"name":100,"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":101,"categories":102,"keywords":103,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[100]]