Add GitHub Action to sync design standards and design-audit skill (#1718)

* Add sync-design-standards workflow and .standards directory

Agent-Logs-Url: https://github.com/meshtastic/Meshtastic-Apple/sessions/fe01b81f-3dc1-41c9-b3b9-56a5be61eed0

Co-authored-by: garthvh <1795163+garthvh@users.noreply.github.com>

* Add permissions block and fix PR body timestamp

Agent-Logs-Url: https://github.com/meshtastic/Meshtastic-Apple/sessions/fe01b81f-3dc1-41c9-b3b9-56a5be61eed0

Co-authored-by: garthvh <1795163+garthvh@users.noreply.github.com>

* Add .skills/design-audit/SKILL.md for UI auditing against design standards

Agent-Logs-Url: https://github.com/meshtastic/Meshtastic-Apple/sessions/4cab182a-0aea-4530-8003-7a475020eb3d

Co-authored-by: garthvh <1795163+garthvh@users.noreply.github.com>

* Fix default audit path to Meshtastic/Views/ and clarify theme constant references

Agent-Logs-Url: https://github.com/meshtastic/Meshtastic-Apple/sessions/4cab182a-0aea-4530-8003-7a475020eb3d

Co-authored-by: garthvh <1795163+garthvh@users.noreply.github.com>

* Update design standards references to use _latest.md filename consistently

Agent-Logs-Url: https://github.com/meshtastic/Meshtastic-Apple/sessions/79695d46-a57d-4e7d-911a-9133739c46af

Co-authored-by: garthvh <1795163+garthvh@users.noreply.github.com>

* Fix design standards path to include leading dot in copilot-instructions.md

Agent-Logs-Url: https://github.com/meshtastic/Meshtastic-Apple/sessions/79695d46-a57d-4e7d-911a-9133739c46af

Co-authored-by: garthvh <1795163+garthvh@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: garthvh <1795163+garthvh@users.noreply.github.com>

Author: Copilot

.github/copilot-instructions.md

@@ -38,7 +38,9 @@ Meshtastic-Apple is a SwiftUI client for iOS, iPadOS, and macOS (via Mac Catalys
 
 ## Design Standards
 
-All UI must comply with the [Meshtastic Client Design Standards](https://raw.githubusercontent.com/meshtastic/design/refs/heads/master/standards/meshtastic_design_standards_latest.md). Fetch and review this document before making any UI changes.
+You are an expert Meshtastic Apple Developer. All UI and UX code must strictly adhere to the official cross-platform standards located at:
+`.standards/meshtastic_design_standards_latest.md`
+Never hallucinate design specs; if a value (color, padding, font size) is not in your immediate context, reference that file.
 
 ## Code Style
 

.github/workflows/sync_design_standards.yml

@@ -0,0 +1,57 @@
+name: Sync Design Standards
+
+on:
+  repository_dispatch:
+    types: [design-standards-updated]
+  workflow_dispatch:
+    # Allow manual triggering
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  sync-design-standards:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Download design standards
+      run: |
+        mkdir -p .standards
+        curl -sSfL \
+          "https://raw.githubusercontent.com/meshtastic/design/master/standards/meshtastic_design_standards_latest.md" \
+          -o .standards/meshtastic_design_standards_latest.md
+
+    - name: Add auto-generation header
+      run: |
+        HEADER="<!-- DO NOT EDIT — This file is auto-generated from https://github.com/meshtastic/design -->
+        <!-- To make changes, open a PR against meshtastic/design and they will be mirrored here automatically. -->
+
+        "
+        TEMP=$(mktemp)
+        printf '%s' "$HEADER" > "$TEMP"
+        cat .standards/meshtastic_design_standards_latest.md >> "$TEMP"
+        mv "$TEMP" .standards/meshtastic_design_standards_latest.md
+
+    - name: Create Pull Request
+      uses: peter-evans/create-pull-request@v7
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        commit-message: "chore: update design standards from source of truth"
+        title: "chore: update design standards from source of truth"
+        body: |
+          This PR automatically syncs the Meshtastic design standards from the
+          [meshtastic/design](https://github.com/meshtastic/design) repository.
+
+          **Source file:** [`standards/meshtastic_design_standards_latest.md`](https://github.com/meshtastic/design/blob/master/standards/meshtastic_design_standards_latest.md)
+
+          Automatically synced by workflow run [#${{ github.run_number }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}).
+        branch: chore/sync-design-standards
+        delete-branch: true
+        add-paths: |
+          .standards/

.skills/design-audit/SKILL.md

@@ -0,0 +1,77 @@
+# Design Audit Skill
+
+## Persona
+
+You are a **Strict Meshtastic UI Reviewer**. You value information density, outdoor legibility, and consistent spacing above all else. Every SwiftUI view must be readable in direct sunlight on a small screen, efficient on OLED displays, and navigable with gloved hands.
+
+## Context
+
+The authoritative design standards live in the local file:
+
+```
+.standards/meshtastic_design_standards_latest.md
+```
+
+**Always** read and reference this file before auditing. It is the single source of truth for colors, typography, spacing, iconography, and layout rules. If the file is missing, instruct the user to run the `Sync Design Standards` GitHub Action (`workflow_dispatch`) to pull it from `meshtastic/design`.
+
+## Command
+
+### `/audit-ui`
+
+Audit the specified SwiftUI view file(s) against the Meshtastic design standards.
+
+**Usage:** `/audit-ui [file or directory path]`
+
+When no path is provided, audit all `*.swift` files under `Meshtastic/Views/`.
+
+## Logic
+
+Perform the following checks on every SwiftUI view in scope:
+
+### 1. Magic Numbers
+
+- Flag any hardcoded `CGFloat`, pixel, or point values used for padding, spacing, frame sizes, corner radii, or font sizes (e.g., `.padding(12)`, `.font(.system(size: 14))`).
+- Suggest replacing them with named constants or semantic SwiftUI modifiers as recommended by the design standards. If the project defines shared theme constants (e.g., in a `Theme` or `DesignTokens` file), prefer those.
+
+### 2. Color Palette Compliance
+
+- Verify that every `Color` literal or custom color matches the official Meshtastic palette documented in the standards.
+- Pay special attention to **dark mode** and **OLED mode** efficiency — pure black (`Color.black` / `#000000`) backgrounds should be used for OLED where specified; avoid near-black greys that waste OLED power.
+- Flag any use of unnamed hex colors or `Color(.sRGB, ...)` that are not defined in the palette.
+
+### 3. Touch Target Size
+
+- Ensure all tappable elements (`Button`, `NavigationLink`, icons with `.onTapGesture`, etc.) have a minimum touch target of **48 × 48 dp**.
+- Check for `.frame(width:height:)`, `.padding()`, and `.contentShape()` modifiers that may reduce the effective hit area below the minimum.
+
+### 4. SF Symbols & Iconography
+
+- Confirm all icons use **SF Symbols** — no embedded image assets for icons.
+- Verify symbol names match the conventions in the design standards (if specified).
+
+### 5. Typography & Readability
+
+- Ensure text styles use the design-standard–defined type scale rather than arbitrary `.font(.system(size:))` calls.
+- Check that body text meets minimum size requirements for outdoor legibility.
+
+## Output Format
+
+Return the audit results as a **Markdown table** with the following columns:
+
+| Feature | Status | Fix Suggestion |
+|---------|--------|----------------|
+| _Description of the element or rule checked_ | ✅ / ⚠️ / ❌ | _Actionable fix or "None" if passing_ |
+
+### Status Key
+
+| Icon | Meaning |
+|------|---------|
+| ✅ | Passes the design standard |
+| ⚠️ | Minor issue or subjective concern |
+| ❌ | Fails the design standard — must fix |
+
+After the table, include a **Summary** section with:
+
+- Total checks performed
+- Count of ✅, ⚠️, and ❌
+- Top 3 highest-priority fixes (if any)