菜单
Defines the standard slint-gallery demo page layout: one live preview on the left, variant and state controls in GalleryDemoOptionsSidebar on the right. Covers page skeleton, preview-* properties, nav registration, verification, and exceptions for compose-first playgrounds. Use when adding or extending a gallery page during a Primer port.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
End-to-end playbook for porting a Primer design system component into packages/primer-slint: ordered phases (upstream research, Slint research, variant matrix, token layers, interaction states, gallery demo), PR breakdown per [`primer-port-pr-sequential`](../primer-port-pr-sequential/SKILL.md), and verification. Use when starting a new Primer port, planning multi-PR component work, or when the user asks what order to follow for Primer-to-Slint work.
Executes multi-PR implementation plans one pull request at a time: requires an ordered PR table in the plan, keeps each PR small, implements only the current PR until the user continues, leaves git to the user, and enforces acceptance (pnpm autofix, pnpm test, pnpm dev or dev:gallery with a clean app start). Use when working through a staged Primer port or any multi-PR plan in this repo, or when the user asks to do one PR at a time with review-sized chunks.
Surfaces Slint patterns and file references for Primer ports: this repo’s Primer folder (Checkbox, tokens, barrel), optional gb-slint Material library (state layers, schemes, gallery), and compiler Material widgets. Use after upstream Primer research or when the user asks how similar controls are built in Slint, where to find TouchArea/state patterns, or Material examples on disk.
Builds a Primer upstream inventory before Slint implementation: always reads React and Storybook from /Users/nigelb/slint/primer-ui-react, tokens from /Users/nigelb/slint/primer-tokens, enumerates every Storybook variant for the target component, and plans one PR per variant with gallery sidebar controls. Use when porting or extending a Primer component, planning token coverage, or when the user asks what variants or tokens a Primer control has upstream.
Produces a compact checklist matrix for a Primer Slint component: variant, disabled, color scheme, pointer interaction, size, and validation/focus where relevant—so no state is forgotten before implementation. Maps matrix axes to gallery sidebar controls. Use when planning visual parity, reviewing a port for coverage, or after upstream research when the user asks for a complete state list.
Designs and implements Primer-style interaction styling in Slint using explicit state dimensions, mutex groups, and `states [ ]` blocks instead of nested ternary expressions. Covers TouchArea order vs FocusScope, `focus-on-click` for `:focus-visible`-style focus rings, hover/pressed/disabled/selected/focus. Use when adding or refactoring Primer components under packages/primer-slint/, complex controls (hover, pressed, disabled, selected, focus), or when the user asks for Checkbox-like state handling or token-driven visuals.
| name | primer-port-gallery-demo |
| description | Defines the standard slint-gallery demo page layout: one live preview on the left, variant and state controls in GalleryDemoOptionsSidebar on the right. Covers page skeleton, preview-* properties, nav registration, verification, and exceptions for compose-first playgrounds. Use when adding or extending a gallery page during a Primer port. |
Every atomic Primer port gets one gallery playground: a single preview in the main column and all Storybook-driven permutations reachable via GalleryDemoOptionsSidebar controls—not stacked static previews or one section per variant.
Full port order: primer-port-orchestrator. PR execution: primer-port-pr-sequential.
| Complexity | File | Notes |
|---|---|---|
| Minimal | packages/slint-gallery/ui/views/gallery-checkbox-page.slint | One control, preview-*, sidebar checkboxes + label input |
| Enums | packages/slint-gallery/ui/views/gallery-counter-label-page.slint | RadioGroup, helper copy under controls |
| Many axes | packages/slint-gallery/ui/views/gallery-buttons-page.slint | Rich sidebar; IconButton and CounterLabel are separate nav pages |
Sidebar chrome: packages/slint-gallery/ui/components/gallery-demo-options-sidebar.slint.
packages/slint-gallery/ui/views/gallery-<kebab-name>-page.slintGallery<Name>Page with vertical-stretch: 1HorizontalLayout with three regions:VerticalLayout (padding: 24px, spacing: 16px, alignment: start):
Text — component name, font-size: 15px, font-weight: 600, PrimerColors.fgColor-defaultRadioGroup with fixed child radios)Rectangle { } between preview and sidebarGalleryDemoOptionsSidebar — one or more VerticalLayout sections as @childrenEach option group:
LayoutTokens.text-body-size-medium, LayoutTokens.base-text-weight-semibold, PrimerColors.fgColor-defaultLayoutTokens.text-body-size-small, PrimerColors.fgColor-muted, wrap: word-wrapCheckbox, RadioGroup / Radio, PrimerTextInput, Select, etc.property <T> preview-<dimension>: (e.g. preview-disabled, preview-scheme)preview-*; use <=> for two-way state (checked, text)scheme, size, disabled)All four are required when adding a new sidebar leaf:
| File | Action |
|---|---|
packages/slint-gallery/ui/gallery-window.slint | import + if GalleryState.selected-page-id == "<id>-playground": Gallery…Page { height: main-scroll.height; } |
packages/slint-gallery/node/state/gallery-sidebar-nav-bridge-shared.ts | Add folder/leaf to GALLERY_SIDEBAR_NAV |
packages/slint-gallery/rust/src/lib.rs | Mirror nav entry (keep in sync with TS) |
packages/slint-gallery/ui/components/gallery-sidebar.slint | Fallback nav leaf where that file defines entries |
From monorepo root:
pnpm dev:gallery
Open the new sidebar entry; exercise every sidebar control and confirm the preview updates for each Storybook-relevant permutation.
| PR kind | Gallery work |
|---|---|
| First PR (new component) | Create Gallery*Page + nav wiring + default preview + minimal sidebar (stub controls OK) |
| Later PRs (variant / token / interaction) | Extend sidebar and preview bindings; do not add a second static preview row for the same component |
| Orthogonal export (e.g. IconButton) | Separate gallery-*-page.slint + nav leaf |
Map each Storybook permutation to which sidebar control implements it (see primer-port-variant-matrix § Gallery mapping).
gallery-pagination-page.slint: one visible scenario at a time via scenario-ix + sidebar Select; no duplicate static previews in the main columnprimer-port-upstream-researchprimer-port-variant-matrixprimer-port-slint-research