design-system

design-system is a skill for Claude Code from microsoft/power-platform-skills. It costs 34 tokens per session (7,246 once invoked), scanned A, original, MIT.

A workflow for creating a brand and design system for an Expo and React Native Power Apps mobile app. It produces written design guidance, reusable style tokens, and an HTML gallery for previewing them.

In plain words
What is it for?
Defining or refreshing the app's visual system, exporting Tamagui tokens, and generating a static design gallery.
Why use it?
It gives screens a shared visual reference for colors, fonts, spacing, and components instead of leaving each screen to make separate design decisions.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter. Also seen: model in frontmatter; names the AskUserQuestion tool.

Part of the mobile-app plugin — 23 skills, 5 agents shipped together

About the project

microsoft/power-platform-skills is a plugin marketplace containing reusable skills, agents, and commands for developing with Microsoft Power Platform. Developers use it to build and deploy Power Pages sites, model-driven Power Apps, and related solutions through Claude Code or GitHub Copilot. The catalogue entries are the marketplace's included skills, agents, plugins, and other agent components.

microsoft/power-platform-skills · 829 stars · on GitHub · aka.ms

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/microsoft/power-platform-skills/design-system
Any agent
npx skills add microsoft/power-platform-skills --skill design-system
Clone the repo
git clone --depth 1 https://github.com/microsoft/power-platform-skills

Made for: Claude Code.

Or install mobile-app, the plugin that ships this one along with the rest of its 23 skills, 5 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for design-system

README.md
[![agentmods](https://agentmods.dev/badge/skills/microsoft/power-platform-skills/design-system.svg)](https://agentmods.dev/skills/microsoft/power-platform-skills/design-system)
Your own site
<a href="https://agentmods.dev/skills/microsoft/power-platform-skills/design-system"><img src="https://agentmods.dev/badge/skills/microsoft/power-platform-skills/design-system.svg" alt="Measured on agentmods" height="20"></a>
Per session 34 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 7,246 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00034 $0.07246
Opus 5 $0.00017 $0.03623
Sonnet 5 $0.00007 $0.01449
Haiku 4.5 $0.00003 $0.00725

Measured 2d ago against content hash 81c7430a5dee, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

design-system scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/mobile-apps/skills/design-system/SKILL.md · 641 lines

How it starts

The opening of the file, as written. The whole thing — 641 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Shared instructions: shared-instructions.md — read first.

Design System

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 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

  • Step 6.5 — auto-invoked from /create-mobile-app after scaffold + npx power-apps init, before screen builders
  • Standalone/design-system callable any time to create or refresh a brand system
  • Refresh/design-system --refresh <dimension> to change one aspect
  • Reskin/design-system --reskin for full visual layer swap
  • Dark mode/design-system --add-dark-mode to derive + wire dark theme

When NOT to use

  • Screen-level visual tweaks → use /tweak-screen (deterministic, 0 tokens)
  • Plan-level screen changes → use /edit-app screens
  • Data model changes → use /add-dataverse or /setup-datamodel

Inputs

  • working_dir — absolute path to project root (auto-detected or passed by orchestrator)
  • Optional flags: --brand-doc, --logo, --from-url, --design-spec, --from-canvas-app, --from-code-app, --from-figma, --stylesheet, --power-pages-mode
  • Optional: --refresh <dimension> — palette | typography | components | density | negatives | motion
  • Optional: --reskin — full theme swap
  • Optional: --add-dark-mode — derive + wire dark theme
  • Optional: --add-theme <name> — add named theme variant
  • Optional: --history / --diff <ts> / --rollback <ts> — version history

Read the full file on GitHub · 641 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago Changed 81c7430a5dee
  2. 6d ago First seen · 641 lines · 34 tokens per session scan A 5c580bb8eee6

Subscribe to this mod's changes

design-system is a skill published in the GitHub repository microsoft/power-platform-skills (829 stars, last pushed today), licensed MIT. It adds 34 tokens to every session and 7,246 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

canvas-apps-ui-gen

Generates paste-ready Power Apps Canvas App YAML. Invoke when the user wants to replicate a UI mockup, improve an existing Canvas app screen, or build a new screen from a text description. Also invoke when the user asks to "improve", "redesign", or "generate YAML" for a Canvas app screen.

ToluVictor/canvas-apps-tools · 71 tokens

swiftui-design-consultation

Apple-canon design system for SwiftUI projects: produces DESIGN.md + a Swift Package starter (semantic colors, SF Pro, Liquid Glass, motion, accessibility). Use when starting or refreshing a SwiftUI design system.

Paretofilm/superpowers-gstack · 51 tokens

ios-native-review

After a PRD/spec/plan for an iOS app, before implementation: validate the artifact against Apple HIG (iOS) via WebFetch citations. Asks "is this iOS-native?" — complements pitfall-verification and quality-review.

Paretofilm/superpowers-gstack · 57 tokens

ios-hig-design

Design native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone app", "iPad layout", "SwiftUI", "UIKit", "Dynamic Island", "safe areas", "HIG compliance", "SF Symbols", "haptic feedback", "iOS accessibility", "make my app feel native", or "follow Apple design guidelines".…

wondelai/skills · 145 tokens

vertical-fintech-mobile

Domain-knowledge pack for money on a phone — wallets, payments, custody and signing, transaction lifecycle, KYC/AML gates, and offline reconciliation. The rules that separate a payments app from a CRUD app with a currency symbol: a balance is a claim about a server, an idempotency key must outlive the process that…

avelikiy/great_cto · 119 tokens

aesthetic-instrument

A committed aesthetic in the sense of skills/committed-aesthetic/SKILL.md: every rule below is checkable, and every value was read out of the source — packages/board/public/index.html and greatcto-site/styles.css — rather than chosen to write this document.

avelikiy/great_cto · 106 tokens