Web & Frontendlow risk

team-okrs

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 "目标".

nexu-io/open-design·design-templates/team-okrs/SKILL.md

60/ 100Recommendation

↓

Install this skill

Choose your coding agent and copy a project or personal installation command.

Pinned to the indexed commit

Project installation.agents/skills/team-okrs

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/team-okrs -a codex -y

Personal installation~/.agents/skills/team-okrs

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/team-okrs -a codex -g -y

Manual folder.agents/skills/team-okrsOfficial docs ↗

Project installation.claude/skills/team-okrs

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/team-okrs -a claude-code -y

Personal installation~/.claude/skills/team-okrs

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/team-okrs -a claude-code -g -y

Manual folder.claude/skills/team-okrsOfficial docs ↗

Project installation.agents/skills/team-okrs

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/team-okrs -a github-copilot -y

Personal installation~/.copilot/skills/team-okrs

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/team-okrs -a github-copilot -g -y

Manual folder.agents/skills/team-okrsOfficial docs ↗

Project installation.agents/skills/team-okrs

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/team-okrs -a cursor -y

Personal installation~/.cursor/skills/team-okrs

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/team-okrs -a cursor -g -y

Manual folder.agents/skills/team-okrsOfficial docs ↗

Project installation.agents/skills/team-okrs

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/team-okrs -a gemini-cli -y

Personal installation~/.gemini/skills/team-okrs

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/team-okrs -a gemini-cli -g -y

Native Gemini CLIgemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path design-templates/team-okrs

Manual folder.agents/skills/team-okrsOfficial docs ↗

⚠ Installation uses the open-source skills CLI. Inspect the source and permissions before running the command.

Skill instructions

View source on GitHub ↗

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