[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MGDDRTKZBVWQPTS0GJ2YN6":3,"skill-same:01M6MGDDRTKZBVWQPTS0GJ2YN6":80},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":51,"linkOnly":52,"markdownContent":53,"markdownBody":54,"frontMatter":55,"refName":56,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":61,"ownerHtmlUrl":62,"ownerBlogUrl":63,"ownerDescription":64,"updatedAt":65,"install":66,"resources":79},"01M6MGDDRTKZBVWQPTS0GJ2YN6","windows-design",null,"Use when the user asks for a Windows app, Win11\u002FWin12 UI, XAML, Fluent design, WinUI, WPF, PowerToys-style tool, Microsoft Store app, desktop utility, admin tool, music\u002Fphoto\u002Fcreative app, Tauri desktop, Electron desktop, or any Windows desktop deliverable. Builds Windows apps across system-like WinUI 3, branded WinUI 3, Tauri 2, and Electron while preserving UX decisions, desktop archetype, originality seed, layout sketch, state coverage, Fluent\u002FMica rules, and motion restraint. ALWAYS ask which track first. SKIP when the user explicitly wants only Apple, Android, or web-in-browser.","hashgraph-online\u002Fawesome-codex-plugins","hashgraph-online","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160371962?v=4","01M6CNB6NRJVNNGN14TR01Q6D3","HOL (Hashgraph Online)","01M6JT1HSKKG9V68KQAQGBA7XP",1575,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ff0d010c\u002Fstark\u002Fskills\u002Fwindows-design\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50],"windows","windows design","design","apple","fluent design","when","track","which","ux decisions","utility","apps","app","layout","across","tauri","only","coverage","ask","ux","browser","xaml","fluent","2026-11-10 10:12:30",false,"---\nname: windows-design\ndescription: Use when the user asks for a Windows app, Win11\u002FWin12 UI, XAML, Fluent design, WinUI, WPF, PowerToys-style tool, Microsoft Store app, desktop utility, admin tool, music\u002Fphoto\u002Fcreative app, Tauri desktop, Electron desktop, or any Windows desktop deliverable. Builds Windows apps across system-like WinUI 3, branded WinUI 3, Tauri 2, and Electron while preserving UX decisions, desktop archetype, originality seed, layout sketch, state coverage, Fluent\u002FMica rules, and motion restraint. ALWAYS ask which track first. SKIP when the user explicitly wants only Apple, Android, or web-in-browser.\n---\n\n# windows-design — pick the track first\n\nWindows desktop has four distinct tracks. Each has different visual ceilings, different cost. **Ask the user which one before any code.** Do not default.\n\n## What This Skill Can Do\n\n- Choose the right Windows track: strict WinUI, branded WinUI, Tauri, or Electron.\n- Design desktop archetypes such as command centers, libraries, workbenches, monitoring cockpits, tray utilities, media apps, document apps, and settings\u002Fpreferences.\n- Preserve UX briefs, state coverage, command hierarchy, keyboard paths, inspector\u002Fdetail panes, and recovery flows.\n- Apply Fluent, Mica\u002FAcrylic, Segoe UI Variable, Fluent icons, SettingsCard, NavigationView, InfoBar, and Windows density rules.\n- Avoid generic sidebar\u002Fcards\u002Ftable shells by using product-specific composition and anti-default rewrites.\n\n## Step 1 (MANDATORY) — Ask the user which track\n\nPresent these four options verbatim. Do not pick for them.\n\n> Which track do you want for this app?\n>\n> **1. System-like native (WinUI 3 strict)** — feels like Settings\u002FCalculator\u002FNotepad. Best for: productivity utilities, internal tools, system panels. Visual ceiling: medium. Binary ~30MB. Users who care: Windows power users, IT admins. Examples: PowerToys, Snipping Tool, Sound Recorder.\n>\n> **2. Branded native (WinUI 3 + branded Fluent)** — native chrome (Mica, Snap Layouts, ThemeResource auto dark\u002Flight\u002FHC) but bespoke content surface (custom accent, custom display font, hero atmospheres, magazine layouts). Best for: consumer apps that want fit-in *and* identity. Visual ceiling: high but XAML-bound. Binary ~30MB. Examples: Apple Music for Windows, Files (community), Microsoft Photos rewrite, DevHome.\n>\n> **3. Tauri 2 + React\u002FTailwind\u002FMotion** — same React code as Electron but uses Windows' built-in WebView2 instead of bundled Chromium. Full visual freedom (mesh gradients, custom motion, real imagery, anything CSS can do). Binary ~5–10MB. RAM ~30–80MB. Mica still available via Tauri API. Examples: Cap, Spacedrive, ClashVerge, Pot.\n>\n> **4. Electron + React\u002FTailwind\u002FMotion** — bundles full Chromium. Same dev experience as Tauri but heavier. Binary ~150–250MB. RAM ~300–500MB. Largest ecosystem, every dev knows it. Examples: Spotify, Discord, VSCode, Slack, Notion, Figma desktop, Claude desktop, ChatGPT desktop.\n>\n> Which? Or describe priorities (binary size, visual ambition, brand vs fit-in) and I'll pick.\n\nIf the user has already given enough signal in the brief (e.g. \"I want a system tray utility\" → 1; \"I want it to look like Awwwards site\" → 3; \"Spotify-style\" → 3 or 4), state your pick + reasoning in one sentence and proceed. But if ambiguous, ask.\n\n## Step 1b — Once picked, route\n\n| Track | Reference docs | Default stack |\n|---|---|---|\n| 1. System-like WinUI 3 | `..\u002F..\u002Freferences\u002Ffluent-design.md` | WinUI 3 + current stable Windows App SDK + CommunityToolkit.Mvvm + SettingsControls |\n| 2. Branded WinUI 3 | `..\u002F..\u002Freferences\u002Ffluent-design.md` + `..\u002F..\u002Freferences\u002Fbranded-fluent.md` | Same as 1 + custom accent override + embedded display font + bespoke surfaces |\n| 3. Tauri 2 + Web | `..\u002F..\u002Freferences\u002Fweb-fonts.md` + `..\u002F..\u002Freferences\u002Fweb-motion.md` + `..\u002F..\u002Freferences\u002Fweb-bans.md` + `..\u002F..\u002Freferences\u002Fawwwards-ceiling.md` | React 19 + Tailwind v4 + Motion (motion.dev) + Tauri 2 shell |\n| 4. Electron + Web | Same as 3 | React 19 + Tailwind v4 + Motion + Electron shell + electron-builder |\n\nFor tracks 3 and 4, the web design rules from `web-design` SKILL apply — same anti-slop ban list, same typography curation, same aesthetic direction discipline.\n\n## Step 1c — UI decision brief\n\nBefore code, read:\n\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fsurface-taxonomy.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fui-decision-brief.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fdesktop-app-archetypes.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fnative-desktop-app-quality-contract.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Foriginality-engine.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fdesign-recipes.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fanti-default-contrasts.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fvisual-hierarchy.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fmotion-budget.md`\n\nWrite the UI decision brief, desktop archetype brief, native desktop quality brief, originality brief when relevant, and a compact layout sketch before code. Pick the app shape before picking controls: command center, library\u002Fcollection, workbench, monitoring cockpit, tray utility, media\u002Fconsumer, document\u002Fknowledge, or setup\u002Fpreferences. Then choose a composition archetype from the product subject: cockpit, command deck, ledger, timeline wall, studio desk, light table, archive index, inspection bay, instrument panel, or another concrete premise. Define window model, command model, resize behavior, native controls, keyboard\u002Ffocus paths, state coverage, and platform evidence. If the sketch becomes sidebar + cards + table, use anti-default contrasts and rewrite it. Windows utilities and admin tools should favor operational density, stable navigation, command surfaces, inspectors, timelines, and low motion. Use SettingsCard\u002FNavigationView strongly for preferences and system-like utilities, but do not make every Windows app a settings shell. Branded consumer apps may use richer content surfaces, but native chrome, Mica\u002FAcrylic rules, Segoe UI Variable, and Fluent icons still apply.\n\n## Step 2a — Branded vs system-like (only if track 1 or 2 picked)\n\nTrack 1 = system-like. Track 2 = branded. The user already picked. Skip to step 2.\n\nFor reference: branded means native chrome + bespoke content surface. Read `..\u002F..\u002Freferences\u002Fbranded-fluent.md`.\n\n## Step 2 — WinUI 3 idioms\n\nEvery Win11 app must:\n- Extend the title bar into the client area via `AppWindow.TitleBar` API (preserve Snap Layouts hover)\n- Apply **Mica** as the top-level window backdrop (`SystemBackdrop=\"Mica\"`) — opaque, desktop-tinted\n- Apply **Acrylic** only to transient surfaces: flyouts, command bars, menus\n- Use **Mica Alt** for tabbed apps (Terminal, Edge, Files)\n- Use 8px corner radius on windows, 4px on controls, 0px in dense grids\n- Use **tonal elevation** (background brush shifts) — never CSS-style drop shadows\n- Wire light\u002Fdark via `ThemeResource` brushes, never hex literals\n\n**Reveal effect** is deprecated in Win11 styling. Do not generate it.\n\n## Step 3 — Typography & icons\n\n- **Segoe UI Variable** is the only correct face. Wire variable axes (wght 100–700, optical size). Never Segoe UI plain.\n- **Segoe Fluent Icons** font for iconography. 1 epx monoline. Sizes: 16\u002F20\u002F24\u002F32\u002F40\u002F48\u002F64.\n- For body text in productivity: weight 400, size 14, line height 20. For headlines: optical size adjusts automatically — let it.\n\n## Step 4 — Layout components (use these, not custom)\n\n| Need | Use |\n|---|---|\n| Top-level navigation | `NavigationView` (Left, LeftCompact, Top modes) |\n| Settings | `SettingsCard` (CommunityToolkit.WinUI.Controls.SettingsControls) |\n| Library \u002F collection | `ListView` \u002F `GridView` + preview pane + metadata panel |\n| Workbench \u002F editor | `CommandBar` + canvas\u002Fdocument area + right-side inspector |\n| Monitoring \u002F jobs | timeline\u002Flist + `InfoBar` states + detail pane |\n| Tray utility | compact window or tray flyout + one primary status\u002Faction |\n| Inline alert | `InfoBar` (Severity: Informational\u002FSuccess\u002FWarning\u002FError) |\n| Coachmark | `TeachingTip` |\n| Disclosure | `Expander` |\n| Path \u002F breadcrumb | `BreadcrumbBar` |\n| Tabbed segment toggle | `SelectorBar` |\n\nRefer to **WinUI Gallery** (https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FWinUI-Gallery) for canonical control usage. When generating, mirror its patterns exactly.\n\n## Step 5 — Architecture\n\n- **CommunityToolkit.Mvvm** (`[ObservableProperty]`, `[RelayCommand]`) — never raw `INotifyPropertyChanged`\n- DI via `Microsoft.Extensions.Hosting`\n- Settings persistence via `Windows.Storage.ApplicationData.Current.LocalSettings` or `Microsoft.UI.Xaml.Settings`\n- Localization via `.resw` resource files (not hardcoded strings)\n\n## Step 6 — Anti-slop ban list (Windows-specific)\n\nReject all of these:\n\n- Inter \u002F Roboto \u002F system-ui on native chrome — only Segoe UI Variable\n- CSS-style `box-shadow` — use tonal elevation brushes (`LayerFillColorDefaultBrush` etc.)\n- Custom hamburger menu where `NavigationView` belongs\n- Acrylic on long-lived window backgrounds (use Mica)\n- Mica on flyouts (use Acrylic)\n- Hardcoded hex colors — breaks dark mode + high contrast. ThemeResource only.\n- Hand-rolled title bar that breaks Snap Layouts hover\n- Square 90° corners\n- Material Design ripples\n- iOS-style segmented controls with sliding pill (use SelectorBar instead)\n- Bottom tab bars (Android idiom)\n- Custom scrollbars that override `ScrollViewer` (breaks dynamic thinning)\n- FontAwesome \u002F Material Symbols icons (use Segoe Fluent Icons)\n- Marketing-page spacing in productivity\u002Fadmin tools\n- Decorative cards replacing SettingsCard, table\u002Flist, or master-detail surfaces\n- Sidebar plus cards plus table as the default for every desktop app\n- Branded originality that only changes colors while keeping the same generic shell\n\n## Step 7 — Reference apps to emulate\n\n- **Files** (files.community) — Mica + tabs + dual-pane + command palette\n- **PowerToys** (recently redesigned by Niels Laute) — canonical NavigationView + InfoBar settings shell\n- **Windows Terminal** — title-bar tab integration, JSON theming\n- **Microsoft Photos (2024 rewrite)** — WinUI 3 + AI surfaces\n- **Snipping Tool \u002F Clipchamp** — modern command bar + teaching tips\n- **DevHome** — dashboard widget pattern\n- **Notepad (rewrite)** — minimal Fluent restraint\n\n## Step 8 — Tokens & assets\n\n- Token JSON (DTCG): see `..\u002F..\u002Fassets\u002Ftokens\u002Ffluent-2.json` shipped with this plugin\n- Fluent 2: https:\u002F\u002Ffluent2.microsoft.design\n- Win design downloads (Figma + icons + Segoe): https:\u002F\u002Flearn.microsoft.com\u002Fwindows\u002Fapps\u002Fdesign\u002Fdownloads\n- WinUI source: https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-xaml\n\nRead `..\u002F..\u002Freferences\u002Ffluent-design.md` for deep token + spacing reference.\n\n## Step 9 — Fidelity tradeoffs to communicate\n\nWhen the user picks a non-native stack, **state the loss explicitly** in one line:\n- Tauri 2: \"~3MB binary, but WebView2 chrome — Mica still works via window-backdrop API but font rendering and focus rings will look subtly off vs WinUI 3.\"\n- Avalonia: \"Cross-platform but Fluent theme is custom-drawn, not 1:1 with Win11.\"\n- Electron: \"Don't. Use Tauri 2 if web stack is mandated.\"\n","# windows-design — pick the track first\n\nWindows desktop has four distinct tracks. Each has different visual ceilings, different cost. **Ask the user which one before any code.** Do not default.\n\n## What This Skill Can Do\n\n- Choose the right Windows track: strict WinUI, branded WinUI, Tauri, or Electron.\n- Design desktop archetypes such as command centers, libraries, workbenches, monitoring cockpits, tray utilities, media apps, document apps, and settings\u002Fpreferences.\n- Preserve UX briefs, state coverage, command hierarchy, keyboard paths, inspector\u002Fdetail panes, and recovery flows.\n- Apply Fluent, Mica\u002FAcrylic, Segoe UI Variable, Fluent icons, SettingsCard, NavigationView, InfoBar, and Windows density rules.\n- Avoid generic sidebar\u002Fcards\u002Ftable shells by using product-specific composition and anti-default rewrites.\n\n## Step 1 (MANDATORY) — Ask the user which track\n\nPresent these four options verbatim. Do not pick for them.\n\n> Which track do you want for this app?\n>\n> **1. System-like native (WinUI 3 strict)** — feels like Settings\u002FCalculator\u002FNotepad. Best for: productivity utilities, internal tools, system panels. Visual ceiling: medium. Binary ~30MB. Users who care: Windows power users, IT admins. Examples: PowerToys, Snipping Tool, Sound Recorder.\n>\n> **2. Branded native (WinUI 3 + branded Fluent)** — native chrome (Mica, Snap Layouts, ThemeResource auto dark\u002Flight\u002FHC) but bespoke content surface (custom accent, custom display font, hero atmospheres, magazine layouts). Best for: consumer apps that want fit-in *and* identity. Visual ceiling: high but XAML-bound. Binary ~30MB. Examples: Apple Music for Windows, Files (community), Microsoft Photos rewrite, DevHome.\n>\n> **3. Tauri 2 + React\u002FTailwind\u002FMotion** — same React code as Electron but uses Windows' built-in WebView2 instead of bundled Chromium. Full visual freedom (mesh gradients, custom motion, real imagery, anything CSS can do). Binary ~5–10MB. RAM ~30–80MB. Mica still available via Tauri API. Examples: Cap, Spacedrive, ClashVerge, Pot.\n>\n> **4. Electron + React\u002FTailwind\u002FMotion** — bundles full Chromium. Same dev experience as Tauri but heavier. Binary ~150–250MB. RAM ~300–500MB. Largest ecosystem, every dev knows it. Examples: Spotify, Discord, VSCode, Slack, Notion, Figma desktop, Claude desktop, ChatGPT desktop.\n>\n> Which? Or describe priorities (binary size, visual ambition, brand vs fit-in) and I'll pick.\n\nIf the user has already given enough signal in the brief (e.g. \"I want a system tray utility\" → 1; \"I want it to look like Awwwards site\" → 3; \"Spotify-style\" → 3 or 4), state your pick + reasoning in one sentence and proceed. But if ambiguous, ask.\n\n## Step 1b — Once picked, route\n\n| Track | Reference docs | Default stack |\n|---|---|---|\n| 1. System-like WinUI 3 | `..\u002F..\u002Freferences\u002Ffluent-design.md` | WinUI 3 + current stable Windows App SDK + CommunityToolkit.Mvvm + SettingsControls |\n| 2. Branded WinUI 3 | `..\u002F..\u002Freferences\u002Ffluent-design.md` + `..\u002F..\u002Freferences\u002Fbranded-fluent.md` | Same as 1 + custom accent override + embedded display font + bespoke surfaces |\n| 3. Tauri 2 + Web | `..\u002F..\u002Freferences\u002Fweb-fonts.md` + `..\u002F..\u002Freferences\u002Fweb-motion.md` + `..\u002F..\u002Freferences\u002Fweb-bans.md` + `..\u002F..\u002Freferences\u002Fawwwards-ceiling.md` | React 19 + Tailwind v4 + Motion (motion.dev) + Tauri 2 shell |\n| 4. Electron + Web | Same as 3 | React 19 + Tailwind v4 + Motion + Electron shell + electron-builder |\n\nFor tracks 3 and 4, the web design rules from `web-design` SKILL apply — same anti-slop ban list, same typography curation, same aesthetic direction discipline.\n\n## Step 1c — UI decision brief\n\nBefore code, read:\n\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fsurface-taxonomy.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fui-decision-brief.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fdesktop-app-archetypes.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fnative-desktop-app-quality-contract.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Foriginality-engine.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fdesign-recipes.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fanti-default-contrasts.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fvisual-hierarchy.md`\n- `..\u002F..\u002Freferences\u002Fui-patterns\u002Fmotion-budget.md`\n\nWrite the UI decision brief, desktop archetype brief, native desktop quality brief, originality brief when relevant, and a compact layout sketch before code. Pick the app shape before picking controls: command center, library\u002Fcollection, workbench, monitoring cockpit, tray utility, media\u002Fconsumer, document\u002Fknowledge, or setup\u002Fpreferences. Then choose a composition archetype from the product subject: cockpit, command deck, ledger, timeline wall, studio desk, light table, archive index, inspection bay, instrument panel, or another concrete premise. Define window model, command model, resize behavior, native controls, keyboard\u002Ffocus paths, state coverage, and platform evidence. If the sketch becomes sidebar + cards + table, use anti-default contrasts and rewrite it. Windows utilities and admin tools should favor operational density, stable navigation, command surfaces, inspectors, timelines, and low motion. Use SettingsCard\u002FNavigationView strongly for preferences and system-like utilities, but do not make every Windows app a settings shell. Branded consumer apps may use richer content surfaces, but native chrome, Mica\u002FAcrylic rules, Segoe UI Variable, and Fluent icons still apply.\n\n## Step 2a — Branded vs system-like (only if track 1 or 2 picked)\n\nTrack 1 = system-like. Track 2 = branded. The user already picked. Skip to step 2.\n\nFor reference: branded means native chrome + bespoke content surface. Read `..\u002F..\u002Freferences\u002Fbranded-fluent.md`.\n\n## Step 2 — WinUI 3 idioms\n\nEvery Win11 app must:\n- Extend the title bar into the client area via `AppWindow.TitleBar` API (preserve Snap Layouts hover)\n- Apply **Mica** as the top-level window backdrop (`SystemBackdrop=\"Mica\"`) — opaque, desktop-tinted\n- Apply **Acrylic** only to transient surfaces: flyouts, command bars, menus\n- Use **Mica Alt** for tabbed apps (Terminal, Edge, Files)\n- Use 8px corner radius on windows, 4px on controls, 0px in dense grids\n- Use **tonal elevation** (background brush shifts) — never CSS-style drop shadows\n- Wire light\u002Fdark via `ThemeResource` brushes, never hex literals\n\n**Reveal effect** is deprecated in Win11 styling. Do not generate it.\n\n## Step 3 — Typography & icons\n\n- **Segoe UI Variable** is the only correct face. Wire variable axes (wght 100–700, optical size). Never Segoe UI plain.\n- **Segoe Fluent Icons** font for iconography. 1 epx monoline. Sizes: 16\u002F20\u002F24\u002F32\u002F40\u002F48\u002F64.\n- For body text in productivity: weight 400, size 14, line height 20. For headlines: optical size adjusts automatically — let it.\n\n## Step 4 — Layout components (use these, not custom)\n\n| Need | Use |\n|---|---|\n| Top-level navigation | `NavigationView` (Left, LeftCompact, Top modes) |\n| Settings | `SettingsCard` (CommunityToolkit.WinUI.Controls.SettingsControls) |\n| Library \u002F collection | `ListView` \u002F `GridView` + preview pane + metadata panel |\n| Workbench \u002F editor | `CommandBar` + canvas\u002Fdocument area + right-side inspector |\n| Monitoring \u002F jobs | timeline\u002Flist + `InfoBar` states + detail pane |\n| Tray utility | compact window or tray flyout + one primary status\u002Faction |\n| Inline alert | `InfoBar` (Severity: Informational\u002FSuccess\u002FWarning\u002FError) |\n| Coachmark | `TeachingTip` |\n| Disclosure | `Expander` |\n| Path \u002F breadcrumb | `BreadcrumbBar` |\n| Tabbed segment toggle | `SelectorBar` |\n\nRefer to **WinUI Gallery** (https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FWinUI-Gallery) for canonical control usage. When generating, mirror its patterns exactly.\n\n## Step 5 — Architecture\n\n- **CommunityToolkit.Mvvm** (`[ObservableProperty]`, `[RelayCommand]`) — never raw `INotifyPropertyChanged`\n- DI via `Microsoft.Extensions.Hosting`\n- Settings persistence via `Windows.Storage.ApplicationData.Current.LocalSettings` or `Microsoft.UI.Xaml.Settings`\n- Localization via `.resw` resource files (not hardcoded strings)\n\n## Step 6 — Anti-slop ban list (Windows-specific)\n\nReject all of these:\n\n- Inter \u002F Roboto \u002F system-ui on native chrome — only Segoe UI Variable\n- CSS-style `box-shadow` — use tonal elevation brushes (`LayerFillColorDefaultBrush` etc.)\n- Custom hamburger menu where `NavigationView` belongs\n- Acrylic on long-lived window backgrounds (use Mica)\n- Mica on flyouts (use Acrylic)\n- Hardcoded hex colors — breaks dark mode + high contrast. ThemeResource only.\n- Hand-rolled title bar that breaks Snap Layouts hover\n- Square 90° corners\n- Material Design ripples\n- iOS-style segmented controls with sliding pill (use SelectorBar instead)\n- Bottom tab bars (Android idiom)\n- Custom scrollbars that override `ScrollViewer` (breaks dynamic thinning)\n- FontAwesome \u002F Material Symbols icons (use Segoe Fluent Icons)\n- Marketing-page spacing in productivity\u002Fadmin tools\n- Decorative cards replacing SettingsCard, table\u002Flist, or master-detail surfaces\n- Sidebar plus cards plus table as the default for every desktop app\n- Branded originality that only changes colors while keeping the same generic shell\n\n## Step 7 — Reference apps to emulate\n\n- **Files** (files.community) — Mica + tabs + dual-pane + command palette\n- **PowerToys** (recently redesigned by Niels Laute) — canonical NavigationView + InfoBar settings shell\n- **Windows Terminal** — title-bar tab integration, JSON theming\n- **Microsoft Photos (2024 rewrite)** — WinUI 3 + AI surfaces\n- **Snipping Tool \u002F Clipchamp** — modern command bar + teaching tips\n- **DevHome** — dashboard widget pattern\n- **Notepad (rewrite)** — minimal Fluent restraint\n\n## Step 8 — Tokens & assets\n\n- Token JSON (DTCG): see `..\u002F..\u002Fassets\u002Ftokens\u002Ffluent-2.json` shipped with this plugin\n- Fluent 2: https:\u002F\u002Ffluent2.microsoft.design\n- Win design downloads (Figma + icons + Segoe): https:\u002F\u002Flearn.microsoft.com\u002Fwindows\u002Fapps\u002Fdesign\u002Fdownloads\n- WinUI source: https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-xaml\n\nRead `..\u002F..\u002Freferences\u002Ffluent-design.md` for deep token + spacing reference.\n\n## Step 9 — Fidelity tradeoffs to communicate\n\nWhen the user picks a non-native stack, **state the loss explicitly** in one line:\n- Tauri 2: \"~3MB binary, but WebView2 chrome — Mica still works via window-backdrop API but font rendering and focus rings will look subtly off vs WinUI 3.\"\n- Avalonia: \"Cross-platform but Fluent theme is custom-drawn, not 1:1 with Win11.\"\n- Electron: \"Don't. Use Tauri 2 if web stack is mandated.\"\n",{"name":5,"description":7},"main","2b63f856ce19c2a797929cacabd9e0fc936812fa","plugins\u002Ff0d010c\u002Fstark\u002Fskills\u002Fwindows-design",491,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins","https:\u002F\u002Fhol.org\u002Fplugins\u002Fbest-codex-plugins","https:\u002F\u002Fgithub.com\u002Fhashgraph-online","https:\u002F\u002Fhol.org","Open-source standards and developer tools for interoperable AI agents: discovery, identity, communication, payments, privacy and security.","2026-11-14 14:06:13",{"source":8,"skillName":5,"commands":67,"prompt":77,"zipAvailable":78},[68,71,74],{"tool":69,"command":70},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill windows-design",{"tool":72,"command":73},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill windows-design",{"tool":75,"command":76},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill windows-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ff0d010c\u002Fstark\u002Fskills\u002Fwindows-design\u002FSKILL.md",true,[],[81,89,96,103,128,153],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":88},"01M746ZWACVKMZ1BJXJZHYJSSX","migrate-to-e2e","Moves an existing Playwright, Cypress, Selenium, Appium, Detox, Maestro, or TesterArmy suite to e2e one slice at a time, with the old suite running beside the new one until each ported test is proven. Keeps a MIGRATION.md progress file so any later session resumes where the last stopped. Optionally plants a defect to show both suites catch it. Use for \u002Fmigrate-to-e2e, \"migrate our tests to e2e\", \"port these Maestro flows\", \"move our TesterArmy tests\", or when a project has an e2e config and an older suite still running.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fmigrate-to-e2e\u002FSKILL.md",[],[],"2026-11-11 15:11:14",{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":88},"01M746ZPTAX1Q0FBKAB1CYND7E","e2e","Writes, runs, and debugs end-to-end tests for web and mobile apps with e2e, the agentic test runner, which mixes agent.act goals with exact locator assertions on a Playwright browser or an iOS or Android device. Also drives a project's running app live over the e2e MCP server to look at a screen, check a UI change, take a screenshot or record a video, and try a locator; and runs bug bashes, parallel e2e explore runs with each bug proven by a repro test. Use when a project depends on e2e or has an e2e.config.ts, when asked for end-to-end, browser, mobile, or agentic UI tests, to check a change in the running app, to QA or bug bash an app or branch, or when an e2e run fails.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fe2e\u002FSKILL.md",[],[],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":88},"01M746ZJN784HVHMDP9MQGCSGG","create-verification-skill","Generate a project-local verify-\u003Capp> skill on top of e2e, so any coding agent can launch the app, check it is worth driving, exercise a feature the way a user does, keep evidence, and bug bash it. Writes the skill, a feature map with one explore charter per feature, and proves it once. Use for \u002Fcreate-verification-skill, \"make a verification skill for this repo\", or when a project has no scripted way to prove UI behavior.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fcreate-verification-skill\u002FSKILL.md",[],[],{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":109,"publishedAt":51},"01M716A6ETNB9B1SQ3GXZC75VR","deja-search","deja-vu memory — search the user's past AI coding sessions with the deja CLI. Holds what they already settled and never wrote into the repo (naming rules, banned or already-tried tools, required checks before merge, preferred values, who owns what). Use before your first edit in a task, before you call a change done or ready to merge, before you recommend a tool, library, design or reviewer, before re-debugging an error that may already be solved, when they say 'didn't we fix this before', 'what did we decide about X' or 'I already have that', and before telling them something on this machine does not exist.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-search\u002FSKILL.md",[],[110,111,112,113,114,115,116,117,118,31,119,34,120,121,122,123,124,125,126,127],"search","deja search","never","error","ready","memory","re","decide","fix","debugging","you","done","reviewer","io","change","cli","merge","past",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":134,"publishedAt":51},"01M716A3J2W5SENSE9VGMXB375","deja-reflect","End-of-session reflection and memory curation with deja-vu. Review what was decided, what commands broke and what repaired them, and record durable project rules or decisions with deja remember so the next session starts with them.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-reflect\u002FSKILL.md",[],[135,136,137,123,138,139,140,141,142,143,144,145,146,147,115,148,149,150,151,152],"deja reflect","reflect","review","with","record","github","next","https","node","Rules","decisions","brew","remember","project rules","project","session","end","reflection",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":168,"publishedAt":51},"01M715T3RR4BAYSR57HPPTJ0PF","revid","Make, edit, export and post AI videos with Revid (revid.ai) through the Revid MCP server. Use whenever the user wants a short-form or long-form video made (from an idea, a script, a URL, an article, a PDF, a tweet, a product page, their own clips, or a song), wants to find what is going viral on TikTok, YouTube, Instagram or X before making something, wants to edit or re-export an existing Revid project, generate a standalone AI image or clip, make a series episode, or publish and schedule a finished video to connected social accounts. Covers setup (hosted MCP with OAuth, or an API key), the 36 tools, credits, polling and the rules for publishing. Routes to the more specific revid-* skills when one fits.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftmakersas\u002Frevid-skills\u002Fskills\u002Frevid\u002FSKILL.md",[159,162,165],{"categoryNo":160,"categoryName":161,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":163,"categoryName":164,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":166,"categoryName":167,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[155,169,170,171,172,173,174,149,175,116,176,177,178,179,34,180,181,182,183,184],"URL","Video","short-form","standalone","PDF","viral","tiktok","short","social","MCP","song","image","mcp server","schedule","api","publish"]