---
title: Skills
description: Install the touchcn agent skills so AI coding agents set up, use, and migrate to touchcn correctly.
sidebar:
  icon: bot
---

The fastest way to get started with touchcn is to let an AI coding agent do it. touchcn ships
[agent skills](https://agentskills.io) — `SKILL.md` files that teach agents (Claude Code, Cursor,
and other compatible tools) how to work with touchcn correctly, so they follow the documented setup
and conventions instead of guessing.

<CardGroup cols={2}>
  <Card title="touchcn" icon="sparkles">
    Install and use touchcn in any project: CLI setup, engine wiring, theming, and the rules that
    matter when editing copied components.
  </Card>
  <Card title="touchcn-ionic-migration" icon="arrow-right-left">
    Migrate an existing Ionic Framework app to touchcn: component mapping, chrome and overlay
    swaps, styling migration, and a leaf-first migration order.
  </Card>
</CardGroup>

## 1. Install a skill

```bash
npx skills add capawesome-team/touchcn --skill touchcn
```

```bash
npx skills add capawesome-team/touchcn --skill touchcn-ionic-migration
```

Omit `--skill` to install every skill in the repository at once. The skills land in your agent's
skill directory and activate automatically when a task matches.

## 2. Prompt your agent

With the skills installed, plain prompts are enough — the agent recognizes the task and applies the
skill:

- *"Add touchcn to this project"* — runs `touchcn init`, installs the engine packages, wires
  Tailwind and the theme provider for your framework.
- *"Build a settings screen with touchcn components"* — composes copied components following the
  editing rules instead of inventing markup.
- *"Migrate this Ionic page to touchcn"* — swaps components using the migration mapping, leaf-first.

## What the skills cover

### touchcn

- Project setup: `touchcn init`, engine package installation, Tailwind CSS wiring, theme provider
  registration for Angular, React, and Vue
- Adding components and importing them from the copied source paths
- The editing rules: theme-dumb components, semantic class preservation, overlay
  containing-block constraints, list link-mode limitations
- Theming and dynamic color from a seed, with the token conventions that keep color schemes working
- Platform integration notes for Capacitor and the minimum WebView baseline

### touchcn-ionic-migration

- A complete `ion-*` → touchcn component mapping, including the closest equivalent where there is
  no one-to-one match
- Migration patterns for navigation, overlays, forms, and lists — and the recommended leaf-first
  order that keeps the app shippable between steps
- Known gaps with suggested workarounds, so the agent flags them instead of silently improvising