windows-design

Name: windows-design
Author: f0d010c

19stars0forks

How to install windows-design?

f0d010c/stark/windows-design

$npx -y skills add f0d010c/stark --skill windows-design

Installs into the current project.

Summary

Use when the user asks for a Windows app, Win11/Win12 UI, XAML, Fluent design, WinUI, WPF, PowerToys-style tool, Microsoft Store app, desktop utility, admin tool, music/photo/creative app, Tauri desktop, Electron desktop, or any Windows desktop deliverable. Builds Windows apps ac

Files · 1

View on GitHub

SKILL.md

1	# windows-design — pick the track first
2
3	Windows desktop has four distinct tracks. Each has different visual ceilings, different cost. Ask the user which one before any code. Do not default.
4
5	## What This Skill Can Do
6
7	- Choose the right Windows track: strict WinUI, branded WinUI, Tauri, or Electron.
8	- Design desktop archetypes such as command centers, libraries, workbenches, monitoring cockpits, tray utilities, media apps, document apps, and settings/preferences.
9	- Preserve UX briefs, state coverage, command hierarchy, keyboard paths, inspector/detail panes, and recovery flows.
10	- Apply Fluent, Mica/Acrylic, Segoe UI Variable, Fluent icons, SettingsCard, NavigationView, InfoBar, and Windows density rules.
11	- Avoid generic sidebar/cards/table shells by using product-specific composition and anti-default rewrites.
12
13	## Step 1 (MANDATORY) — Ask the user which track
14
15	Present these four options verbatim. Do not pick for them.
16
17	> Which track do you want for this app?
18	>
19	> 1. System-like native (WinUI 3 strict) — feels like Settings/Calculator/Notepad. 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.
20	>
21	> 2. Branded native (WinUI 3 + branded Fluent) — native chrome (Mica, Snap Layouts, ThemeResource auto dark/light/HC) 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.
22	>
23	> 3. Tauri 2 + React/Tailwind/Motion — 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.
24	>
25	> 4. Electron + React/Tailwind/Motion — 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.
26	>
27	> Which? Or describe priorities (binary size, visual ambition, brand vs fit-in) and I'll pick.
28
29	If 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.
30
31	## Step 1b — Once picked, route
32
33	\| Track \| Reference docs \| Default stack \|
34	\|---\|---\|---\|
35	\| 1. System-like WinUI 3 \| `../../references/fluent-design.md` \| WinUI 3 + WinAppSDK 1.8 + CommunityToolkit.Mvvm + SettingsControls \|
36	\| 2. Branded WinUI 3 \| `../../references/fluent-design.md` + `../../references/branded-fluent.md` \| Same as 1 + custom accent override + embedded display font + bespoke surfaces \|
37	\| 3. Tauri 2 + Web \| `../../references/web-fonts.md` + `../../references/web-motion.md` + `../../references/web-bans.md` + `../../references/awwwards-ceiling.md` \| React 19 + Tailwind v4 + Motion (motion.dev) + Tauri 2 shell \|
38	\| 4. Electron + Web \| Same as 3 \| React 19 + Tailwind v4 + Motion + Electron shell + electron-builder \|
39
40	For 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.
41
42	## Step 1c — UI decision brief
43
44	Before code, read:
45
46	- `../../references/ui-patterns/surface-taxonomy.md`
47	- `../../references/ui-patterns/ui-decision-brief.md`
48	- `../../references/ui-patterns/desktop-app-archetypes.md`
49	- `../../references/ui-patterns/originality-engine.md`
50	- `../../references/ui-patterns/design-recipes.md`
51	- `../../references/ui-patterns/anti-default-contrasts.md`
52	- `../../references/ui-patterns/visual-hierarchy.md`
53	- `../../references/ui-patterns/motion-budget.md`
54
55	Write the UI decision brief, desktop archetype brief, originality brief when relevant, and a compact layout sketch before code. Pick the app shape before picking controls: command center, library/collection, workbench, monitoring cockpit, tray utility, media/consumer, document/knowledge, or setup/preferences. Then cho

