Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Ionic Framework · LeoYeAI | DecimalAI

Ionic Framework

SkillScore59Maintained

ionic-framework

Comprehensive Ionic Framework expert skill consolidating core concepts, component reference, CLI usage, theming, layout, page lifecycle, framework-specific patterns for Angular/React/Vue, navigation, upgrading, Capacitor integration, and Capawesome Cloud CI/CD. Provides inline guidance for the most common Ionic development tasks and links to detailed skills for deeper coverage. Do not use for Capacitor-only apps without Ionic UI components (use capacitor-app-development), for creating a new Ioni

Frontendby LeoYeAI

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/ionic-framework/SKILL.md

decimalai skills pull ionic-framework --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/ionic-framework/SKILL.md https://app.decimal.ai/s/ionic-framework/SKILL.md

Raw file: /s/ionic-framework/SKILL.md ↗ · machine-readable summary at /s/ionic-framework.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 56d ago

Yes — +50% lift · at higher cost+323% tokens0% turns59% of whole cases pass with skill (13/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-11	✗→✓	▲ Improved	—	—
case-03	✗→✓	▲ Improved	—	—
case-09	✗→✓	▲ Improved	—	—
case-17	✗→✓	▲ Improved	—	—
case-05	✗→✓	▲ Improved	—	—

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 7/30/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

LeoYeAI / openclaw-master-skills

skills/ionic-framework/SKILL.md

View on GitHub ↗

License MITImported 8/2/2026Version v1

Skill contents

SKILL.md

Ionic Framework

Comprehensive reference for Ionic Framework development — core concepts, components, theming, lifecycle, navigation, framework-specific patterns (Angular, React, Vue), upgrading, and Capawesome Cloud integration.

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

bash
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:

html
<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).

html
<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):

html
<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:

html
<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:

css
: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>:

css
.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.

| Breakpoint | Min Width | Property Suffix | | ---------- | --------- | --------------- | | xs | 0 | Xs | | sm | 576px | Sm | | md | 768px | Md | | lg | 992px | Lg | | xl | 1200px | Xl |

CSS Utility Classes

Padding: .ion-padding, .ion-padding-top/bottom/start/end, .ion-no-padding
Margin: .ion-margin, .ion-margin-top/bottom/start/end, .ion-no-margin
Text: .ion-text-center, .ion-text-start, .ion-text-end, .ion-text-wrap, .ion-text-nowrap
Display: .ion-display-none, .ion-display-block, .ion-display-flex
Flex: .ion-justify-content-center, .ion-align-items-center, .ion-flex-row, .ion-flex-column

All utility classes support responsive suffixes: .ion-text-md-center (applies at 768px+).

Page Lifecycle

Ionic provides four lifecycle hooks that fire during page transitions. These exist because ion-router-outlet caches pages in the DOM — framework-native lifecycle hooks (ngOnInit, useEffect, onMounted) only fire once on first creation, not on every page visit.

| Hook | Fires When | Use For | | -------------------- | -------------------------------- | -------------------------------------- | | ionViewWillEnter | Page about to enter (pre-animation) | Refresh data on every visit | | ionViewDidEnter | Page fully entered (post-animation) | Start animations, focus inputs | | ionViewWillLeave | Page about to leave (pre-animation) | Save state, pause subscriptions | | ionViewDidLeave | Page fully left (post-animation) | Clean up off-screen resources |

Critical rules:

Only fire on components directly mapped to a route via ion-router-outlet.
Child components do not receive these events.
The component must use the framework-specific page wrapper (see framework sections below).

Framework-Specific Patterns

Angular

For full details, see ionic-angular.

Detect architecture: Check src/main.ts for bootstrapApplication (standalone) vs platformBrowserDynamic().bootstrapModule (NgModule).

| Aspect | Standalone | NgModule | | ----------------- | ---------------------------------------------- | ------------------------------------------ | | Ionic setup | provideIonicAngular({}) in app.config.ts | IonicModule.forRoot() in app.module.ts | | Component imports | Each from @ionic/angular/standalone | IonicModule provides all globally | | Lazy loading | loadComponent in routes | loadChildren in routes | | Icons | addIcons() from ionicons required | Automatic |

