← LeaderboardThe Skill Leaderboard

team-okrs

OKR tracker page — quarter banner, three objectives with their key results as progress bars, owner avatars, status pills, and a "this quarter at a glance" sidebar. Use when the brief mentions "OKRs", "key results", "objectives", or "目标".

Published by feimacode ↗feimacode/open-design-agent-kit

Try your first task

A source-grounded starter task has not been verified for this skill yet.

SKILL.md

name: team-okrsdescription: |  OKR tracker page — quarter banner, three objectives with their key  results as progress bars, owner avatars, status pills, and a "this  quarter at a glance" sidebar. Use when the brief mentions "OKRs",  "key results", "objectives", or "目标".triggers:   - "okr"  - "okrs"  - "key results"  - "objectives"  - "目标"od:   mode: prototype  platform: desktop  scenario: product  preview:     type: html    entry: index.html  design_system:     requires: true    sections: [color, typography, layout, components]  example_prompt: "Build an OKR tracker for Q4 — three objectives, three key results each, progress bars, owners, status pills."

Team OKRs Skill

Produce a single-screen OKR tracker.

Workflow

  1. Read DESIGN.md.
  2. Layout:
    • Quarter banner: Q4 FY25, dates, overall progress chip.
    • Three objective cards. Each has:
      • Objective title + owner avatar + status pill (On track / At risk / Off track)
      • 3 key results, each a row with metric / current → target / progress bar
    • Right sidebar: at-a-glance KPIs, top movers, blockers callout.
  3. Clear progress visualisation, calm palette, one accent.

Output contract

<artifact identifier="okr-q4" type="text/html" title="OKRs Q4">
<!doctype html>...</artifact>