From 10c97982c35307f35470783d72dc37d04db8c9ae Mon Sep 17 00:00:00 2001 From: wangdiandao <1362919224@qq.com> Date: Wed, 20 May 2026 15:51:29 +0800 Subject: [PATCH 1/2] Add WinUI layout design skill --- .github/ISSUE_TEMPLATE/bug-report.yml | 1 + .../dimensions/docs-and-manifests.md | 4 +- .../pr-review/dimensions/skill-content.md | 4 +- CHANGELOG.md | 5 +- README.md | 7 +- plugins/winui/skills/winui-design/SKILL.md | 47 +------ .../winui/skills/winui-layout-design/SKILL.md | 116 ++++++++++++++++++ .../references/microsoft-layout-guidelines.md | 112 +++++++++++++++++ 8 files changed, 247 insertions(+), 49 deletions(-) create mode 100644 plugins/winui/skills/winui-layout-design/SKILL.md create mode 100644 plugins/winui/skills/winui-layout-design/references/microsoft-layout-guidelines.md diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index 37aca28..b8e3a9d 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.github/ISSUE_TEMPLATE/bug-report.yml @@ -26,6 +26,7 @@ body: - "skill: winui (agent)" - "skill: winui-dev-workflow" - "skill: winui-design" + - "skill: winui-layout-design" - "skill: winui-code-review" - "skill: winui-ui-testing" - "skill: winui-packaging" diff --git a/.github/skills/pr-review/dimensions/docs-and-manifests.md b/.github/skills/pr-review/dimensions/docs-and-manifests.md index ad550b3..e026529 100644 --- a/.github/skills/pr-review/dimensions/docs-and-manifests.md +++ b/.github/skills/pr-review/dimensions/docs-and-manifests.md @@ -12,7 +12,7 @@ you with the `explore` agent type by default. The repo's user-facing surface and its install/discovery metadata. When code or skills change, these need to keep up: -- `README.md` — top-level pitch, install instructions, the "8 skills" +- `README.md` — top-level pitch, install instructions, the skills table, the "in-repo tools" table. - `plugins/winui/plugin.json` — Copilot/Claude/Codex plugin manifest (name, description, version, agents, skills). @@ -36,7 +36,7 @@ When code or skills change, these need to keep up: ### New / renamed / removed skill - **New skill added under `plugins/winui/skills//`** without a - matching row in `README.md`'s "eight skills" table → **high**. + matching row in `README.md`'s skills table → **high**. - **Skill renamed.** `plugins/winui/agents/winui-dev.agent.md` references skills by name (e.g. "Load the `winui-dev-workflow` skill"). Renames must update every mention in the agent file diff --git a/.github/skills/pr-review/dimensions/skill-content.md b/.github/skills/pr-review/dimensions/skill-content.md index 940f9d1..a6d503c 100644 --- a/.github/skills/pr-review/dimensions/skill-content.md +++ b/.github/skills/pr-review/dimensions/skill-content.md @@ -11,7 +11,7 @@ field. This dimension reviews **prose changes** to: -- `plugins/winui/skills//SKILL.md` (the 8 shipped skills) +- `plugins/winui/skills//SKILL.md` (the shipped skills) - `plugins/winui/skills//references/*.md` (deep-dive references loaded on demand) - `plugins/winui/agents/winui-dev.agent.md` (the orchestrator agent @@ -70,7 +70,7 @@ priors. Every line of prose must pull its weight. ### Structure consistency -- New skills should match the structure of the 8 existing ones: +- New skills should match the structure of the existing shipped skills: frontmatter → "When to Use" → numbered/headed sections of guidance → optional "References" pointer to `references/`. Major deviations from this pattern reduce skill discoverability for the diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f76499..03be87d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,9 @@ The `version-bump` and `changelog-entry` CI jobs enforce this. ### Added +- `winui-layout-design` skill for page silhouettes, responsive breakpoints, + adaptive XAML, title bar layout, layout panels, and initial window sizing. + ### Changed ### Fixed @@ -52,7 +55,7 @@ release process was introduced. Future releases will list per-PR changes here. ### Added -- Initial public preview of the `winui` plugin: `winui-dev` agent and the eight +- Initial public preview of the `winui` plugin: `winui-dev` agent and the original eight skills (`winui-dev-workflow`, `winui-design`, `winui-code-review`, `winui-ui-testing`, `winui-packaging`, `winui-wpf-migration`, `winui-session-report`, `winui-setup`). diff --git a/README.md b/README.md index 7417724..8706cd8 100644 --- a/README.md +++ b/README.md @@ -106,7 +106,7 @@ The result: you ask `copilot -p "create a WinUI 3 photo viewer with thumbnails a .github/plugin/ Marketplace manifest (marketplace.json) plugins/winui/ Copilot CLI plugin manifest + agent + skill files agents/winui-dev/ The orchestrator agent - skills/ The eight skills (see table below) + skills/ The nine skills (see table below) src/tools/ Source for the in-repo tools shipped with the skills winmd-cli/ Native-AOT WinRT/.NET metadata indexer (winmd.exe) winui-search/ Native-AOT search over WinUI Gallery + Toolkit (winui-search.exe) @@ -118,14 +118,15 @@ scripts/ Helper scripts (see scripts/build-tools.ps1) A focused agent for WinUI 3 / Windows App SDK / XAML / C# work. Use it for new apps, adding features, converting from WPF/Electron/web, or fixing bugs. It pulls in the skills below as needed. -### The eight skills +### The nine skills -Each skill is a focused, self-contained playbook. The agent loads `winui-design` and `winui-dev-workflow` by default — those cover most "build me a WinUI 3 app" requests end-to-end. You opt into the others when you want them, including `winui-setup` for one-time machine prep. +Each skill is a focused, self-contained playbook. The agent loads `winui-design` and `winui-dev-workflow` by default — those cover most "build me a WinUI 3 app" requests end-to-end; `winui-design` routes deeper page layout work to `winui-layout-design` when needed. You opt into the others when you want them, including `winui-setup` for one-time machine prep. | Skill | What it does | |---|---| | **`winui-dev-workflow`** | Build and run workflow — project creation from templates, the `BuildAndRun.ps1` helper, `winapp run`, error diagnosis, prerequisites. Use when building, running, or fixing build errors. | | **`winui-design`** | UI design and XAML correctness — layout planning, control selection, Fluent Design, theming (Light/Dark/HighContrast), typography, spacing, brushes, accessibility, data-binding review. Bundles `winui-search.exe` for grounded control lookup against the WinUI Gallery + Community Toolkit catalogue. | +| **`winui-layout-design`** | Page layout and responsive design — app silhouettes, breakpoints, adaptive XAML, title bar composition, content spacing, layout panels, and initial window sizing based on Microsoft Learn layout guidance. | | **`winui-code-review`** | Code-quality review before committing — MVVM compliance, `x:Bind` correctness, accessibility, theming, security, performance. Catches what the compiler and UI tests won't. | | **`winui-ui-testing`** | Automated UI testing — generates a batch test script, runs all tests in one pass, reads results. Covers element assertions, interactions, value checks (TextBox, ComboBox, ToggleSwitch), file pickers, flyouts, dialogs, persistence, accessibility audits. | | **`winui-packaging`** | MSIX packaging, code signing, and distribution — release builds, certificate generation (`winapp cert generate`), trust, signing (`winapp sign`), self-contained deployment, GitHub Actions CI/CD, and Microsoft Store submission. | diff --git a/plugins/winui/skills/winui-design/SKILL.md b/plugins/winui/skills/winui-design/SKILL.md index ff4e081..ad70c8c 100644 --- a/plugins/winui/skills/winui-design/SKILL.md +++ b/plugins/winui/skills/winui-design/SKILL.md @@ -35,51 +35,15 @@ description: "WinUI 3 UI design and XAML correctness — layout planning, contro **Feedback:** Blocking decision → `ContentDialog`; contextual action → `Flyout`/`MenuFlyout`; onboarding → `TeachingTip`; inline status → `InfoBar`; system notification → `AppNotification`. #### Step 3: Plan Layout -- **Content fills the window** — no floating cards on empty backgrounds -- `Grid` for structure, `StackPanel` only for simple stacking of few items -- Sidebar: fixed 300-360px width; main content: `Width="*"` with 24px padding -- Status bar: `Grid` row at bottom; toolbar: `CommandBar` or title bar buttons +For app silhouette, responsive breakpoints, adaptive XAML, title bar composition, panel choice, and initial window size, use `winui-layout-design` before writing page XAML. Return here for control lookup, theming, typography, brushes, accessibility, and binding correctness. -#### Step 4: Size the Window to the App - -> **WinUI 3 has no `SizeToContent`.** Without an explicit size, Windows defaults the main window to ~1024×768 — oversized for most utilities. **Size the window in `MainWindow`'s constructor; derive from the layout, not a generic.** - -**Rubric.** Width = widest row + 48 padding (24 each side), rounded **up** to nearest 20. Height = 32 (titlebar) + Σ(row heights) + Σ(spacing) + 48 padding, rounded up to 20. Round up — clipped content is a worse failure than a slightly-wide window. - -**Sanity check** (ranges, not targets — derive yours from the rubric): -- Single-purpose utility → ~440–560 wide -- Form / single-page tool → ~600–800 wide, ~640–800 tall -- Multi-pane (nav + content) → ~1100–1300 wide, ~720–840 tall -- Document / canvas / media editor → 1280+ wide - -If your derived number is well below its range, you missed a row — re-check. +Minimum layout defaults: content fills the window, ordinary pages use a `Grid` skeleton, `StackPanel` is local-only, and floating cards on empty backgrounds need a strong product reason. -`AppWindow.Resize` takes **physical pixels**, not DIPs — multiply by the monitor's DPI scale: - -```csharp -using Microsoft.UI; -using Microsoft.UI.Windowing; -using System.Runtime.InteropServices; -using Windows.Graphics; - -public sealed partial class MainWindow : Window -{ - [DllImport("user32.dll")] - private static extern uint GetDpiForWindow(IntPtr hWnd); - - public MainWindow() - { - InitializeComponent(); - var hwnd = Win32Interop.GetWindowFromWindowId(AppWindow.Id); - var scale = GetDpiForWindow(hwnd) / 96.0; - AppWindow.Resize(new SizeInt32((int)(460 * scale), (int)(860 * scale))); - } -} -``` +#### Step 4: Size the Window to the App -`XamlRoot.RasterizationScale` is null in the ctor and stale after `AppWindow.Move`, so `[DllImport]` is the cleanest path. Don't try to size the window by setting `Width`/`Height` on the root `Grid` — that clips content, not the window. +Use `winui-layout-design` to derive the initial window size from the page layout. WinUI 3 has no `SizeToContent`; do not fake it by setting `Width` or `Height` on the root element because that clips content instead of resizing the app window. -If the user asks for UI validation, see `winui-ui-testing` Step 3.5 to verify the rubric against the visual checklist. +If the user asks for UI validation, see `winui-ui-testing` Step 3.5 to verify layout and window fit against the visual checklist. #### Step 5: Design Anti-Patterns | ❌ Don't | ✅ Do Instead | @@ -219,3 +183,4 @@ ToolTipService.SetToolTip(btn, "Save the current document"); | `references/typography-and-spacing.md` | Detailed type ramp, spacing grid, and sizing examples | | `references/colors-and-materials.md` | Theme brush catalog, Mica/Acrylic surface pairings, material usage | | `references/iconography-and-motion.md` | Icon guidelines, animation patterns, connected animations | +| Sibling skill: `winui-layout-design` | Page silhouette, responsive breakpoints, title bar layout, layout panels, content spacing, and initial window sizing | diff --git a/plugins/winui/skills/winui-layout-design/SKILL.md b/plugins/winui/skills/winui-layout-design/SKILL.md new file mode 100644 index 0000000..b1b6729 --- /dev/null +++ b/plugins/winui/skills/winui-layout-design/SKILL.md @@ -0,0 +1,116 @@ +--- +name: winui-layout-design +description: "Use when designing or reviewing WinUI 3 page layout, app silhouette, responsive breakpoints, adaptive XAML, title bar composition, content spacing, layout panels, initial window size, or fixing pages that feel cramped, over-carded, fixed-size, clipped, or waste space across small, medium, and large window widths." +--- + +# WinUI Layout Design + +## Overview + +Shape the app window before styling the controls. Use this skill to choose the page silhouette, responsive states, title bar layout, layout panels, and initial window size from Microsoft Learn layout guidance. + +Keep this skill focused on layout. Use `winui-design` for control selection, theme resources, typography styles, brushes, data binding, and accessibility; use `winui-ui-testing` for runtime UI automation and screenshot validation; use `winui-code-review` for pre-commit quality review. + +## When to Use + +Use this skill when the task involves: + +- Designing a new WinUI page shell, dashboard, settings surface, editor, media view, or multi-pane utility. +- Fixing a page that wastes space, clips content, overuses cards, or feels cramped at different window widths. +- Choosing between top navigation, left navigation, menu bar, or `TabView`. +- Defining small, medium, and large responsive states. +- Selecting layout panels or replacing fixed-size `Canvas`/whole-page `StackPanel` layouts. +- Integrating title bar content such as search, account UI, app icon, or document tabs. +- Deriving an initial window size from the actual layout. + +Do not use this skill for isolated control selection, brush names, binding syntax, or post-build code review; use the sibling skills named in the overview. + +## Layout Workflow + +### 1. Pick the app silhouette + +Choose one primary page shell before choosing individual controls: + +| App shape | Use | Avoid | +|---|---|---| +| Top navigation | Media, gallery, or document-style apps that need vertical space | Deep section trees | +| Menu bar | Dense editor or utility surfaces where content is the main task | App-wide navigation with many destinations | +| Left navigation | Settings, dashboards, and multi-section tools | Single-purpose pages | +| TabView | Documents, terminals, code editors, or multi-session work | Static app sections that are not documents/sessions | + +Do not mix two primary navigation systems unless the product model really has two independent axes, such as app sections plus document tabs. + +### 2. Define responsive states + +Design against the app window width in effective pixels, not the physical monitor or device class. + +| State | Width | Layout decision | +|---|---:|---| +| Small | under 640 epx | Single-column content, collapsed navigation, minimum metadata | +| Medium | 641-1007 epx | Compact side-by-side regions only when the task benefits | +| Large | 1008 epx and wider | Show persistent navigation, detail panes, richer metadata, or extra columns | + +For each state, specify what repositions, resizes, reflows, appears, disappears, or changes architecture. If the change is only cosmetic, do not add a breakpoint. + +### 3. Choose layout panels intentionally + +Use panels for their sizing behavior, not just because they are convenient: + +| Panel | Use for | Watch for | +|---|---|---| +| `Grid` | Page skeletons, resizable rows/columns, master-detail layouts | Prefer `Auto`, `*`, `MinWidth`, and `MaxWidth` over fixed page sizes | +| `RelativePanel` | Repositioning related elements across visual states | Do not use it when a simple grid row/column is clearer | +| `StackPanel` | Small local stacks inside a section | Do not use one StackPanel as the whole page shell | +| `VariableSizedWrapGrid` | Wrapping tiles or variable grid items | Set item sizing deliberately | +| `Canvas` | Graphics, diagrams, or small static regions | Do not use it for ordinary app layout | + +Use `VisualStateManager` and `AdaptiveTrigger` for major layout changes. Use `Visibility` or `x:Load` when a state hides expensive or secondary UI. + +### 4. Set content rhythm + +Make content fill the window with meaningful margins; do not center a lone card on an empty background unless the whole app is a narrow dialog-like utility. Keep spacing semantic: + +- 8 epx: closely related controls or a button and flyout. +- 12 epx: control-to-label or compact content-region spacing. +- 16 epx: text inside a surface edge, or a control next to an expander action. +- 48 epx: nested expander content indentation. +- 56 epx: large media or highly cohesive content margins, not dense tools. + +For dense developer tools, prefer compact margins and stable scanning. For media or gallery surfaces, allow larger margins when they strengthen the content. + +### 5. Integrate the title bar + +Use the platform title bar model unless there is a specific reason to customize it. + +- Standard title bars are 32 px high. +- Use 48 px when the title bar contains global search or account/person UI. +- Keep empty and non-interactive title-bar regions draggable. +- Preserve system menu behavior on icon/right-click/press-and-hold regions. +- Keep caption buttons visible and separate from app commands. +- If tabs are the main app element, integrate `TabView` with title-bar space while preserving caption button placement. + +### 6. Derive the initial window size + +WinUI 3 does not size the main window to content automatically. Pick an initial size from the layout: + +- Width: widest useful row plus horizontal page padding, rounded up. +- Height: title bar plus visible rows, spacing, and vertical page padding, rounded up. +- Small utilities can be narrow; multi-pane tools usually need a wider initial window; document/canvas apps should start wide enough to show the primary work area. +- If you call `AppWindow.Resize`, convert DIPs to physical pixels for the active monitor. + +After implementing, verify at small, medium, and large widths. If UI validation is requested, use `winui-ui-testing`; if visual fit is suspect, capture screenshots before claiming the layout is complete. + +## Common Mistakes + +| Mistake | Fix | +|---|---| +| Fixed `Width`/`Height` on a page root | Use `Grid`, `Auto`, `*`, and min/max constraints | +| One whole-page `StackPanel` | Use a page-level `Grid` and local stacks only inside sections | +| `Canvas` for form or dashboard layout | Use `Grid` or `RelativePanel` | +| Desktop-only design | Define small, medium, and large window states | +| Extra cards inside page sections | Let sections fill the page; reserve cards for repeated items or framed tools | +| Breakpoints by device name | Trigger on available window width | + +## References + +Read `references/microsoft-layout-guidelines.md` when you need the source-backed Microsoft Learn layout guidance, breakpoint definitions, title-bar rules, panel behavior, or examples of how to map the guidance into XAML layout decisions. diff --git a/plugins/winui/skills/winui-layout-design/references/microsoft-layout-guidelines.md b/plugins/winui/skills/winui-layout-design/references/microsoft-layout-guidelines.md new file mode 100644 index 0000000..cdd93b3 --- /dev/null +++ b/plugins/winui/skills/winui-layout-design/references/microsoft-layout-guidelines.md @@ -0,0 +1,112 @@ +# Microsoft Layout Guidelines + +This reference summarizes the Microsoft Learn layout pages for WinUI layout decisions. Use it when a task depends on page structure, responsive behavior, title-bar composition, spacing, or XAML panel choice. + +## Source Pages + +- [Layout overview](https://learn.microsoft.com/zh-cn/windows/apps/design/layout/) +- [App silhouette](https://learn.microsoft.com/zh-cn/windows/apps/design/basics/app-silhouette) +- [Title bar design](https://learn.microsoft.com/zh-cn/windows/apps/design/basics/titlebar-design) +- [Screen sizes and breakpoints](https://learn.microsoft.com/zh-cn/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design) +- [Responsive design techniques](https://learn.microsoft.com/zh-cn/windows/apps/design/layout/responsive-design) +- [Responsive layouts with XAML](https://learn.microsoft.com/zh-cn/windows/apps/develop/ui/layouts-with-xaml) +- [Content layout and spacing](https://learn.microsoft.com/zh-cn/windows/apps/design/basics/content-basics) +- [Layout panels](https://learn.microsoft.com/zh-cn/windows/apps/develop/ui/layout-panels) + +## App Silhouettes + +Microsoft's silhouette guidance groups Windows app shells by the relationship between navigation, commands, and content: + +| Silhouette | Typical controls | Use when | +|---|---|---| +| Top navigation | `NavigationView` at the top of the content layer | The app benefits from preserving vertical content space and has shallow sections | +| Menu bar | `MenuBar` plus command surface | The main task is content creation/editing and commands need dense discovery | +| Left navigation | `NavigationView` at the base layer | The app has multiple durable sections, such as settings or dashboards | +| TabView | `TabView` integrated with the base layer/title bar | The app manages documents, sessions, terminals, or editor tabs | + +Pick one primary shell first. If the app needs both durable sections and documents, make their roles explicit before writing XAML. + +## Responsive Widths + +Design for app-window width in effective pixels: + +| Class | Width | Design intent | +|---|---:|---| +| Small | under 640 epx | Collapse navigation, use one column, show only essential metadata | +| Medium | 641-1007 epx | Add detail regions only when they reduce navigation or improve comprehension | +| Large | 1008 epx and wider | Use persistent navigation, multi-column lists, master-detail, or richer metadata | + +Do not infer layout from device type. Windows exposes the app's usable window size; let breakpoints follow that available width. + +## Responsive Techniques + +Use a responsive design when one layout can fluidly adapt. Use an adaptive layout when the UI must switch to a substantially different arrangement at a breakpoint. + +| Technique | What changes | Example use | +|---|---|---| +| Reposition | Element placement | Move a details pane from below a list to the side | +| Resize | Margins or element size | Increase reading width or content frame size on large windows | +| Reflow | Arrangement | Change one column to two columns | +| Show/hide | Secondary UI | Hide low-value metadata on small widths | +| Re-architect | Page structure | Expand from list-only to list-detail when there is enough width | +| Adaptive layout | Whole layout | Swap compact navigation for tabs or a richer shell | + +Add a breakpoint only when it changes task success, navigation cost, or visible information density. + +## XAML Implementation Rules + +- Prefer dynamic layout: `Auto`, `*`, `MinWidth`, `MaxWidth`, `MinHeight`, and `MaxHeight`. +- Use fixed sizes only for intentionally fixed elements, such as icons, compact command buttons, or graphic regions. +- Use `ActualWidth` and `ActualHeight` for runtime measurements; `Width` and `Height` may be unset or represent requested sizes. +- Use `Visibility="Collapsed"` to remove hidden UI from layout. +- Use `x:Load` when hidden secondary UI is expensive and should not be created at startup. +- Use `VisualStateManager` with `AdaptiveTrigger` for XAML-only breakpoint changes, or `VisualStateManager.GoToState` from code when the condition is not expressible in XAML. +- Keep visual states named by layout intent, such as `NarrowState`, `MediumState`, and `WideState`. + +## Panel Choice + +| Panel | Strength | Constraint | +|---|---|---| +| `Grid` | Resizable rows/columns, page skeletons, constrained content | Best default for page structure | +| `RelativePanel` | Relationships between siblings and panel edges | Useful with visual states; harder to read when a grid would do | +| `StackPanel` | Simple local vertical or horizontal stacks | In its stacking direction, content can extend beyond bounds unless constrained | +| `VariableSizedWrapGrid` | Wrapping tile layouts | Size items deliberately | +| `Canvas` | Absolute placement for graphics or small static regions | Does not provide ordinary fluid layout behavior | + +Use built-in panel border properties where available instead of wrapping every panel in an extra `Border`. + +## Content Spacing + +Use spacing to express relationships: + +| Value | Relationship | +|---:|---| +| 8 epx | Button-to-button, button-to-flyout, control-to-header | +| 12 epx | Control-to-label or adjacent content regions | +| 16 epx | Text inside a surface edge, expander action spacing | +| 48 epx | Nested expander content indentation | +| 56 epx | Large media or highly cohesive content margins | + +Use compact margins for dense tools. Use larger margins when they support media, galleries, or cohesive grouped content. + +## Title Bar Layout + +- Standard height is 32 px. +- Use 48 px when global search or account/person UI is present. +- Place the 16 px app icon near the leading edge and center it vertically. +- Keep window title text responsive to text scaling and allow truncation before caption buttons are clipped. +- Empty space and non-interactive title-bar elements should remain draggable. +- Right-click or press-and-hold on non-interactive title-bar regions should show the system window menu. +- Preserve minimize, maximize/restore, and close buttons as fully visible caption controls. +- When tabs are the main app element, integrate tabs into the title-bar area while keeping caption buttons on the trailing side. + +## Review Checklist + +- The page has one primary shell and one primary navigation model. +- The layout defines small, medium, and large window behavior. +- At least one breakpoint materially improves task completion or reduces navigation. +- The page root is not fixed-size. +- Whole-page layout uses `Grid` or another fluid panel, not a single `StackPanel` or `Canvas`. +- Secondary or expensive hidden UI uses `Visibility` and, when needed, `x:Load`. +- Title bar height and drag regions match the controls placed there. +- Content spacing communicates grouping instead of filling the page with decorative cards. From bc1766961836f6f58eaa5e795f7d81d97cb90a13 Mon Sep 17 00:00:00 2001 From: wangdiandao <1362919224@qq.com> Date: Wed, 20 May 2026 15:59:26 +0800 Subject: [PATCH 2/2] Rename WinUI layout skill --- .github/ISSUE_TEMPLATE/bug-report.yml | 2 +- CHANGELOG.md | 2 +- README.md | 4 ++-- plugins/winui/skills/winui-design/SKILL.md | 6 +++--- .../skills/{winui-layout-design => winui-layout}/SKILL.md | 4 ++-- .../references/microsoft-layout-guidelines.md | 0 6 files changed, 9 insertions(+), 9 deletions(-) rename plugins/winui/skills/{winui-layout-design => winui-layout}/SKILL.md (99%) rename plugins/winui/skills/{winui-layout-design => winui-layout}/references/microsoft-layout-guidelines.md (100%) diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index b8e3a9d..95b66ec 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.github/ISSUE_TEMPLATE/bug-report.yml @@ -26,7 +26,7 @@ body: - "skill: winui (agent)" - "skill: winui-dev-workflow" - "skill: winui-design" - - "skill: winui-layout-design" + - "skill: winui-layout" - "skill: winui-code-review" - "skill: winui-ui-testing" - "skill: winui-packaging" diff --git a/CHANGELOG.md b/CHANGELOG.md index 03be87d..c28a63a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,7 +23,7 @@ The `version-bump` and `changelog-entry` CI jobs enforce this. ### Added -- `winui-layout-design` skill for page silhouettes, responsive breakpoints, +- `winui-layout` skill for page silhouettes, responsive breakpoints, adaptive XAML, title bar layout, layout panels, and initial window sizing. ### Changed diff --git a/README.md b/README.md index 8706cd8..1e23a16 100644 --- a/README.md +++ b/README.md @@ -120,13 +120,13 @@ A focused agent for WinUI 3 / Windows App SDK / XAML / C# work. Use it for new a ### The nine skills -Each skill is a focused, self-contained playbook. The agent loads `winui-design` and `winui-dev-workflow` by default — those cover most "build me a WinUI 3 app" requests end-to-end; `winui-design` routes deeper page layout work to `winui-layout-design` when needed. You opt into the others when you want them, including `winui-setup` for one-time machine prep. +Each skill is a focused, self-contained playbook. The agent loads `winui-design` and `winui-dev-workflow` by default — those cover most "build me a WinUI 3 app" requests end-to-end; `winui-design` routes deeper page layout work to `winui-layout` when needed. You opt into the others when you want them, including `winui-setup` for one-time machine prep. | Skill | What it does | |---|---| | **`winui-dev-workflow`** | Build and run workflow — project creation from templates, the `BuildAndRun.ps1` helper, `winapp run`, error diagnosis, prerequisites. Use when building, running, or fixing build errors. | | **`winui-design`** | UI design and XAML correctness — layout planning, control selection, Fluent Design, theming (Light/Dark/HighContrast), typography, spacing, brushes, accessibility, data-binding review. Bundles `winui-search.exe` for grounded control lookup against the WinUI Gallery + Community Toolkit catalogue. | -| **`winui-layout-design`** | Page layout and responsive design — app silhouettes, breakpoints, adaptive XAML, title bar composition, content spacing, layout panels, and initial window sizing based on Microsoft Learn layout guidance. | +| **`winui-layout`** | Page layout and responsive design — app silhouettes, breakpoints, adaptive XAML, title bar composition, content spacing, layout panels, and initial window sizing based on Microsoft Learn layout guidance. | | **`winui-code-review`** | Code-quality review before committing — MVVM compliance, `x:Bind` correctness, accessibility, theming, security, performance. Catches what the compiler and UI tests won't. | | **`winui-ui-testing`** | Automated UI testing — generates a batch test script, runs all tests in one pass, reads results. Covers element assertions, interactions, value checks (TextBox, ComboBox, ToggleSwitch), file pickers, flyouts, dialogs, persistence, accessibility audits. | | **`winui-packaging`** | MSIX packaging, code signing, and distribution — release builds, certificate generation (`winapp cert generate`), trust, signing (`winapp sign`), self-contained deployment, GitHub Actions CI/CD, and Microsoft Store submission. | diff --git a/plugins/winui/skills/winui-design/SKILL.md b/plugins/winui/skills/winui-design/SKILL.md index ad70c8c..17746c3 100644 --- a/plugins/winui/skills/winui-design/SKILL.md +++ b/plugins/winui/skills/winui-design/SKILL.md @@ -35,13 +35,13 @@ description: "WinUI 3 UI design and XAML correctness — layout planning, contro **Feedback:** Blocking decision → `ContentDialog`; contextual action → `Flyout`/`MenuFlyout`; onboarding → `TeachingTip`; inline status → `InfoBar`; system notification → `AppNotification`. #### Step 3: Plan Layout -For app silhouette, responsive breakpoints, adaptive XAML, title bar composition, panel choice, and initial window size, use `winui-layout-design` before writing page XAML. Return here for control lookup, theming, typography, brushes, accessibility, and binding correctness. +For app silhouette, responsive breakpoints, adaptive XAML, title bar composition, panel choice, and initial window size, use `winui-layout` before writing page XAML. Return here for control lookup, theming, typography, brushes, accessibility, and binding correctness. Minimum layout defaults: content fills the window, ordinary pages use a `Grid` skeleton, `StackPanel` is local-only, and floating cards on empty backgrounds need a strong product reason. #### Step 4: Size the Window to the App -Use `winui-layout-design` to derive the initial window size from the page layout. WinUI 3 has no `SizeToContent`; do not fake it by setting `Width` or `Height` on the root element because that clips content instead of resizing the app window. +Use `winui-layout` to derive the initial window size from the page layout. WinUI 3 has no `SizeToContent`; do not fake it by setting `Width` or `Height` on the root element because that clips content instead of resizing the app window. If the user asks for UI validation, see `winui-ui-testing` Step 3.5 to verify layout and window fit against the visual checklist. @@ -183,4 +183,4 @@ ToolTipService.SetToolTip(btn, "Save the current document"); | `references/typography-and-spacing.md` | Detailed type ramp, spacing grid, and sizing examples | | `references/colors-and-materials.md` | Theme brush catalog, Mica/Acrylic surface pairings, material usage | | `references/iconography-and-motion.md` | Icon guidelines, animation patterns, connected animations | -| Sibling skill: `winui-layout-design` | Page silhouette, responsive breakpoints, title bar layout, layout panels, content spacing, and initial window sizing | +| Sibling skill: `winui-layout` | Page silhouette, responsive breakpoints, title bar layout, layout panels, content spacing, and initial window sizing | diff --git a/plugins/winui/skills/winui-layout-design/SKILL.md b/plugins/winui/skills/winui-layout/SKILL.md similarity index 99% rename from plugins/winui/skills/winui-layout-design/SKILL.md rename to plugins/winui/skills/winui-layout/SKILL.md index b1b6729..cb81d3b 100644 --- a/plugins/winui/skills/winui-layout-design/SKILL.md +++ b/plugins/winui/skills/winui-layout/SKILL.md @@ -1,9 +1,9 @@ --- -name: winui-layout-design +name: winui-layout description: "Use when designing or reviewing WinUI 3 page layout, app silhouette, responsive breakpoints, adaptive XAML, title bar composition, content spacing, layout panels, initial window size, or fixing pages that feel cramped, over-carded, fixed-size, clipped, or waste space across small, medium, and large window widths." --- -# WinUI Layout Design +# WinUI Layout ## Overview diff --git a/plugins/winui/skills/winui-layout-design/references/microsoft-layout-guidelines.md b/plugins/winui/skills/winui-layout/references/microsoft-layout-guidelines.md similarity index 100% rename from plugins/winui/skills/winui-layout-design/references/microsoft-layout-guidelines.md rename to plugins/winui/skills/winui-layout/references/microsoft-layout-guidelines.md