slint-ui-for-github-cli

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.

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.

Registers SVG icons for the Primer Slint app via packages/primer-slint/assets/icons.slint (Icons global), naming rules, bridge types in slint-interface.ts, and Banner icon usage. Use when adding or renaming icons, replacing raw @image-url calls, or when the user asks how Primer icons are bundled in this repo.

Maps Primer design values into packages/primer-slint/tokens.slint without duplicating hex: assigns each shared color to one PrimerColors out property, composes ButtonTokens/CheckboxTokens/BannerTokens/LabelTokens and LayoutTokens per AGENTS, and uses an audit table before adding literals. Use when adding or refactoring Primer tokens, resolving duplicate colors, or porting a component that needs new semantic or component-level colors.