Navigation: Use NavController from @ionic/angular for animated navigation (navigateForward, navigateBack, navigateRoot, back). Use routerLink with routerDirection in templates.

Lifecycle: Implement interfaces ViewWillEnter, ViewDidEnter, ViewWillLeave, ViewDidLeave from @ionic/angular:

typescript
import { ViewWillEnter } from '@ionic/angular';

@Component({ /* ... */ })
export class HomePage implements ViewWillEnter {
  ionViewWillEnter() {
    this.loadData(); // Runs on every page visit
  }
}

For navigation details, see angular/navigation.md. For lifecycle details, see angular/lifecycle.md.

React

For full details, see ionic-react.

Key setup differences:

Call setupIonicReact() before rendering in src/main.tsx.
Use IonReactRouter (from @ionic/react-router) instead of BrowserRouter.
Use IonRouterOutlet to contain routes with the component prop (not render or children).
Every page must render IonPage as root — required for transitions and lifecycle hooks.

Navigation: Use useIonRouter hook for programmatic navigation:

typescript
import { useIonRouter } from '@ionic/react';

const router = useIonRouter();
router.push('/detail/123', 'forward', 'push');
router.goBack();

Lifecycle hooks (from @ionic/react):

typescript
import { useIonViewWillEnter } from '@ionic/react';

useIonViewWillEnter(() => {
  fetchData(); // Runs on every page visit
});

Overlay hooks: useIonAlert, useIonToast, useIonActionSheet, useIonLoading, useIonModal, useIonPopover, useIonPicker.

Form events: Use onIonInput for IonInput/IonTextarea, onIonChange for IonSelect/IonToggle/IonCheckbox/IonRange. Access values via e.detail.value.

For routing details, see react/routing.md. For hooks, see react/hooks.md.

Vue

For full details, see ionic-vue.

Key setup differences:

Install IonicVue plugin in src/main.ts: createApp(App).use(IonicVue).use(router).
Import createRouter from @ionic/vue-router (not from vue-router).
Every page must use IonPage as root template element — without it, transitions and lifecycle hooks silently fail.
Import all Ionic components from @ionic/vue.
Use kebab-case for event names in templates (@ion-change, @ion-input).
Import icons as SVG references from ionicons/icons — never as strings.

Navigation: Use useIonRouter composable:

vue
<script setup lang="ts">
import { useIonRouter } from '@ionic/vue';

const ionRouter = useIonRouter();
ionRouter.push('/detail/123');
ionRouter.back();
</script>

Declarative: <ion-button router-link="/detail" router-direction="forward">Go</ion-button>

Lifecycle hooks (from @ionic/vue):

vue
<script setup lang="ts">
import { onIonViewWillEnter } from '@ionic/vue';

onIonViewWillEnter(() => {
  fetchData(); // Runs on every page visit
});
</script>

Composables: useIonRouter(), useBackButton(priority, handler), useKeyboard(), isPlatform(name), getPlatforms().

Access Web Component methods via $el: contentRef.value.$el.scrollToBottom(300).

For navigation details, see vue/navigation.md. For composables, see vue/composables.md.

Navigation Patterns

Tab Navigation

Each framework uses ion-tabs with ion-tab-bar and child routes per tab. Each tab maintains its own navigation stack.

Rules:

The tab attribute on ion-tab-button must match the child route path.
Never navigate between tabs programmatically — only the tab bar buttons should switch tabs.
For shared views across tabs, use ion-modal instead of cross-tab routing.

Side Menu

Use ion-menu with contentId matching the id on ion-router-outlet. Wrap menu items in ion-menu-toggle to auto-close after selection. Use routerDirection="root" for top-level menu navigation.

Linear vs. Non-Linear Routing

Linear: Sequential forward/back navigation (list -> detail -> edit). Back button returns to the previous page.
Non-linear: Multiple independent stacks (tabs). Back navigation stays within the current tab's stack.

Use non-linear routing for tabs or split-pane layouts. Use linear routing for simple page flows.

Upgrading

Ionic supports upgrades from version 4 through 8. Each major version jump must be applied sequentially — do not skip intermediate versions.

For full upgrade guides, see ionic-app-upgrades.