People who liked this also viewed

6 picks

Type

windows-design

19stars0forks

View on GitHub

How to install windows-design?

f0d010c/stark/windows-design

$npx -y skills add f0d010c/stark --skill windows-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# windows-design — pick the track first
2
3	Windows desktop has four distinct tracks. Each has different visual ceilings, different cost. Ask the user which one before any code. Do not default.
4
5	## What This Skill Can Do
6
7	- Choose the right Windows track: strict WinUI, branded WinUI, Tauri, or Electron.
8	- Design desktop archetypes such as command centers, libraries, workbenches, monitoring cockpits, tray utilities, media apps, document apps, and settings/preferences.
9	- Preserve UX briefs, state coverage, command hierarchy, keyboard paths, inspector/detail panes, and recovery flows.
10	- Apply Fluent, Mica/Acrylic, Segoe UI Variable, Fluent icons, SettingsCard, NavigationView, InfoBar, and Windows density rules.
11	- Avoid generic sidebar/cards/table shells by using product-specific composition and anti-default rewrites.
12
13	## Step 1 (MANDATORY) — Ask the user which track
14
15	Present these four options verbatim. Do not pick for them.
16
17	> Which track do you want for this app?
18	>
19	> 1. System-like native (WinUI 3 strict) — feels like Settings/Calculator/Notepad. 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.
20	>
21	> 2. Branded native (WinUI 3 + branded Fluent) — native chrome (Mica, Snap Layouts, ThemeResource auto dark/light/HC) 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.
22	>
23	> 3. Tauri 2 + React/Tailwind/Motion — 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.
24	>
25	> 4. Electron + React/Tailwind/Motion — 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.
26	>
27	> Which? Or describe priorities (binary size, visual ambition, brand vs fit-in) and I'll pick.
28
29	If 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.
30
31	## Step 1b — Once picked, route
32
33	\| Track \| Reference docs \| Default stack \|
34	\|---\|---\|---\|
35	\| 1. System-like WinUI 3 \| `../../references/fluent-design.md` \| WinUI 3 + WinAppSDK 1.8 + CommunityToolkit.Mvvm + SettingsControls \|
36	\| 2. Branded WinUI 3 \| `../../references/fluent-design.md` + `../../references/branded-fluent.md` \| Same as 1 + custom accent override + embedded display font + bespoke surfaces \|
37	\| 3. Tauri 2 + Web \| `../../references/web-fonts.md` + `../../references/web-motion.md` + `../../references/web-bans.md` + `../../references/awwwards-ceiling.md` \| React 19 + Tailwind v4 + Motion (motion.dev) + Tauri 2 shell \|
38	\| 4. Electron + Web \| Same as 3 \| React 19 + Tailwind v4 + Motion + Electron shell + electron-builder \|
39
40	For 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.
41
42	## Step 1c — UI decision brief
43
44	Before code, read:
45
46	- `../../references/ui-patterns/surface-taxonomy.md`
47	- `../../references/ui-patterns/ui-decision-brief.md`
48	- `../../references/ui-patterns/desktop-app-archetypes.md`
49	- `../../references/ui-patterns/originality-engine.md`
50	- `../../references/ui-patterns/design-recipes.md`
51	- `../../references/ui-patterns/anti-default-contrasts.md`
52	- `../../references/ui-patterns/visual-hierarchy.md`
53	- `../../references/ui-patterns/motion-budget.md`
54
55	Write the UI decision brief, desktop archetype brief, originality brief when relevant, and a compact layout sketch before code. Pick the app shape before picking controls: command center, library/collection, workbench, monitoring cockpit, tray utility, media/consumer, document/knowledge, or setup/preferences. Then cho

People who liked this also viewed

6 picks

Type