npx skills add https://github.com/mindrally/skills --skill ionic您是一位精通 Ionic 框架的专家,擅长构建跨平台移动应用。
src/
├── app/
│ ├── features/
│ │ ├── auth/
│ │ ├── home/
│ │ └── settings/
│ ├── shared/
│ │ ├── components/
│ │ ├── services/
│ │ └── pipes/
│ └── core/
│ ├── guards/
│ └── interceptors/
├── assets/
└── theme/
import { NavController } from '@ionic/angular';
constructor(private navCtrl: NavController) {}
navigateForward() {
this.navCtrl.navigateForward('/details');
}
navigateBack() {
this.navCtrl.back();
}
ion-header、ion-content、 构建页面结构广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
ion-footerion-list、ion-item 创建列表ion-button、ion-fab 处理操作ion-modal、ion-popover 实现覆盖层使用 SCSS 编写组件特定样式
利用 Ionic CSS 变量进行主题定制
需要时应用平台特定样式
使用响应式工具类适配不同屏幕尺寸
:host { --ion-background-color: var(--ion-color-light); }
.custom-card { --background: var(--ion-color-primary-tint); }
loadChildren使用 Ionic Native 包装器调用原生功能
为原生特性实现 Web 后备方案
妥善处理平台差异
import { Camera } from '@ionic-native/camera/ngx';
async takePicture() { const image = await this.camera.getPicture(options); return image; }
每周安装量
152
代码仓库
GitHub 星标数
43
首次出现
2026年1月25日
安全审计
安装于
opencode128
gemini-cli127
codex121
github-copilot118
cursor113
amp105
You are an expert in Ionic for building cross-platform mobile applications.
src/
├── app/
│ ├── features/
│ │ ├── auth/
│ │ ├── home/
│ │ └── settings/
│ ├── shared/
│ │ ├── components/
│ │ ├── services/
│ │ └── pipes/
│ └── core/
│ ├── guards/
│ └── interceptors/
├── assets/
└── theme/
import { NavController } from '@ionic/angular';
constructor(private navCtrl: NavController) {}
navigateForward() {
this.navCtrl.navigateForward('/details');
}
navigateBack() {
this.navCtrl.back();
}
ion-header, ion-content, ion-footer for page structureion-list, ion-item for listsion-button, ion-fab for actionsion-modal, ion-popover for overlaysUse SCSS for component-specific styles
Leverage Ionic CSS variables for theming
Apply platform-specific styling when needed
Use responsive utilities for different screen sizes
:host { --ion-background-color: var(--ion-color-light); }
.custom-card { --background: var(--ion-color-primary-tint); }
loadChildren in routing configurationUse Ionic Native wrappers for native functionality
Implement web fallbacks for native features
Handle platform differences appropriately
import { Camera } from '@ionic-native/camera/ngx';
async takePicture() { const image = await this.camera.getPicture(options); return image; }
Weekly Installs
152
Repository
GitHub Stars
43
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode128
gemini-cli127
codex121
github-copilot118
cursor113
amp105
Sentry React Native SDK 设置指南:React Native/Expo 错误监控、性能追踪与回放
384 周安装
Swift并发代码审查工具 - 专业版 | Swift 6.2 并发正确性检查
2,400 周安装
Spring Boot 安全最佳实践指南 | JWT认证、授权、SQL注入防护、密码编码
2,400 周安装
Uncodixify 指南:避免 AI 风格 UI,打造人类设计的专业界面 | 反 Codex 设计
2,300 周安装
n8n节点配置指南:操作感知与渐进式披露最佳实践
2,300 周安装
Python测试指南:pytest、TDD与最佳实践,提升代码质量与覆盖率
2,300 周安装
REST API 设计模式与最佳实践指南:构建一致、开发者友好的接口
2,400 周安装