Skip to content
Get packs

Team OKRs Tracker

Builds a single-screen OKR tracker page with objectives, key-result progress bars and status pills

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent can turn a request for an OKR (objectives and key results) dashboard into a single HTML page. The page shows a quarter banner, three objective cards each with an owner, a status pill (On track, At risk, Off track) and three key results drawn as progress bars, plus a sidebar of at-a-glance KPIs and blockers. The skill tells the agent to follow a design system file (DESIGN.md) and to keep the palette calm with one accent colour.

Great for

  • Product or team leads who want a quick visual OKR status page to share in a meeting
  • Designers prototyping an internal goal-tracking screen
  • Anyone who wants a starting layout for OKRs before connecting real data

Skip it if

  • Live tracking: the page is static mock-up HTML with no connection to a real OKR tool, so numbers will not update on their own
  • Sensitive or confidential company goals pasted into a prompt, since the content is sent to the AI service that runs the agent

Try asking

  • “Build an OKR tracker for Q4 with three objectives, three key results each, progress bars and owners”
  • “Make a team OKR status page for FY25 with on track and at risk pills”
  • “Create a one-screen objectives dashboard with a sidebar of blockers and top movers”
Step-by-step guide: how to use Team OKRs TrackerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    team-okrs.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip team-okrs.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip team-okrs.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent real objective names, owners and metrics in your prompt so the progress bars and targets are meaningful
  • Provide a DESIGN.md first so colours and typography match your brand
  • Open the generated HTML in a browser to review the layout, then replace sample numbers with your own data before sharing

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.