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/ 100おすすめ度

↓

この Skill を導入

coding agent を選び、プロジェクト用または個人用コマンドをコピーします。

収録 commit に固定

プロジェクトに導入.agents/skills/team-okrs

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

個人環境に導入~/.agents/skills/team-okrs

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

手動配置先.agents/skills/team-okrsOfficial docs ↗

プロジェクトに導入.claude/skills/team-okrs

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

個人環境に導入~/.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

手動配置先.claude/skills/team-okrsOfficial docs ↗

プロジェクトに導入.agents/skills/team-okrs

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

個人環境に導入~/.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

手動配置先.agents/skills/team-okrsOfficial docs ↗

プロジェクトに導入.agents/skills/team-okrs

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

個人環境に導入~/.cursor/skills/team-okrs

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

手動配置先.agents/skills/team-okrsOfficial docs ↗

プロジェクトに導入.agents/skills/team-okrs

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

個人環境に導入~/.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

手動配置先.agents/skills/team-okrsOfficial docs ↗

⚠ インストールには open-source skills CLI を使用します。実行前にソースと権限を確認してください。

Skill の指示

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