skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

team-okrs

Create a single-screen OKR tracker HTML dashboard with progress bars and status pills.

1|Updated Jul 9, 2026
Search Tags:#dashboard#okr#key results#ui prototype#team planning#progress bars
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill team-okrs-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: team-okrs
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/runtime/skills/design/team-okrs
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill team-okrs-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It helps you quickly create a clear, at-a-glance OKR tracker that communicates objectives, key results, ownership, and status without resorting to messy spreadsheets.

Core Features & Use Cases

  • Single-screen OKR tracker layout: A quarter banner plus three objective cards with KR rows and progress bars.
  • Status visibility: Status pills for each objective (On track / At risk / Off track) and an at-a-glance sidebar with KPIs and blockers.
  • Design-system-driven prototype: Produces a self-contained HTML artifact aligned to the required design system sections (color, typography, layout, components).

Quick Start

Ask the AI to generate an OKR tracker page for Q4 with three objectives, three key results each, progress bars, owner avatars, and status pills.

Frequently Asked Questions about team-okrs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a single-screen OKR tracker UI for my team?▼

An OKR tracker dashboard visualizes quarter context, objectives, and key-result progress clearly using status pills and progress bars, replacing messy spreadsheets with an instantly readable UI prototype for product and team planning scenarios.

Can I generate a team planning dashboard with progress bars and status pills?▼

Yes, you can generate a self-contained HTML artifact that functions as an OKR tracker. This dashboard layout includes a quarter banner, objective cards with progress bars, and a sidebar displaying KPIs, top movers, and blockers.

What is the best way to visualize key results and objectives without spreadsheets?▼

You can create an OKR tracker by asking the AI to generate a page for a specific quarter with three objectives. The resulting HTML artifact will automatically structure your brief into objective cards, KR rows with progress bars, and a sidebar for KPIs and blockers.

Does the generated OKR dashboard include a section for blockers and KPIs?▼

Yes, the generated OKR dashboard includes a right sidebar specifically designed to display KPIs, top movers, and blockers alongside the main objective cards, ensuring comprehensive status visibility for your team.

How do I create a Q4 OKR tracker page with three objectives?▼

To create a Q4 OKR tracker page, simply ask the AI to generate a tracker with three objectives and three key results each. It will produce an HTML artifact with a quarter banner, progress bars, owner avatars, and status pills.

What design system sections are included in the OKR tracker prototype?▼

The OKR tracker prototype includes required design-system sections for color, typography, layout, and components, ensuring the generated HTML artifact follows a clean and structured visual system for team planning.

Related Skills

Explore More Design & Creative Skills→
MyHeavenDyfMyHeavenDyf

team-okrs

Generate an OKR tracker page with quarter banner, objectives, key results, and status indicators.

Community
Advanced
kmshihab7878kmshihab7878
6

product-strategist

Generate company-to-team OKRs and strategic product roadmaps with alignment scores and JSON export.

Community
Advanced
brijrbrijr
18

brijr-ui

Apply restrained Swiss/Japanese/Scandinavian/German design constraints to React, Next.js, and TypeScript projects using shadcn/ui.

Community
Intermediate
i0switchi0switch

xlsx

Open, read, edit, format, and convert spreadsheet files.

Community
Advanced