メニュー
Check every TrainingGeeks UI feature against the TrainingPeaks reference screenshots in references/ for visual and behavioral parity. Use when building or changing any screen, component, layout, color, or label.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
TrainingGeeks commit and PR workflow — modular per-step commits authored solely by arin-jaff with no Claude/AI attribution. Use whenever committing, pushing, or opening a PR in this repo.
Live 1-to-1 replication of the TrainingPeaks UI using the Playwright MCP. Use when mirroring TrainingPeaks pages/flows into TrainingGeeks against the real app (not static screenshots).
Rules for sourcing, generating, and tracking images/logos/textures in TrainingGeeks — licensed sources only, everything recorded in assets/asset_manifest.json. Use when adding any logo, icon, image, or texture.
SOC 職業分類に基づく
| name | ui-parity |
| description | Check every TrainingGeeks UI feature against the TrainingPeaks reference screenshots in references/ for visual and behavioral parity. Use when building or changing any screen, component, layout, color, or label. |
references/ is the source of truth for how TrainingGeeks looks and behaves. The goal is a
1-to-1 TrainingPeaks feel: clean, sharp, data-dense, no emojis, plain clear text.
Open the relevant reference(s) before building. Identify which screenshot covers the feature and read the actual layout, wording, colors, ordering, and interactions.
All UI screenshots live in references/tp-ui/:
| Screen | Reference file(s) |
|---|---|
| Home | tp-ui/BAFFAF1E-...png |
| Calendar | tp-ui/5F550EB3-...png |
| Dashboard / Charts Library | tp-ui/D230C5B7-...png, tp-ui/133F68FB-...png, tp-ui/1A5FFA9D-...png |
| Workout / Analyze | tp-ui/image copy 2.png |
| Peak Performances modal | tp-ui/image.png, tp-ui/image copy.png |
| Account Settings / Zones | tp-ui/78ACC3F9-...png, tp-ui/AB86A637-...png, tp-ui/89E7ED36-...png |
Match the details: three-column Home layout; Fatigue/Fitness/Form boxes (red / dark /
orange); weekly calendar grid + Summary column with sport-colored cards; planned-vs-actual;
navy top nav with Home/Calendar/Dashboard/ATP; blue (#2563EB-family) accents on a light
surface.
While building, compare back to the screenshot — spacing, labels, dropdown options (e.g. Peak Performances distances: 400m, 800m, 1km, 1mi, 5km…), button text ("Save & Close", "Add a Workout", "Add Zone"), and ordering. If it diverges, fix it or note why.
No reference for it? Keep it visually consistent with the existing TP-styled components. Never introduce emojis or playful/AI-looking styling.
When practical, run the app and visually diff against the screenshot before considering the feature done.
