ionic-expert
A comprehensive starting point for AI agents to work with the Ionic Framework. Covers core concepts, components, CLI, theming, layout, lifecycle, navigation, and framework-specific patterns for Angular, React, and Vue. Pair with the other Ionic skills in this collection for deeper topic-specific guidance like app creation, framework integration, and upgrades.
DeepseekModel
官方收录技能
质量 良好 · 64
v1.0.0
获取
https://deepseekmodel.com/api/download.php?id=capawesome-team-skills-skills-ionic-expert-skill-md&format=skill
下载 .skill
标准格式，含 system_prompt 与 model_config，导入任意 Agent 框架即可使用
.skill 文件中 system_prompt 字段的实际内容。
name ionic-expert description A comprehensive starting point for AI agents to work with the Ionic Framework. Covers core concepts, components, CLI, theming, layout, lifecycle, navigation, and framework-specific patterns for Angular, React, and Vue. Pair with the other Ionic skills in this collection for deeper topic-specific guidance like app creation, framework integration, and upgrades. license MIT compatibility Requires Node.js, npm, and the Ionic CLI. metadata {"author":"capawesome-team","source":"https://github.com/capawesome-team/skills/tree/main/skills/ionic-expert"} Ionic Expert Comprehensive reference for Ionic Framework development — core concepts, components, theming, lifecycle, navigation, framework-specific patterns (Angular, React, Vue), upgrading, and Capawesome Cloud integration. MCP Servers Two hosted MCP servers serve the current documentation, so both are always ahead of the guidance bundled with this skill: Capawesome MCP server — the Capawesome plugins, the Capawesome CLI, and Capawesome Cloud. Ionic Framework MCP server (unofficial) — the Ionic Framework UI components, their API reference, and the official usage examples per framework. Both expose search_docs and get_doc_page , so pick the server by topic before calling either. If the MCP tools are available , call search_docs on the server that owns the topic and read the matching page with get_doc_page before applying the guidance below. Where the two disagree, follow the documentation. If they are not available , mention once that the servers can be added with the commands below, then continue with this skill. Never block on it. claude mcp add --transport http capawesome "https://mcp.capawesome.io/mcp" claude mcp add --transport http ionic-framework "https://ionic-framework-mcp.capawesome.io/mcp" Neither server needs an account or a token for documentation. See the capawesome-mcp and ionic-framework-mcp skills for full setup, including the Capawesome Cloud tools. Core Concepts Ionic Framework is a UI toolkit for building cross-platform apps with web technologies. It provides 80+ pre-built UI components as Web Components prefixed with ion- (e.g., <ion-button> , <ion-content> ). Platform modes : Components adapt styling to the platform. iOS devices use ios mode; Android and all other platforms use md (Material Design). The <html> element receives a class ( ios or md ). Capacitor integration : Ionic handles the UI; Capacitor handles native device APIs. See the capacitor-app-development skill for Capacitor guidance. Framework support : Ionic integrates with Angular ( @ionic/angular ), React ( @ionic/react ), and Vue ( @ionic/vue ). Creating a New App npm install -g @ionic/cli ionic start <name> <template> -- type =<framework> --capacitor --package-id=< id > --type value Framework angular Angular (NgModules) angular-standalone Angular (Standalone Components) react React vue Vue Template Description blank Empty project, single page tabs Tab-based layout sidemenu Side menu layout For details, see ionic-app-creation . Ionic CLI Run ionic --help for the full and always up-to-date command list. Command Description ionic start Scaffold a new Ionic project. ionic serve Start a local dev server with live reload (port 8100). ionic build Build the web app for production. ionic generate Generate pages, components, services (framework-dependent). ionic info Print system/environment info. ionic repair Remove and recreate dependencies and platform files. Useful ionic serve flags: --external (all network interfaces), --port=<port> , --prod , --no-open . Components Overview Ionic provides 80+ UI components organized by category. For full API reference (properties, events, methods, slots, CSS custom properties), see the linked reference files. Layout ion-app (root container), ion-content (scrollable area), ion-header , ion-footer , ion-toolbar , ion-title , ion-buttons , ion-back-button , ion-grid / ion-row / ion-col , ion-split-pane . Key usage: < ion-header > < ion-toolbar > < ion-buttons slot = "start" > < ion-back-button defaultHref = "/home" > </ ion-back-button > </ ion-buttons > < ion-title > Page Title </ ion-title > </ ion-toolbar > </ ion-header > < ion-content > <!-- Scrollable content --> </ ion-content > For details, see components-layout.md . Navigation ion-tabs , ion-tab-bar , ion-tab-button , ion-menu , ion-menu-button , ion-menu-toggle , ion-router-outlet , ion-nav , ion-breadcrumbs . For details, see components-navigation.md . Form ion-input , ion-textarea , ion-select / ion-select-option , ion-checkbox , ion-toggle , ion-radio / ion-radio-group , ion-range , ion-datetime / ion-datetime-button , ion-searchbar , ion-segment / ion-segment-button , ion-input-otp . Key properties shared by most form components: label , labelPlacement ( floating , stacked , fixed , start ), fill ( outline , solid ), errorText , helperText , disabled , value , placeholder . Key events: ionInput — fires on each keystroke (use for ion-input / ion-textarea ). ionChange — fires when value is committed (use for ion-select , ion-toggle , ion-checkbox , ion-range ). < ion-input label = "Email" labelPlacement = "floating" fill = "outline" type = "email" placeholder = "you@example.com" errorText = "Invalid email" helperText = "Enter your email" > </ ion-input > < ion-select label = "Country" labelPlacement = "floating" fill = "outline" interface = "popover" > < ion-select-option value = "us" > United States </ ion-select-option > < ion-select-option value = "de" > Germany </ ion-select-option > </ ion-select > For details, see components-form.md . Overlays ion-modal , ion-alert , ion-toast , ion-action-sheet , ion-loading , ion-popover . All overlays share: isOpen prop for declarative control, trigger prop to open from a button ID, backdropDismiss , animated , and lifecycle events ( didPresent , didDismiss , willPresent , willDismiss ). Sheet modal (bottom sheet): < ion-modal [ isOpen ]= "isOpen" [ breakpoints ]= "[0, 0.5, 1]" [ initialBreakpoint ]= "0.5" [ handle ]= "true" > < ion-content > Sheet content </ ion-content > </ ion-modal > For details, see components-overlay.md . Data Display ion-list , ion-item , ion-item-sliding / ion-item-options / ion-item-option , ion-card / ion-card-header / ion-card-content , ion-accordion / ion-accordion-group , ion-chip , ion-badge , ion-label , ion-note . For details, see components-data-display.md . Scroll ion-refresher / ion-refresher-content (pull-to-refresh), ion-infinite-scroll / ion-infinite-scroll-content , ion-reorder-group / ion-reorder . For details, see components-scroll.md . Actions & Media ion-button , ion-fab / ion-fab-button , ion-icon , ion-avatar , ion-thumbnail , ion-spinner , ion-skeleton-text , ion-progress-bar . For details, see components-action.md and components-media.md . Theming Colors Nine default colors: primary , secondary , tertiary , success , warning , danger , light , medium , dark . Apply via the color attribute: < ion-button color = "primary" > Save </ ion-button > < ion-button color = "danger" > Delete </ ion-button > Customize a color by overriding all six CSS variables in :root : :root { --ion-color-primary : #3880ff ; --ion-color-primary-rgb : 56 , 128 , 255 ; --ion-color-primary-contrast : #ffffff ; --ion-color-primary-contrast-rgb : 255 , 255 , 255 ; --ion-color-primary-shade : #3171e0 ; --ion-color-primary-tint : #4c8dff ; } Global CSS Variables Key variables: --ion-background-color , --ion-text-color , --ion-font-family , --ion-safe-area-top/right/bottom/left , --ion-margin , --ion-padding . Dark Mode Three approaches (import from @ionic/angular/css/ , @ionic/react/css/ , or @ionic/vue/css/ ): System preference (default): @import '@ionic/<framework>/css/palettes/dark.system.css'; Always dark : @import '@ionic/<framework>/css/palettes/dark.always.css'; CSS class toggle : @import '@ionic/<framework>/css/palettes/dark.class.css'; then add .ion-palette-dark to <html> . Platform Styles Target platform-specific styles in CSS using the mode class on <html> : .ios ion-toolbar { --background : #f8f8f8 ; } .md ion-toolbar { --background : #ffffff ; } Preview a specific mode in the browser: http://localhost:8100/?ionic:mode=ios Layout Grid System 12-column flexbox grid: ion-grid , ion-row , ion-col . Columns expand evenly unless size (1-12) is specified.
Agent 识别该技能的关键词，点击任意一个即可复制。
该技能未提供触发词。
下载的 .skill 包内含以下字段。
| 字段 | 说明 |
|---|---|
| format | 格式标识（skill/v1） |
| skill_id | 技能唯一 ID |
| name | 技能名称 |
| version | 版本号 |
| description | 技能描述 |
| category | 所属分类（数组） |
| trigger_words | 触发词列表 |
| tags | 标签列表 |
| source | 来源标识 |
| source_url | 来源链接（本页地址） |
| exported_at | 导出时间（每次下载生成） |
| system_prompt | 系统提示词正文 |
| model_config | 模型参数：provider / model / temperature / max_tokens / top_p |
| examples | 示例 |
| install_guide | 各平台导入说明（Coze / Dify / Claude / 自定义框架） |
