skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

team-okrs

Generates a single-screen HTML OKR tracker with objectives, key results, and progress bars.

Updated May 20, 2026
Search Tags:#html#prototype#okr#objectives#key results#quarterly planning#progress bars
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill team-okrs-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: team-okrs
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/team-okrs
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill team-okrs-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams need a clear, visual way to present quarterly OKRs, but building a polished tracker page from scratch takes design and layout effort. This Skill produces a complete single-screen OKR tracker as a self-contained HTML artifact. ## Core Features & Use Cases - Quarter Banner: Displays the quarter label, date range, and an overall progress chip at the top of the page. - Objective Cards: Renders three objectives, each with an owner avatar, a status pill (On track / At risk / Off track), and three key results with metric, current-to-target values, and progress bars. - At-a-Glance Sidebar: Shows quarter KPIs, top movers of the week, and a blockers callout for risks needing decisions. - Use Case: A product lead asks for a Q4 OKR page before a review meeting and receives a ready-to-open HTML page with calm styling, one accent color, and responsive layout. ## Quick Start Ask the assistant to build an OKR tracker for Q4 with three objectives, three key results each, progress bars, owners, 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 create an OKR tracker page with progress bars?▼

Describe your quarter, objectives, and key results, and the Skill generates a single-screen HTML page. Each key result renders as a row with a metric, current-to-target values, and a colored progress bar.

What does the OKR tracker output look like?▼

The output is a self-contained HTML artifact with a quarter banner showing overall progress, three objective cards with owner avatars and status pills, and a right sidebar with at-a-glance KPIs, top movers, and blockers.

Can the OKR page show at-risk or off-track objectives?▼

Yes, each objective carries a status pill labeled On track, At risk, or Off track with distinct colors. Key result progress bars also switch to warning or danger gradients based on status.

Does the OKR tracker work on smaller screens?▼

The generated HTML includes a responsive media query that collapses the two-column layout into a single column below 1080px. The sidebar moves below the main content and card grids stack vertically.

What are the limitations of this OKR page generator?▼

It produces a static prototype HTML page, not a live data-connected dashboard. Progress values, owners, and statuses are fixed in the markup and must be edited manually or regenerated for updates.

Related Skills

Explore More Product & Management Skills→
xcrrrxcrrr
4

okr-planner

Define and manage organizational OKRs across quarterly planning cycles.

Community
Advanced
EvolutionAPIEvolutionAPI
520

sage-okr-review

Compute Key Result progress percentages and update OKR markdown files.

Official
Intermediate
mhattingpetemhattingpete
657

dashboard-creator

Generate HTML dashboards with KPI cards, SVG charts, and data tables.

Community
Basic
a53alia53ali

okr-engineering-alignment

Write engineering OKRs aligned with business outcomes using DORA metrics.

Community
Advanced