Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .github/copilot-instructions.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
57 changes: 57 additions & 0 deletions .github/workflows/sync_design_standards.yml
Original file line number Diff line number Diff line change
@@ -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/
77 changes: 77 additions & 0 deletions .skills/design-audit/SKILL.md
Original file line number Diff line number Diff line change
@@ -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)
Empty file added .standards/.gitkeep
Empty file.