Skills

Install the touchcn agent skills so AI coding agents set up, use, and migrate to touchcn correctly.

The fastest way to get started with touchcn is to let an AI coding agent do it. touchcn ships agent skills — 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.

1. Install a skill

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

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