Capacitor Integration

Ionic apps use Capacitor for native device features (camera, filesystem, push notifications, etc.). The standard workflow:

bash
npm run build
npx cap sync
npx cap run android
npx cap run ios

For live reload on a device:

bash
ionic cap run android --livereload --external
ionic cap run ios --livereload --external

For Capacitor guidance, see the capacitor-app-development skill.

Capawesome Cloud

Capawesome Cloud provides CI/CD services for Ionic/Capacitor apps:

Live Updates — Deploy OTA updates to Ionic/Capacitor apps instantly, without app store review.
Native Builds — Build iOS and Android binaries in the cloud without local Xcode or Android Studio.
App Store Publishing — Automate submissions to the Apple App Store and Google Play Store.

Visit capawesome.io for the full Capawesome ecosystem. For setup, see the capawesome-cloud skill.

Common Troubleshooting

ionic: command not found: Run npm install -g @ionic/cli.
Components not rendering: Verify Ionic CSS files are imported in the global stylesheet. For standalone Angular, verify each component is imported from @ionic/angular/standalone.
ionViewWillEnter not firing: The component must be directly routed via ion-router-outlet. Child components do not receive lifecycle events. For React/Vue, verify IonPage is the root element.
Page data not refreshing on back navigation: Use Ionic lifecycle hooks (ionViewWillEnter) instead of framework-native lifecycle hooks (ngOnInit, useEffect, onMounted). Ionic caches pages in the DOM.
Page transitions not animating: Use the framework's Ionic router integration (NavController for Angular, IonReactRouter for React, createRouter from @ionic/vue-router for Vue). Standard framework routers do not trigger Ionic animations.
CSS custom properties not applying: Ionic components use Shadow DOM. Use documented CSS custom properties (--background, --color) instead of targeting internal elements.
Icons not showing (Angular standalone): Call addIcons() from ionicons with the required icons and import IonIcon from @ionic/angular/standalone.
Failed to resolve component: ion-* (Vue): The Ionic component is not imported. Add the import from @ionic/vue.
Tab bar disappears on sub-page (React): All routes (including detail routes) must be inside the IonRouterOutlet within IonTabs.
Form input values not updating (React): Use onIonInput for IonInput/IonTextarea, not onChange. Access values via e.detail.value.
Slot attribute deprecation warning (Vue): Ionic uses Web Component slots. Disable the ESLint rule: 'vue/no-deprecated-slot-attribute': 'off'.

Related Skills

ionic-app-creation — Create a new Ionic app from scratch.
ionic-app-development — General Ionic development, full component API reference.
ionic-angular — Angular-specific patterns (standalone vs NgModule, navigation, forms, testing).
ionic-react — React-specific patterns (IonReactRouter, hooks, state management).
ionic-vue — Vue-specific patterns (composables, navigation, IonPage requirement).
ionic-app-upgrades — Upgrade Ionic to a newer major version.
capacitor-app-development — General Capacitor development.
capawesome-cloud — Live updates, native builds, and app store publishing.

Illustrative Want to see what ionic-framework would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

7/27/2026, 12:08 UTC · 22 cases

Lift

+50%

59% vs 9%

Agent turns

1.0 vs 1.0

Tokens

+323%

6,749.55 vs 1,595.09

