Guide · Agent skill
How to use the Team OKRs Tracker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Team OKRs Tracker is an agent skill from the open-design project that lets an AI agent turn a request for an OKR (objectives and key results) dashboard into one HTML page. This guide is for readers who have never used agent skills: it explains what the skill does, how to install it, how to ask for a page in plain language, and what to check before sharing the output. By the end you will be able to generate a visual OKR status page to review in a meeting or use as a layout starting point.
Team OKRs Trackernexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the team-okrs skill ZIP from this page.
- 2Unzip the skill. Extract the folder so that it contains SKILL.md and example.html.
- 3Place the skill folder. Move it to ~/.claude/skills/ for personal use or to .claude/skills/ in a project.
- 4Add a DESIGN.md file. Put a DESIGN.md design system file in the project so the agent can read it.
- 5Make a request. Ask the agent for an OKR tracker, naming the quarter, objectives and key results.
- 6Review the HTML. Open the generated page in a browser and check the figures and statuses.
What does the Team OKRs skill make the agent do?
When the skill is installed, the agent builds a single-screen OKR tracker as HTML. The page has a quarter banner with dates and an overall progress chip, and three objective cards. Each card shows the objective title, an owner avatar, and a status pill reading On track, At risk or Off track.
Each objective has three key results, shown as rows with the metric, current value to target, and a progress bar. A right sidebar holds at-a-glance KPIs, top movers and a blockers callout. The skill asks the agent to read a DESIGN.md design system file and keep the palette calm with one accent colour.
- Quarter banner with dates and overall progress
- Three objective cards with owner, status pill and three key results each
- Progress bars for each key result
- Sidebar with KPIs, top movers and blockers
What do you need before installing?
The skill needs an AI agent that supports SKILL.md skills. It also expects a DESIGN.md design system file in your project, because the skill tells the agent to read it before building the page.
The skill does not run scripts and does not use the network, according to its listing.
- An AI agent that supports SKILL.md skills
- A DESIGN.md file in the project
How do you install the Team OKRs skill?
Download the ZIP for the team-okrs skill from this page and unzip it. Then choose one of two locations. For a personal install available across projects, place the unzipped skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
~/.claude/skills/How do you trigger the skill with a natural request?
You do not need a special command. The skill responds to requests that mention OKRs, key results, objectives, or the Chinese word 目标. Describe the quarter, the objectives and the results you want to show.
The skill's own example prompt is: Build an OKR tracker for Q4 — three objectives, three key results each, progress bars, owners, status pills.
- Mention OKRs, key results, objectives or 目标 in your request
- Name the quarter and the number of objectives and key results
- Ask for owners and status pills if you want them shown
What does the output look like and where is it saved?
The skill's output contract asks the agent to return one HTML artifact wrapped in an artifact tag, with the identifier okr-q4 and the title OKRs Q4. The source names example.html and SKILL.md as the included files.
The page is static mock-up HTML. Open it in a browser to review the layout.
- Output: one HTML page
- Included files: example.html and SKILL.md
What are the safety notes?
The skill runs no scripts and uses no network access. However, the content you type into a prompt is sent to the AI service that runs the agent. Do not paste sensitive or confidential company goals into the prompt. Use placeholder or invented figures if the goals are private.
Because the page is not connected to any OKR tool, the numbers will not update on their own.
- No scripts are run by the skill
- No network use by the skill
- Prompt content goes to the AI service that runs the agent, so avoid confidential goals
What tips help you get a better page?
Keep the number of objectives and key results to what the skill lays out, which is three objectives with three key results each in the example. Put your DESIGN.md in the project before you ask, so the agent can follow your colours and typography.
Treat the output as a starting layout. Replace sample figures with real ones before sharing.
- Add DESIGN.md before generating
- Use the three-by-three structure from the example prompt
- Treat the page as a layout to adapt, not a live dashboard
What people use it for
- A product lead previews a quarter's OKR status to share in a team meeting.
- A designer prototypes an internal goal-tracking screen layout.
- A manager creates a starting layout with placeholder numbers before connecting real data.
Frequently asked questions
Is the Team OKRs skill free to use?
The source lists the licence as Apache-2.0 for the open-design project. It does not state any price, so check the project's licence terms before you rely on it.
What do I need to run the Team OKRs skill?
You need an AI agent that supports SKILL.md skills and a DESIGN.md design system file in your project. The skill does not run scripts and does not use the network.
Where do I install the team-okrs skill?
Unzip the downloaded skill into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings → Capabilities → Skills.
Will the OKR numbers update automatically?
No. The page is static mock-up HTML with no connection to a real OKR tool, so you must edit the figures yourself.
Can I use it with confidential company goals?
Be cautious. Content you paste into a prompt is sent to the AI service that runs the agent, so use placeholder figures for sensitive goals.
How is this different from a dedicated OKR tool?
The skill produces a single visual status page for a meeting or prototype. It does not track live data, so a dedicated OKR tool is a better fit for ongoing tracking.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use the Team OKRs skill if you want a quick, visual OKR status page to share or a starting layout for a goal-tracking screen. Pick a dedicated OKR tool instead if you need live data, automatic updates, or a secure place for confidential goals.
Download the skill