菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
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.
Use Phosphor icons with alouette. Import each icon from alouette-icons/phosphor-icons/IconName, then render via the Icon component or pass it to Button / IconButton / Message icon props. Tint with a text-* className (resolved to a color token); size with the numeric size prop. Load when adding icons to alouette UI.
| name | alouette-external-links |
| description | 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. |
| type | composition |
| library | alouette |
| library_version | 20.8.0 |
| requires | ["alouette-actions"] |
| sources | ["christophehurpeau/alouette:packages/alouette/src/expo/ExternalLink.tsx","christophehurpeau/alouette:packages/alouette/src/ui/actions/Button.tsx"] |
This skill builds on alouette-actions. Read it first for button props.
ExternalLink centralizes outbound-URL behavior per platform: an in-app browser
sheet (expo-web-browser) or Linking on native, and a new tab or same tab on
web. ExternalLinkButton is the button shortcut for the common case.
ExternalOpenLinkBehavior:
{ native: "linking" | "webBrowser"; web: "targetBlank" | "targetSelf" }.
import { ExternalLinkButton } from "alouette";
<ExternalLinkButton href="https://example.com" text="Open docs" />;
ExternalLink takes the target component via as and forwards remaining props.
import { ExternalLink, Button } from "alouette";
<ExternalLink
as={Button}
href="https://example.com"
openLinkBehavior={{ native: "webBrowser", web: "targetBlank" }}
text="Open"
/>;
native: "webBrowser" opens an in-app browser sheet themed with alouette colors.native: "linking" hands off to the OS browser via Linking.openURL.web: "targetBlank" opens a new tab; "targetSelf" navigates in place.Wrong:
import { Linking } from "react-native";
<Pressable onPress={() => Linking.openURL(href)} />
Correct:
<ExternalLink
as={Button}
href={href}
openLinkBehavior={{ native: "webBrowser", web: "targetBlank" }}
text="Open"
/>
ExternalLink handles the in-app themed browser sheet on native and the correct
target behavior on web; calling Linking directly loses both.
Source: packages/alouette/src/expo/ExternalLink.tsx
Wrong:
<ExternalLink as={Button} href={href} text="Open" />
Correct:
<ExternalLink
as={Button}
href={href}
openLinkBehavior={{ native: "linking", web: "targetSelf" }}
text="Open"
/>
openLinkBehavior is required and selects the native and web strategies; without
it the link can't decide how to open and throws on an unsupported branch.
(ExternalLinkButton defaults this for you — use it for the simple case.)
Source: packages/alouette/src/expo/ExternalLink.tsx