design-system

Name: design-system
Author: microsoft

24installs103forks

How to install design-system?

microsoft/power-platform-skills/design-system

$npx -y skills add microsoft/power-platform-skills --skill design-system

Installs into the current project.

Summary

Creates and manages the brand design system for a Power Apps mobile app. Generates brand/design-system.md (source of truth), brand/tokens.ts (importable Tamagui tokens), and brand/design-system.html (visual gallery). Triggered at Step 6.5 of /create-mobile-app, or standalone via

Files · 1

View on GitHub

SKILL.md

1	Shared instructions: [shared-instructions.md](../../shared/shared-instructions.md) — read first.
2
3	# Design System
4
5	Source of truth for every screen built in a Power Apps mobile app. Produces three artifacts:
6
7	1. `brand/design-system.md` — full spec (palette, typography, spacing, components, negatives)
8	2. `brand/tokens.ts` — importable Tamagui token export
9	3. `brand/design-system.html` — deterministic visual gallery (zero LLM cost)
10
11	Design-system and Tamagui integration are complementary, not alternatives. `/design-system` owns user-facing brand/design decisions and preview artifacts; `/create-mobile-app` Step 9b applies [`references/tamagui-integration.md`](./references/tamagui-integration.md) as internal implementation plumbing so those decisions become Tamagui tokens, aliases, and provider props. The old separate `tamagui-design-system` skill existed before this split was clear; keeping it separate made users choose implementation details and added prompt surface. Do not reintroduce it as a user-invocable skill.
12
13	## When to use
14
15	- Step 6.5 — auto-invoked from `/create-mobile-app` after scaffold + `npx power-apps init`, before screen builders
16	- Standalone — `/design-system` callable any time to create or refresh a brand system
17	- Refresh — `/design-system --refresh <dimension>` to change one aspect
18	- Reskin — `/design-system --reskin` for full visual layer swap
19	- Dark mode — `/design-system --add-dark-mode` to derive + wire dark theme
20
21	## When NOT to use
22
23	- Screen-level visual tweaks → use `/tweak-screen` (deterministic, 0 tokens)
24	- Plan-level screen changes → use `/edit-app screens`
25	- Data model changes → use `/add-dataverse` or `/setup-datamodel`
26
27	## Inputs
28
29	- `working_dir` — absolute path to project root (auto-detected or passed by orchestrator)
30	- Optional flags: `--brand-doc`, `--logo`, `--from-url`, `--design-spec`, `--from-canvas-app`, `--from-code-app`, `--from-figma`, `--stylesheet`, `--power-pages-mode`
31	- Optional: `--refresh <dimension>` — palette \| typography \| components \| density \| negatives \| motion
32	- Optional: `--reskin` — full theme swap
33	- Optional: `--add-dark-mode` — derive + wire dark theme
34	- Optional: `--add-theme <name>` — add named theme variant
35	- Optional: `--history` / `--diff <ts>` / `--rollback <ts>` — version history
36
37	## References — read before executing
38
39	- [`references/design-system-schema.md`](./references/design-system-schema.md) — schema for `brand/design-system.md`
40	- [`references/preview-template.md`](./references/preview-template.md) — HTML template for gallery render
41	- [`references/refresh-flow.md`](./references/refresh-flow.md) — single-dimension refresh logic
42	- [`references/input-modes.md`](./references/input-modes.md) — how each input flag is processed
43	- [`references/vibe/brand-examples.md`](./references/vibe/brand-examples.md) — real-world brand examples (Uber, Linear, Intercom, Sentry)
44	- [`references/vibe/style-picker.md`](./references/vibe/style-picker.md) — internal folded style picker
45
46	---
47
48	## Sub-step 0 — Mode detection + setup
49
50	Print:
51	> "→ [design-system] Detecting project context…"
52
53	Detect invocation mode:
54
55	```
56	1. Check env var CODE_APPS_NATIVE_ORCHESTRATING=1
57	→ Mode A (folded into /create-mobile-app Step 6.5)
58
59	2. Check cwd for app.config.js + tamagui.config.ts + package.json with expo deps
60	→ Mode B (standalone in existing project)
61
62	3. Else
63	→ Mode C (standalone, no project)
64	→ Ask: "No native project detected. Write brand/ to current directory? [y/N]"
65	```
66
67	For Mode A/B, set `working_dir` to cwd. For Mode C, confirm with user.
68
69	Drift detection (Mode B only — existing brand/ present):
70
71	If `brand/design-system.md` AND `brand/tokens.ts` both exist:
72	1. Parse current tokens.ts palette + typography tokens
73	2. Parse current design-system.md ## Palette and ## Typography
74	3. Compute diff
75	4. If divergent → surface drift, ask user to resolve before proceeding (see [refresh-flow.md](./references/refresh-flow.md) § Drift)
76
77	---
78
79	## Sub-step 1 — Brand inputs
80
81	Print:
82	> "→ [design-system] Checking for brand inputs…"
83
84	MUST stop and wait for user response. Do NOT skip this step.
85
86	Ask user for optional brand input. See [`references/input-modes.md`](./references/input-modes.md) for full processing details.
87
88	```
89	You're building {{app_name}} — a {{industry}} app.
90	{{screen_count}} screens, {{entity_count}} entities.
91
92	Do you have any brand input? (skip with Enter):
93
94	(1) Skip — use Field/Ops industry defaults
95	No brand assets. I'll pick a direction from 3 visual styles (or you can skip style

People who liked this also viewed

6 picks

Type

design-system

24installs103forks

View on GitHub

How to install design-system?

microsoft/power-platform-skills/design-system

$npx -y skills add microsoft/power-platform-skills --skill design-system

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	Shared instructions: [shared-instructions.md](../../shared/shared-instructions.md) — read first.
2
3	# Design System
4
5	Source of truth for every screen built in a Power Apps mobile app. Produces three artifacts:
6
7	1. `brand/design-system.md` — full spec (palette, typography, spacing, components, negatives)
8	2. `brand/tokens.ts` — importable Tamagui token export
9	3. `brand/design-system.html` — deterministic visual gallery (zero LLM cost)
10
11	Design-system and Tamagui integration are complementary, not alternatives. `/design-system` owns user-facing brand/design decisions and preview artifacts; `/create-mobile-app` Step 9b applies [`references/tamagui-integration.md`](./references/tamagui-integration.md) as internal implementation plumbing so those decisions become Tamagui tokens, aliases, and provider props. The old separate `tamagui-design-system` skill existed before this split was clear; keeping it separate made users choose implementation details and added prompt surface. Do not reintroduce it as a user-invocable skill.
12
13	## When to use
14
15	- Step 6.5 — auto-invoked from `/create-mobile-app` after scaffold + `npx power-apps init`, before screen builders
16	- Standalone — `/design-system` callable any time to create or refresh a brand system
17	- Refresh — `/design-system --refresh <dimension>` to change one aspect
18	- Reskin — `/design-system --reskin` for full visual layer swap
19	- Dark mode — `/design-system --add-dark-mode` to derive + wire dark theme
20
21	## When NOT to use
22
23	- Screen-level visual tweaks → use `/tweak-screen` (deterministic, 0 tokens)
24	- Plan-level screen changes → use `/edit-app screens`
25	- Data model changes → use `/add-dataverse` or `/setup-datamodel`
26
27	## Inputs
28
29	- `working_dir` — absolute path to project root (auto-detected or passed by orchestrator)
30	- Optional flags: `--brand-doc`, `--logo`, `--from-url`, `--design-spec`, `--from-canvas-app`, `--from-code-app`, `--from-figma`, `--stylesheet`, `--power-pages-mode`
31	- Optional: `--refresh <dimension>` — palette \| typography \| components \| density \| negatives \| motion
32	- Optional: `--reskin` — full theme swap
33	- Optional: `--add-dark-mode` — derive + wire dark theme
34	- Optional: `--add-theme <name>` — add named theme variant
35	- Optional: `--history` / `--diff <ts>` / `--rollback <ts>` — version history
36
37	## References — read before executing
38
39	- [`references/design-system-schema.md`](./references/design-system-schema.md) — schema for `brand/design-system.md`
40	- [`references/preview-template.md`](./references/preview-template.md) — HTML template for gallery render
41	- [`references/refresh-flow.md`](./references/refresh-flow.md) — single-dimension refresh logic
42	- [`references/input-modes.md`](./references/input-modes.md) — how each input flag is processed
43	- [`references/vibe/brand-examples.md`](./references/vibe/brand-examples.md) — real-world brand examples (Uber, Linear, Intercom, Sentry)
44	- [`references/vibe/style-picker.md`](./references/vibe/style-picker.md) — internal folded style picker
45
46	---
47
48	## Sub-step 0 — Mode detection + setup
49
50	Print:
51	> "→ [design-system] Detecting project context…"
52
53	Detect invocation mode:
54
55	```
56	1. Check env var CODE_APPS_NATIVE_ORCHESTRATING=1
57	→ Mode A (folded into /create-mobile-app Step 6.5)
58
59	2. Check cwd for app.config.js + tamagui.config.ts + package.json with expo deps
60	→ Mode B (standalone in existing project)
61
62	3. Else
63	→ Mode C (standalone, no project)
64	→ Ask: "No native project detected. Write brand/ to current directory? [y/N]"
65	```
66
67	For Mode A/B, set `working_dir` to cwd. For Mode C, confirm with user.
68
69	Drift detection (Mode B only — existing brand/ present):
70
71	If `brand/design-system.md` AND `brand/tokens.ts` both exist:
72	1. Parse current tokens.ts palette + typography tokens
73	2. Parse current design-system.md ## Palette and ## Typography
74	3. Compute diff
75	4. If divergent → surface drift, ask user to resolve before proceeding (see [refresh-flow.md](./references/refresh-flow.md) § Drift)
76
77	---
78
79	## Sub-step 1 — Brand inputs
80
81	Print:
82	> "→ [design-system] Checking for brand inputs…"
83
84	MUST stop and wait for user response. Do NOT skip this step.
85
86	Ask user for optional brand input. See [`references/input-modes.md`](./references/input-modes.md) for full processing details.
87
88	```
89	You're building {{app_name}} — a {{industry}} app.
90	{{screen_count}} screens, {{entity_count}} entities.
91
92	Do you have any brand input? (skip with Enter):
93
94	(1) Skip — use Field/Ops industry defaults
95	No brand assets. I'll pick a direction from 3 visual styles (or you can skip style

People who liked this also viewed

6 picks

Type