manage-dashboard-widgets

작성자: posthog

PostHog 엔지니어가 대시보드 위젯 플랫폼 작업을 수행하도록 안내합니다 — 새로운 widget_type (WIDGET_REGISTRY, catalog, run_widgets, WidgetCard)을 출시하거나 업데이트합니다…

npx skills add https://github.com/posthog/posthog-foss --skill manage-dashboard-widgets

Managing dashboard widgets

For PostHog engineers working on dashboard widget tiles in the repo.

Human overview: products/dashboards/CONTRIBUTING.md

In scope: widget tiles (widget_id on DashboardTile) — ship new types or change shipped types.

Out of scope: adding an existing type to a dashboard (MCP dashboard-widget-catalog-list → dashboard-widgets-batch-add); insight tiles, text cards, button tiles.

1. Route first

RequestPathStart here
New widget_type that does not existShip§2 Ship a new type — intake mandatory
Change a shipped type (config, query, UI, layout, RBAC, deprecate)Update§3 Update a shipped type — skip intake
Add existing type to a dashboard—MCP only — not this skill
Chart / trend / graph for product metrics on a dashboard—Insight tile — architecture.md § Charts

Shipped types (code truth): architecture.md § Shipped types.

2. Ship a new widget_type

Intake — ask before coding

Mandatory for new types only. Read widget-intake.md and:

  1. Discover product UI in the repo — concrete components/scenes before generic tile-body questions.
  2. Apply defaults and inference (groupId, copy spine, list UX) — never AskQuestion banned topics.
  3. Resolve ambiguity — one batched follow-up for gaps, max 6 questions (open fields).
  4. Post the spec table; get confirmation before checklist §1.

Execute

After spec confirmation → checklist-new-widget-type.md §1 → §8. §5b (dedicated stories — required before the PR, not a follow-up) is sequenced once MVP tests are green.

Self-updating / real-time tile? Read live-widgets.md first — the live contract (is_live, creation_flag, generatedAt seeds) and the widgets/live/ toolkit.

3. Update a shipped type

Skip intake. Identify the type from the request or EXPECTED_WIDGET_TYPES in widget_registry.py.

  1. Read managing-existing-widgets.md — "What kind of change?" routing table for primary files.
  2. Confirm: which type, what changes, backward-compatible config migration?
  3. Follow linked references from that table — do not re-read the new-type checklist.

Cannot change in place: widget_type string on existing rows; stored w/h when catalog defaults change.

New visualization kind = ship (§2). Chart-primary = insight tile (architecture.md § Charts).

4. Platform invariants

Both paths:

  1. RBAC registry-driven — no widget_type branches in dashboard.py. permissions-and-sharing.md § Product RBAC
  2. One widget_type everywhere — registries + both catalogs + FE registry; variants share groupId only.
  3. Per-type code in product paths — not platform shells. architecture.md § Platform files
  4. WidgetCard compound pattern — composition.md
  5. Config contract = Pydantic SSOT — widget_specs/configs.py + WidgetSpec in registry.py; hogli build:openapi for OpenAPI/FE Zod/MCP. Runtime PATCH stays JSONField. See config-and-codegen.md.
  6. No chart-primary widgets — architecture.md § Charts

New widget_type strings need no migration — register registries + catalogs only.

5. Companion skills

SkillWhen
improving-drf-endpointsdashboard @extend_schema (config serializers auto-derive from WIDGET_SPECS)
writing-kea-logicsedit*WidgetModalLogic.ts or dashboardLogic.tsx
django-migrationsDashboardWidget / DashboardTile schema only
adopting-generated-api-typesTile PATCH in frontend/utils.ts

6. Verify

MVP smoke (renders + core tests — not a ship point):

hogli test products/dashboards/backend/api/test/test_run_widgets.py
hogli test products/dashboards/backend/api/test/test_dashboard_widgets.py
hogli test products/dashboards/frontend/widgets/registry.test.tsx

Ship gate (required before the PR): checklist §8 + hogli build:openapi + dedicated Storybook stories per checklist §5b (component + edit modal — required, not just the catalog overview).

Config SSOT changes (also run after widget_specs/ edits):

hogli test products/dashboards/backend/api/test/test_widget_config_schema_parity.py
hogli test products/dashboards/frontend/widgets/widgetConfigSchemaParity.test.ts
hogli test products/dashboards/backend/api/test/test_widget_openapi_enums.py   # new widget_type only

Update: tests for layers touched — at minimum test_run_widgets.py if BE changed, products/dashboards/frontend/widgets/ if FE changed, hogli build:openapi if config OpenAPI changed. See managing-existing-widgets.md routing table Also check column.

Reference appendix

TopicDoc
Intake (new types only)widget-intake.md — canonical defaults + spec recap
New type checklistchecklist-new-widget-type.md
Update shipped typemanaging-existing-widgets.md
Architecturearchitecture.md — file map, invariants
Config + codegenconfig-and-codegen.md
WidgetCard / edit modalcomposition.md
List footer / tile filterslist-widget-patterns.md
Live / self-updating tileslive-widgets.md — contract + widgets/live/ toolkit
Tile min/maxlayout-and-ux.md
RBAC / sharingpermissions-and-sharing.md
Setup gatesavailability-and-gating.md
MCP after shipmcp.md
Skill doc maintenanceskill-maintenance.md

posthog의 다른 스킬

error-tracking-hono
posthog
PostHog 오류 추적 for Hono
tuning-incremental-sync-config
posthog
동기화의 구성은 ExternalDataSchema에 저장되며, external-data-schemas-partial-update를 통해 언제든지 변경할 수 있습니다. 대부분의 변경은 비파괴적이며(다음 동기화에 적용됨), 일부 변경(sync_type 전환, 기본 키 변경)은 동기화된 데이터 손상을 방지하기 위해 신중한 처리가 필요합니다.
playwright-test
posthog
플레이라이트 테스트를 작성하고, 실행이 잘 되며, 불안정하지 않도록 하세요.
error-tracking-ruby
posthog
PostHog Ruby 오류 추적
authoring-log-alerts
posthog
PostHog 프로젝트의 서비스에 유용하고 노이즈가 적은 로그 알림을 작성합니다. 사용자가 로그에 대한 알림 설정을 요청하거나 추가해야 할 알림을 제안할 때 사용하세요.
making-scenes-tab-aware
posthog
Guides converting PostHog frontend scenes to be tab aware for internal scene tabs. Use when adding or refactoring a `SceneExport` scene, fixing state leaking…
posthog-survey-creator
posthog
PostHog에서 안내 대화를 통해 설문조사를 생성하고 구성합니다. 사용자가 설문조사를 만들거나, 사용자 피드백을 수집하거나, 실행하려 할 때 이 스킬을 사용하세요.
authoring-scouts
posthog
PostHog Signals 스카우트를 작성, 편집 및 조정하는 방법 — 프로젝트를 스캔하고 Signals 인박스에 보고서를 작성하는 예약된 에이전트입니다. 사용자가…