# Design System

Creates the Tamagui brand system for an Expo/React Native Power Apps mobile app...

- Repository: https://github.com/microsoft/power-platform-skills (1098 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add microsoft/power-platform-skills --skill design-system -g -a claude-code -y`
Codex: `npx skills add microsoft/power-platform-skills --skill design-system -g -a codex -y`
Cursor: `npx skills add microsoft/power-platform-skills --skill design-system -g -a cursor -y`
Gemini CLI: `npx skills add microsoft/power-platform-skills --skill design-system -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add microsoft/power-platform-skills`

## Description

Creates the Tamagui brand system for an Expo/React Native Power Apps mobile app, including design-system.md, tokens.ts, and an HTML gallery.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

> **Plugin check**: Run `node "${PLUGIN_ROOT}/scripts/check-version.js"` - if it outputs a message, show it to the user before proceeding.

**Shared instructions: [shared-instructions.md](../../shared/shared-instructions.md)**, read first.

# Design System

**Entry routing:** use the shared [App feature entry points](../../shared/shared-instructions.md#app-feature-entry-points)
preflight before the workflow below.

Before reading brand state, bind `working_dir` through
[app-working-directory.md](../../shared/references/app-working-directory.md).
Use that root for every shell call and absolute file-tool path, including
history, rollback, previews, and runtime wiring in the referenced workflows.

Read-only `--history` / `--diff` and standalone brand generation without an app
remain here.

Source of truth for every screen built in a Power Apps mobile app. Produces three artifacts:

1. `brand/design-system.md`, full spec (palette, typography, spacing, components, negatives)
2. `brand/tokens.ts`, importable Tamagui token export
3. `brand/design-system.html`, deterministic visual gallery (zero LLM cost)

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.

## When to use

The rest: https://github.com/microsoft/power-platform-skills/blob/HEAD/plugins/mobile-apps/skills/design-system/SKILL.md