skills.rest
PostHog
PostHogOFFICIAL
Explore all skills by this author →
Website𝕏@PostHogGitHub

placing-product-frontend-code

Decides whether frontend files belong in products/<name>/frontend/ or frontend/src/scenes/<name>/.

713|118|Updated Aug 11, 2020
Search Tags:#code organization#Frontend#Monorepo#typeScript#PostHog#merge queue#Migration
One-click install
npx skills add https://github.com/PostHog/posthog-foss --skill placing-product-frontend-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: placing-product-frontend-code
Source: https://github.com/PostHog/posthog-foss/tree/main/.agents/skills/placing-product-frontend-code
Command: npx skills add https://github.com/PostHog/posthog-foss --skill placing-product-frontend-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

PostHog's frontend code is split between two trees — products/<name>/frontend/ and frontend/src/scenes/<name>/ — and about 18 products still have UI in both. Adding a file to the wrong tree widens merge-queue lanes and slows every frontend PR, but the correct placement is not obvious from the directory listing alone.

Core Features & Use Cases

  • Placement decision rules: A decision table maps each situation (migration under way, no scenes directory, app-level scene) to the correct tree, including when to bootstrap a new product with bin/hogli product:bootstrap.
  • Migration progress reporting: The scene_product_split.py script counts hand-written .ts/.tsx files on each side of the split (skipping orval-generated code) and reports how far each product's move has gone.
  • Technical rationale: Explains why path-based merge-queue lanes are the only working signal, backed by a measured dependency-graph analysis (2226 modules in one strongly connected component).
  • Use Case: Before adding a new component for the data-warehouse product, run the script to see that products/data-warehouse/frontend/ already holds more files than scenes/data-warehouse/, then place the new file in the products tree.

Quick Start

Ask the assistant to run the scene_product_split.py script for your product name and tell you which frontend tree your new file belongs in.

Frequently Asked Questions about placing-product-frontend-code

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

FAQPage Schema
How do I decide where to put a new frontend file in PostHog?▼

A product's UI belongs in products/<name>/frontend/, not frontend/src/scenes/<name>/. Run the scene_product_split.py script with your product name to see which tree holds more files, then place new code in the products tree.

How do I check a product's frontend migration progress?▼

Run python3 scene_product_split.py with no arguments to list every scene directory with a product counterpart, sorted by migration progress. Pass a directory name like data-warehouse to check one product specifically.

Why does file placement affect the merge queue?▼

The trunk-impacted-targets.js script assigns merge-queue lanes by path. A change under frontend/ reports fe:core plus every fe:product target and serializes against all frontend PRs, while a change confined to products/<name>/frontend/ reports one target.

When is frontend/src/scenes/ the correct location?▼

App-level scenes such as settings, onboarding, billing, max, and error-tracking shells belong in frontend/src/scenes/ because they have no product counterpart. Deciding whether a new directory is a product or an app-level scene is a judgment call.

Why can't a dependency graph replace path-based lanes?▼

A measured static import graph over the frontend (8430 files, 43924 edges) contains 2226 modules in a single strongly connected component spanning 31 products. Reverse-reachability from any file reaches 73 of 79 products, so the graph cannot discriminate lanes.

Does the scene_product_split.py script modify any files?▼

No, the script is advisory and read-only. It only counts hand-written .ts and .tsx files on each side of the split, skipping generated/ directories produced by orval, and has no exit code to satisfy.

Related Skills

Explore More Software Engineering Skills→
PostHogPostHog
693

hogli

Run, build, test, and lint the PostHog codebase via a unified CLI.

Official
Intermediate
Rune-kitRune-kit
82

video-creator

Generate video production plans with scripts, storyboards, and shot lists.

Official
Advanced
weiloon1234weiloon1234

new-route

Declare a new portal route with DTOs and OpenAPI bindings.

Community
Advanced
ekremmkasapekremmkasap

shellcheck-configuration

Configure ShellCheck linting for bash, sh, and POSIX shells via .shellcheckrc.

Community
Advanced