skills.rest
MyHeavenDyf
MyHeavenDyfCOMMUNITY
Explore all skills by this author →
GitHub

team-okrs

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

1|Updated May 8, 2026
Search Tags:#dashboard#product design#team collaboration#OKR#tracker
One-click install
npx skills add https://github.com/MyHeavenDyf/UXAI --skill team-okrs-myheavendyf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: team-okrs
Source: https://github.com/MyHeavenDyf/UXAI/tree/main/packages/app/octoapp/templates/team-okrs
Command: npx skills add https://github.com/MyHeavenDyf/UXAI --skill team-okrs-myheavendyf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires index.html, styles.css, scripts.js, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a single-screen OKR tracker, simplifying the management of objectives and key results (OKRs) for teams.

Core Features & Use Cases

  • OKR Dashboard: Display quarter banner, objectives, key results, and owner avatars.
  • Progress Tracking: Visualize progress with status pills and progress bars.
  • Sidebar Overview: Access at-a-glance KPIs and top movers, and identify blockers.
  • Customizable: Adjust colors, typography, and layout to match your design system.

Quick Start

Build an OKR tracker for Q4 with three objectives, each with three key results, and display it on the desktop.

Frequently Asked Questions about team-okrs

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

FAQPage Schema
How do I build an OKR tracker dashboard for my team's quarterly objectives?▼

An OKR tracker dashboard displays quarter banners, objectives, key results, and owner avatars on a single screen. It uses status pills and progress bars to visualize team collaboration and track objectives effectively.

Can I customize the OKR dashboard layout to match my existing product design system?▼

Yes, the OKR dashboard is fully customizable. You can adjust colors, typography, and layout to match your specific product design system, ensuring the tracker integrates seamlessly with your current product scenarios and visual identity.

Do I need HTML, CSS, and JavaScript to render the team OKR tracker page?▼

Yes, rendering the team OKR tracker requires HTML, CSS, and JavaScript. The Skill generates these dependencies to display the dashboard, utilizing scripts, references, and assets to render the user-friendly interface directly in your browser.

What is the best way to visualize progress and identify blockers for team OKRs?▼

The best way to visualize OKR progress is by using a sidebar overview that highlights at-a-glance KPIs and top movers. This dashboard layout helps you quickly identify blockers and track the status of key results across your team.

Does the OKR tracker support desktop display for multiple objectives and key results?▼

Yes, the OKR tracker supports desktop display for multiple objectives and key results. You can quickly start by building a tracker for a specific quarter, such as Q4, with multiple objectives, each containing several key results.

Related Skills

Explore More Product & Management Skills→
PiercingXXPiercingXX
1

team-okrs

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

Community
Basic
Maccio-huangMaccio-huang

team-okrs

Generate an interactive OKR dashboard with progress bars and status updates.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
mhattingpetemhattingpete
657

dashboard-creator

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

Community
Basic