메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.
| name | primer-slint-icons-registry |
| description | 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. |
packages/primer-slint/AGENTS.md — icon registry path; this skill is the full procedure.SVGs are not scattered as inline @image-url("../../assets/…") across views. Slint only bundles images that appear in the source tree; the single registry is packages/primer-slint/assets/icons.slint (export global Icons { … }). Asset files live under packages/primer-slint/assets/ (e.g. 16px/, 24px/).
Consumption: import { Icons } from "../Primer/primer.slint"; (adjust path). Use Icons.<property> for every image. Do not add new @image-url paths in Primer components or in app/src/ui/views / components for icons that ship with the app—register first, then use Icons.*.
Property naming: SVG basename without .svg, replace each - with _ → Slint identifier (e.g. sort-desc.svg → sort_desc). Exceptions: git-pull-request.svg → pull_request; copy.svg → copy_icon. For 24px/gear.svg vs 16px gear, use gear_24 when the 24px asset is intended.
TypeScript / Node: The window exposes window.Icons. If TS reads window.Icons.<name>, extend SlintIconsGlobal in app/src/bridges/node/slint-interface.ts.
.svg under packages/primer-slint/assets/16px/ or 24px/ (match size folder used elsewhere for that glyph).assets/icons.slint, add out property <image> <name>: @image-url("16px/….svg"); using the naming rule above.@image-url for that file with Icons.<name> and import Icons from primer.slint where needed.window.Icons, add the field to SlintIconsGlobal in slint-interface.ts.app/src/ui/main.slint, pnpm typecheck.Banner reads background, border, and icon tint from BannerTokens (lengths from LayoutTokens). Leading/dismiss SVGs use Icons.*, not ad hoc paths. Use PrimerColors inside Banner only for non-banner semantics (e.g. default title/description fg). Product copy belongs in views; Banner exposes structure only.
primer-port-slint-research — other in-repo patterns.