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
Curated skill
Quality Good · 64
v1.0.0
Get
https://deepseekmodel.com/api/download.php?id=capawesome-team-skills-skills-ionic-expert-skill-md&format=skill
Download .skill
Standard format with system_prompt and model_config, ready for any agent framework
The actual content of the system_prompt field in the .skill file.
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.
Keywords that activate this skill. Click one to copy it.
This skill does not provide trigger words.
The downloaded .skill package contains the following fields.
| Field | Description |
|---|---|
| format | Format tag (skill/v1) |
| skill_id | Unique skill ID |
| name | Skill name |
| version | Version |
| description | Description |
| category | Categories (array) |
| trigger_words | Trigger words |
| tags | Tags |
| source | Source |
| source_url | Source URL (this page) |
| exported_at | Exported at (set per download) |
| system_prompt | System prompt body |
| model_config | Model config: provider / model / temperature / max_tokens / top_p |
| examples | Examples |
| install_guide | Import guide for Coze / Dify / Claude / custom frameworks |
The same skill can be exported in different platform formats.
