AI Skills

uView Pro X ships a companion Agent Skills package named uview-pro-x. Once installed in an AI coding assistant, the assistant follows this library's page authoring conventions instead of guessing from training memory: it checks the API card before writing any <ux-*> tag, and runs a validator after writing to drive prop and event usage down to zero violations.

The skill is consumer-facing — it covers "how to write pages with uview-pro-x in your project", not how the component library itself is implemented.

What the skill covers

Capability	Details
Setup	Plugin-market import, easycom configuration, main.uts registration, style import
Page script	UTS composition API patterns, type pitfalls, template binding rules, page lifecycles
Page style	UCSS selector and property limits, flex layout pitfalls, text ellipsis, theme colors
Components	Quick-reference tables for all seven categories plus API cards for 77 components (props / values / events / v-model / slots)
i18n	Locale pack registration, useLocale API, default locale priority, built-in component copy
Theme / dark mode	Theme registration, useTheme API, dark palette generation, page integration
Cross-platform	Conditional-compilation macro list, per-platform red lines, symptom → fix lookup

Install

pnpx skills add uview-pro/skills

The skill lands in your AI client's skills directory under the name uview-pro-x. Clients that support Agent Skills (Qoder, Claude Code, Cursor, etc.) pick it up right away.

The skill package is also open source at uview-pro/skills. If the command fails (network restrictions, unavailable mirror, or an unrecognized client), download the package from that repository and place it in your client's skills directory manually.

How to use it

No commands to memorize — just describe what you need, for example:

• "Build a login page with theme switching using uview-pro-x"
• "This page is blank on App; check it against the cross-platform red lines"
• "Add pull-up loading and back-to-top to the list page"

The assistant then follows the skill's fixed workflow:

1. Read the setup and conventions in references/spec/, and apply a references/recipes/ recipe directly when one matches;
2. Read references/api/ux-<name>.md before writing each <ux-*>; anything not on the card is not guessed;
3. Take every color from the theme ($u-* SCSS variables / $u.color.*) — never hardcode color values;
4. Run the validator before finishing; zero errors is the bar.

Skill layout

uview-pro-x/
├─ SKILL.md                     # Entry: scenarios, mandatory rules, workflow
├─ references/
│  ├─ README.md                 # Handbook index and source-of-truth priority
│  ├─ spec/                     # Specs (01 setup … 07 theme & dark mode)
│  ├─ recipes/                  # Copy-ready recipes: page scaffold, scroll listening
│  └─ api/                      # API cards for 77 components + model.json snapshot
└─ scripts/
   ├─ verify-ux-usage.mjs       # Page usage validator (post-write gate)
   ├─ gen-api-cards.mjs         # Generates API cards and snapshot
   └─ update-api.mjs            # Regenerate snapshot and cards in one command (maintainers)

Manual validation

The validator can also be used standalone (Node ≥ 18, no third-party dependencies):

node <skill-dir>/scripts/verify-ux-usage.mjs pages/login/index.uvue

• With no path it scans pages/ under the current directory; with a directory it scans *.uvue recursively (skipping uni_modules, node_modules, unpackage, etc.);
• By default it reads only the skill's bundled API snapshot, so it works without access to the component library source — encrypted builds included;
• When the library source is readable, add --lib <library-dir> to compare against the installed library; a version mismatch reports a stale snapshot;
• Exit code: 0 means no errors (warnings do not fail), 1 means there are errors.

Relationship to this site

Component pages here are reference documentation (full API tables, examples, compatibility notes); the skill is an execution spec (constraints, red lines, recipes and a validator that assistants can read directly). Both share the same source; if they ever disagree, the component library source and the component pages on this site win.

Next steps

• Build your first page: Quick Start
• Cross-platform limits: Notice