48 lines
1.3 KiB
Markdown
48 lines
1.3 KiB
Markdown
|
---
|
||
|
|
name: team-okrs
|
||
|
|
description: |
|
||
|
|
OKR tracker page — quarter banner, three objectives with their key
|
||
|
|
results as progress bars, owner avatars, status pills, and a "this
|
||
|
|
quarter at a glance" sidebar. Use when the brief mentions "OKRs",
|
||
|
|
"key results", "objectives", or "目标".
|
||
|
|
triggers:
|
||
|
|
- "okr"
|
||
|
|
- "okrs"
|
||
|
|
- "key results"
|
||
|
|
- "objectives"
|
||
|
|
- "目标"
|
||
|
|
od:
|
||
|
|
mode: prototype
|
||
|
|
platform: desktop
|
||
|
|
scenario: product
|
||
|
|
preview:
|
||
|
|
type: html
|
||
|
|
entry: index.html
|
||
|
|
design_system:
|
||
|
|
requires: true
|
||
|
|
sections: [color, typography, layout, components]
|
||
|
|
example_prompt: "Build an OKR tracker for Q4 — three objectives, three key results each, progress bars, owners, status pills."
|
||
|
|
---
|
||
|
|
|
||
|
|
# Team OKRs Skill
|
||
|
|
|
||
|
|
Produce a single-screen OKR tracker.
|
||
|
|
|
||
|
|
## Workflow
|
||
|
|
|
||
|
|
1. Read DESIGN.md.
|
||
|
|
2. Layout:
|
||
|
|
- Quarter banner: Q4 FY25, dates, overall progress chip.
|
||
|
|
- Three objective cards. Each has:
|
||
|
|
- Objective title + owner avatar + status pill (On track / At risk / Off track)
|
||
|
|
- 3 key results, each a row with metric / current → target / progress bar
|
||
|
|
- Right sidebar: at-a-glance KPIs, top movers, blockers callout.
|
||
|
|
3. Clear progress visualisation, calm palette, one accent.
|
||
|
|
|
||
|
|
## Output contract
|
||
|
|
|
||
|
|
```
|
||
|
|
<artifact identifier="okr-q4" type="text/html" title="OKRs Q4">
|
||
|
|
<!doctype html>...</artifact>
|
||
|
|
```
|