Skip to content

Team OKRs Tracker

Turns raw OKR content into a one-page quarterly objectives dashboard in HTML

Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill teaches an AI agent to lay out a team's quarterly OKRs (Objectives and Key Results) as a single HTML page. The page shows a quarter banner, three objective columns, and progress bars for each key result with its value, owner avatar and status label, plus an at-a-glance summary panel. It is a layout template with an example file, so the agent follows its structure when you give it your objectives and numbers.

Great for

  • Team leads who want a quick visual status page for quarterly goals
  • Product or operations managers preparing a sharable OKR snapshot
  • Anyone who wants an HTML OKR dashboard without designing it from scratch

Skip it if

  • Live tracking that updates automatically, because the skill only produces static HTML and has no data connection (it cannot pull from a tool like Jira or Sheets)
  • Official reporting where accuracy matters, since the agent may format numbers you supply but the skill does not verify them

Try asking

  • “Make a Team OKR dashboard for Q3 with three objectives and their key results, owners and progress percentages”
  • “Create a desktop-sized quarterly OKR page for the product team showing status pills for each key result”
  • “Turn this list of objectives and key results into the Team OKRs HTML template”
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 the quarter, theme, objectives, key results with current and target values, owners and status so it fills the layout fully
  • Specify a desktop width of about 1440px if you want the layout the skill suggests
  • Review the generated HTML before sharing, since the example file is the only reference for styling

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything 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.