fail → pass · 11pass → pass · 2fail → fail · 9

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-20 I'm using the Capacitor Camera plugin in my cross-platform app. How do I configure the plugin options to ensure the captured photos are automatically saved to the device's native photo gallery?	pass→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-21 I need to write a unit test for an Angular service that fetches user data in my mobile app. Can you provide a basic Jasmine test suite setup using TestBed to mock the HTTP client?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-11 Inside a Vue 3 `<script setup>` block, I have a cancel button that needs to programmatically navigate the user back to the previous screen in the history stack. Provide the code snippet to achieve this.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-10 In a functional React component, I need to programmatically navigate the user to the `/checkout` route and specify that the animation should slide forward. Provide the code snippet using the appropriate hook.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-18 I have an Angular component where I need to set focus on an input field and start a CSS animation, but only after the page transition has completely finished. Which specific interface should my component class implement?	pass→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-22 I want to set up Capawesome Cloud Live Updates for my project. What specific configuration object do I need to add to my `capacitor.config.ts` file to enable OTA updates?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-03 I need to scaffold a new cross-platform app named 'MyApp' that uses Angular's new component architecture without NgModules, includes Capacitor, and has a side menu layout. What is the exact CLI command to generate this?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-09 Using the built-in flexbox grid system, write the HTML for a column that spans the full width of the screen on mobile devices, but exactly half the width on screens 768px and larger.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-19 I am trying to change the background color of a primary button by targeting `.button-native` in my CSS, but the styles are being ignored. Explain why standard CSS selectors fail here and what approach I must use instead.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-13 I am migrating an Angular application to use standalone components. My `<ion-icon name="heart"></ion-icon>` elements are no longer rendering. What two specific steps must I take in my component's TypeScript file to make the icons appear?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-17 I want to display a 'settings' icon in my Vue component. Should I pass the icon name as a string to the component, or is there a different way I must import and bind it? Provide a code example.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-05 Write the HTML for a cross-platform email input field. It needs to have a label that floats above the input when focused, a solid border outline, and display the text 'Invalid email' if validation fails. Do not use custom CSS, use the built-in component properties.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-01 My app's list page fetches data perfectly the first time it loads, but when I navigate to a detail view and hit the back button, the list doesn't update. Write a brief explanation of why this framework behavior occurs and provide a short code example demonstrating the correct method to trigger a data refresh every time the view is visited.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-16 In a React component, I have an `onIonInput` event handler attached to a text field. How do I extract the actual string value typed by the user from the event object `e`?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-15 I want to test my web application on a physical Android device connected via USB. I need the app to automatically refresh when I save code changes, and it needs to be accessible across my local network. What is the full CLI command to run this?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-12 I am writing a Vue template with a toggle switch component. I need to call a `handleToggle` function when the user changes the switch's state. Write the HTML element with the correct event binding syntax.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-07 I need to customize the background color of my app's header toolbar. It should be `#f8f8f8` on Apple devices and `#ffffff` on Android devices. Write the CSS rules to achieve this platform-specific styling.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-02 I am building an application using Ionic and Vue, but none of my page transition animations are working and the specific view lifecycle events are silently failing to trigger. Tell me what structural requirement I am missing in my component files and output a minimal corrected Vue template showing the proper root element.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-04 In my React mobile app, I have a text input for a search query and a dropdown select for a category. I want to update the search state on every single keystroke, but only update the category state when the user confirms their selection. Which specific event handlers should I bind to these two components?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-06 I'm building a bottom sheet interface. I need a modal that opens based on a boolean state variable, initially snaps to 50% of the screen height, allows snapping to 0% or 100%, and displays a drag indicator at the top. Provide the HTML configuration for this component.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-08 My client wants their mobile application to permanently display in dark mode, ignoring the user's operating system settings. What specific CSS file must I import to enforce this behavior?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-14 My app has a bottom tab bar with 'Home' and 'Settings' tabs. On the 'Home' tab, I have a button that needs to take the user directly to the 'Settings' tab. Write the programmatic routing code to switch between these tabs.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +50 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 9.1%
Pass rate with the skill: 59.1%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 7/27/2026, 12:08 UTC

The per-case answers from this run were removed by the retention sweep, so the case table below shows the verdicts without the text either arm produced. The counts above were recorded at the time and are unaffected. Answers are now kept for 180 days.

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run59

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+273% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 56 days ago

Other measured skills in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

Ionic Framework

SkillSafety

Source

Ionic Framework

Core Concepts

Creating a New App

Ionic CLI

Components Overview

Layout

Navigation

Form

Overlays

Data Display

Scroll

Actions & Media

Theming

Colors

Global CSS Variables

Dark Mode

Platform Styles

Layout

Grid System

CSS Utility Classes

Page Lifecycle

Framework-Specific Patterns

Angular

React

Vue

Navigation Patterns

Tab Navigation

Side Menu

Linear vs. Non-Linear Routing

Upgrading

Capacitor Integration

Capawesome Cloud

Common Troubleshooting

Related Skills

How this skill was measured

Related skills