메뉴
How to update, reconcile, or add the alouette library skills in packages/alouette/skills (the @tanstack/intent / agentskills.io skills shipped with the package). Use when source components change, on version bumps, or when adding a skill for a new component.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | update-skills |
| description | How to update, reconcile, or add the alouette library skills in packages/alouette/skills (the @tanstack/intent / agentskills.io skills shipped with the package). Use when source components change, on version bumps, or when adding a skill for a new component. |
The skills in packages/alouette/skills/*/SKILL.md are @tanstack/intent skills (agentskills.io spec) shipped inside the alouette package. Each is a derived artifact of the source files in its sources: frontmatter — never freehand them out of sync with source.
Run the CLI from the repo root via node node_modules/@tanstack/intent/dist/cli.mjs <cmd> (or pnpm dlx @tanstack/intent@latest <cmd>).
Typically run right before a release. At that point packages/alouette/package.json
still shows the last released version (the GitHub Action that bumps it and
creates the matching git tag hasn't fired yet), and HEAD already contains the
changes that will go into the next release.
intent stale packages/alouette — flags version drift and skills whose
sources changed. The <prev> shown in the drift line equals the
library_version currently recorded in the skills (last reconciled release).sources: files from that previous version
all the way to HEAD (git diff alouette@<prev> HEAD -- <source>) — this
covers every release since the last reconciliation and any unreleased
commits already on HEAD. Edit SKILL.md to match what HEAD contains
(description, examples, Common Mistakes).library_version in every reconciled SKILL.md to the version in
packages/alouette/package.json (= the last git tag). If HEAD has
unreleased changes, the content will be slightly ahead of the version
number — that is intentional.version: in _artifacts/domain_map.yaml and
_artifacts/skill_tree.yaml — stale checks these too and warns if they
differ from SKILL.md.intent validate packages/alouette/skills then intent stale packages/alouette — both must be clean.Only edit content when a public API changed. Internal refactors of a sourced file (no exported prop/signature change) need only the version bump.
stale does not flag new exported components lacking coverage — check
git diff alouette@<prev> HEAD -- packages/alouette/src/index.ts for new
exports (where <prev> is the library_version currently in the skills).
To author one, intent scaffold (agent-guided: domain discovery → tree →
skill), or copy an existing SKILL.md and follow its frontmatter shape
(name, description, type, library, library_version, requires,
sources).
Deleting packages/alouette/skills/<name>/ is not enough on its own — consumers who already ran alouette-install-skills have a symlink at .claude/skills/<name> that would be left dangling. Add <name> to the REMOVED_SKILLS array in packages/alouette/bin/install-skills.mjs in the same change so the next install run cleans it up.
"skills" must stay in the files array of packages/alouette/package.json, else skills are not published..github/workflows/check-skills.yml (from intent setup): validates on PRs, opens a review PR on release when skills drift..claude/skills/ (e.g. storybook) — those are not shipped and not managed by intent.npx alouette-install-skills (packages/alouette/bin/install-skills.mjs), which symlinks packages/alouette/skills/* into their .claude/skills/. This is separate from intent, which this repo uses only for authoring/reconciling skill content.Buttons (Button, IconButton, ExternalLinkButton, InternalLinkButton) and pressable surfaces (PressableBox, PressableListItem). variant is contained|outlined|ghost, size is sm|md, accent defaults to brand. Button label is the required text prop (not children); IconButton requires aria-label. Interactive hover/focus/active/disabled states are built in. For async onPress use ActionButton (runs the promise, shows spinner + inline error); Button state ('loading'|'success'|'failed') is the manual escape hatch that overlays a spinner/terminal icon and disables the button. Load when adding buttons or custom pressable elements.
Animate alouette UI two ways: NativeWind transitions (transition-*, duration-*, ease-* on state changes like active:/hover:/focus:) and CSS keyframe presence animations via PresenceOne / PresenceList (animate-slide-in/out, animate-collapse-in/out). exitDurationMs must come from animationDurationsMs so the unmount timer matches the keyframe. Both run on native via react-native-reanimated. Load when adding transitions or enter/exit animations.
Overlays: Modal (controlled by visible/onClose, with title or required aria-label, optional icon/footer, size sm/md/lg, dismiss via backdrop/close/ Escape/Android-back) and AlertDialog for confirmations. AlertDialog variant is confirm (cancel+confirm) | alert (single acknowledge) | required (single action, non-dismissible); accent defaults to danger. Prefer the icon-fixed presets QuestionAlertDialog / WarningAlertDialog / InfoAlertDialog / SuccessAlertDialog. Load when adding a modal, confirmation, or alert dialog.
Open external URLs with ExternalLink (wraps expo-web-browser / Linking) or ExternalLinkButton, configuring openLinkBehavior per platform (native: linking|webBrowser; web: targetBlank|targetSelf). Load when linking out to external URLs from alouette UI.
Semantic message banners: Message (requires accent + icon) and the presets InfoMessage, ConfirmationMessage, WarningMessage, ErrorMessage. Optional dismiss requires onDismiss and dismissIconAriaLabel together; size is sm/md/lg. Also ConnectionState, a top-pinned network-status banner driven by a state prop, and LinearProgress / CircularProgress determinate progress indicators (progress 0-100, accent, size xs/sm/md/lg). Load when showing inline status, alerts, dismissible notices, connection status, or progress.
Forms end to end. Inputs: InputText (mode: password/email/number/tel/url/search), TextArea, Switch (checked + onValueChange; use disabled not editable). Single-select: RadioGroup + Radio (circle-dot list) and RadioButtonGroup + RadioButton (segmented pill bar); controlled/uncontrolled via value/defaultValue/onValueChange + accent/disabled. Validation on react-hook-form: Form owns the instance and exposes submit() via render prop (no control passing); FormField wires Controller to FormItem label/error/required; FormFieldArray wraps useFieldArray with add/remove; FormSubmitButton drives loading/success/failed; SimpleVForm is the vertical-stack shortcut. errorToMessage required (i18n); FormValidationError distinguishes invalid fields from onSubmit failures. Load when building text fields, toggles, radio groups, or a validated form.