| name | primer-port-orchestrator |
| description | 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. |
Primer port — orchestrator
Canonical documentation
Phases (run in order)
Layout API (width / “block” upstream)
Primer React often has block, fullWidth, fluid, or width props for “fill the row.” Do not add a parallel in property <bool> block (or similar) on new Slint components in this repo. Map fill-width to Slint layout: default horizontal-stretch: 0 on the component root when the control should hug content; callers set horizontal-stretch: 1 and/or explicit width when the control should span a container. Inner chrome can branch on root.horizontal-stretch vs preferred width (see PrimerTextInput in primer-port-slint-research).
PR breakdown (from primer-port-sequential)
Multi-PR work must include an ordered table:
| PR | Title | Scope | Acceptance |
|---|
| 1 | … | … | pnpm typecheck, Slint loads app/src/ui/main.slint, … |
Required columns and one-PR-at-a-time rules: primer-port-pr-sequential §1.
Executing the plan: follow that skill — implement only the current PR, user owns git, mandatory pnpm autofix, pnpm test, and pnpm dev (or pnpm dev:gallery for gallery-only PRs) with a clean app start between steps.
Verification (monorepo root)
pnpm typecheck && pnpm autofix && pnpm test
Confirm Slint loads app/src/ui/main.slint the way the app does (see AGENTS). For Primer UI demos without running the full app, pnpm dev:gallery loads packages/slint-gallery/ui/gallery-window.slint. Gallery-only PRs may use pnpm dev:gallery instead of pnpm dev per primer-port-pr-sequential §6.
Skill index
