feat(feature-flags): add wizard feature-flags install skill - #378

Draft
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program
Draft

feat(feature-flags): add wizard feature-flags install skill#378
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program

Conversation

@fristovic

@fristovicfristovic commented Sep 1, 2026

Copy link
Copy Markdown

There's already wizard audit feature-flags (read-only) and a docs-only feature-flags group. Neither of those actually wires flags into an app.

This adds feature-flags-setup for wizard feature-flags. Next.js App Router only: evaluate on the server with evaluateFlags(), bootstrap into the client, create one boolean flag, and gate one UI path after the user confirms. Other stacks abort instead of growing a second pattern.

@fristovic
fristovic requested a review from a team as a code ownerSeptember 1, 2026 19:14
@fristovic
fristovic marked this pull request as draft September 1, 2026 20:36

`advanced_disable_feature_flags: true` in test/CI stops forgotten CI jobs from polling `/flags` (see `cutting-costs.md`). A missing token in production is a no-op (render `children`); in development throw the missing-config error named in the framework guidelines.

**If `instrumentation-client.ts` (or `.js`) already inits `posthog-js`:** move that init into this provider so bootstrap can be passed per request. Keep the existing `api_host` / `defaults` / other options. Do not leave both inits in place. Do not follow any framework note that says to keep init in `instrumentation-client.ts` — that path cannot take per-request bootstrap.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might work better as a commandment (check and see if it already is, it might be) and see what this might contradict with in commandments in general

@gewenyu99gewenyu99 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, this is a great start. I have some suggestions:

  • I'm not sure if I understand who would want/need this Wizard
  • Try setting up feature flags yourself, think about the pain points/difficult bits that someone is likely to fumble on, see if this resolves those issues.
  • I would think about this program's relationship to the main PostHog integration program and shared skill reuse. I think this contains a less reliable but duplicate version of many of they paths.


Record: package manager, whether `src/` is used, and whether PostHog is already initialized (`posthog.init`, `PostHogProvider`, `instrumentation-client`, `posthog-js` / `posthog-node` in dependencies). If flags are already wired the way this skill describes (`evaluateFlags` + bootstrap + a gated call site), verify they are correct and skip to STEP 10.

### STEP 2: Credentials

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're installing the package, we can init this for them. There's examples you can copy from, the OAuth session will let you grab the token on the wizard side to add them. I think it'd be pretty odd to have an environment variable -> have no integration.

```ts
import { PostHog } from 'posthog-node'

export function PostHogServer(token: string) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm gonna throw you one more wrench, you'll need to figure out a reasonable lower bound for the patterns you apply here. The way Next versions work across the board differs, and changes how PostHog need to be initialized. There are examples here in the repo


Flags change production UI. Ask **once**, then create a flag and gate only if they picked a target.

1. Scan pages and components for additive surfaces (a banner, an extra card, an empty-state illustration). Prefer a new element over wrapping existing critical logic.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Do you think someone is more likely to come to this program with a thing they have in mind and wanna gate, or do you think they'd be looking for suggestions on what to gate?

const token = process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN
const cookieStore = await cookies()
const distinctId =
cookieStore.get('ph_distinct_id')?.value ?? crypto.randomUUID()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PostHog always generates a distinct_id on the frontend. You can call posthog.get_distinct_id(). If they're not identified, they'd have an anonymous distinct Id that's merged with the user on identify.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@fristovic@gewenyu99@sarahxsanders
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

feat(feature-flags): add wizard feature-flags install skill - #378

Draft
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program
Draft

feat(feature-flags): add wizard feature-flags install skill#378
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program

Conversation

@fristovic

@fristovicfristovic commented Sep 1, 2026

Copy link
Copy Markdown

There's already wizard audit feature-flags (read-only) and a docs-only feature-flags group. Neither of those actually wires flags into an app.

This adds feature-flags-setup for wizard feature-flags. Next.js App Router only: evaluate on the server with evaluateFlags(), bootstrap into the client, create one boolean flag, and gate one UI path after the user confirms. Other stacks abort instead of growing a second pattern.

@fristovic
fristovic requested a review from a team as a code ownerSeptember 1, 2026 19:14
@fristovic
fristovic marked this pull request as draft September 1, 2026 20:36

`advanced_disable_feature_flags: true` in test/CI stops forgotten CI jobs from polling `/flags` (see `cutting-costs.md`). A missing token in production is a no-op (render `children`); in development throw the missing-config error named in the framework guidelines.

**If `instrumentation-client.ts` (or `.js`) already inits `posthog-js`:** move that init into this provider so bootstrap can be passed per request. Keep the existing `api_host` / `defaults` / other options. Do not leave both inits in place. Do not follow any framework note that says to keep init in `instrumentation-client.ts` — that path cannot take per-request bootstrap.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might work better as a commandment (check and see if it already is, it might be) and see what this might contradict with in commandments in general

@gewenyu99gewenyu99 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, this is a great start. I have some suggestions:

  • I'm not sure if I understand who would want/need this Wizard
  • Try setting up feature flags yourself, think about the pain points/difficult bits that someone is likely to fumble on, see if this resolves those issues.
  • I would think about this program's relationship to the main PostHog integration program and shared skill reuse. I think this contains a less reliable but duplicate version of many of they paths.


Record: package manager, whether `src/` is used, and whether PostHog is already initialized (`posthog.init`, `PostHogProvider`, `instrumentation-client`, `posthog-js` / `posthog-node` in dependencies). If flags are already wired the way this skill describes (`evaluateFlags` + bootstrap + a gated call site), verify they are correct and skip to STEP 10.

### STEP 2: Credentials

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're installing the package, we can init this for them. There's examples you can copy from, the OAuth session will let you grab the token on the wizard side to add them. I think it'd be pretty odd to have an environment variable -> have no integration.

```ts
import { PostHog } from 'posthog-node'

export function PostHogServer(token: string) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm gonna throw you one more wrench, you'll need to figure out a reasonable lower bound for the patterns you apply here. The way Next versions work across the board differs, and changes how PostHog need to be initialized. There are examples here in the repo


Flags change production UI. Ask **once**, then create a flag and gate only if they picked a target.

1. Scan pages and components for additive surfaces (a banner, an extra card, an empty-state illustration). Prefer a new element over wrapping existing critical logic.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Do you think someone is more likely to come to this program with a thing they have in mind and wanna gate, or do you think they'd be looking for suggestions on what to gate?

const token = process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN
const cookieStore = await cookies()
const distinctId =
cookieStore.get('ph_distinct_id')?.value ?? crypto.randomUUID()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PostHog always generates a distinct_id on the frontend. You can call posthog.get_distinct_id(). If they're not identified, they'd have an anonymous distinct Id that's merged with the user on identify.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@fristovic@gewenyu99@sarahxsanders
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(feature-flags): add wizard feature-flags install skill - #378

Draft
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program
Draft

feat(feature-flags): add wizard feature-flags install skill#378
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program

Conversation

@fristovic

@fristovicfristovic commented Sep 1, 2026

Copy link
Copy Markdown

There's already wizard audit feature-flags (read-only) and a docs-only feature-flags group. Neither of those actually wires flags into an app.

This adds feature-flags-setup for wizard feature-flags. Next.js App Router only: evaluate on the server with evaluateFlags(), bootstrap into the client, create one boolean flag, and gate one UI path after the user confirms. Other stacks abort instead of growing a second pattern.

@fristovic
fristovic requested a review from a team as a code ownerSeptember 1, 2026 19:14
@fristovic
fristovic marked this pull request as draft September 1, 2026 20:36

`advanced_disable_feature_flags: true` in test/CI stops forgotten CI jobs from polling `/flags` (see `cutting-costs.md`). A missing token in production is a no-op (render `children`); in development throw the missing-config error named in the framework guidelines.

**If `instrumentation-client.ts` (or `.js`) already inits `posthog-js`:** move that init into this provider so bootstrap can be passed per request. Keep the existing `api_host` / `defaults` / other options. Do not leave both inits in place. Do not follow any framework note that says to keep init in `instrumentation-client.ts` — that path cannot take per-request bootstrap.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might work better as a commandment (check and see if it already is, it might be) and see what this might contradict with in commandments in general

@gewenyu99gewenyu99 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, this is a great start. I have some suggestions:

  • I'm not sure if I understand who would want/need this Wizard
  • Try setting up feature flags yourself, think about the pain points/difficult bits that someone is likely to fumble on, see if this resolves those issues.
  • I would think about this program's relationship to the main PostHog integration program and shared skill reuse. I think this contains a less reliable but duplicate version of many of they paths.


Record: package manager, whether `src/` is used, and whether PostHog is already initialized (`posthog.init`, `PostHogProvider`, `instrumentation-client`, `posthog-js` / `posthog-node` in dependencies). If flags are already wired the way this skill describes (`evaluateFlags` + bootstrap + a gated call site), verify they are correct and skip to STEP 10.

### STEP 2: Credentials

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're installing the package, we can init this for them. There's examples you can copy from, the OAuth session will let you grab the token on the wizard side to add them. I think it'd be pretty odd to have an environment variable -> have no integration.

```ts
import { PostHog } from 'posthog-node'

export function PostHogServer(token: string) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm gonna throw you one more wrench, you'll need to figure out a reasonable lower bound for the patterns you apply here. The way Next versions work across the board differs, and changes how PostHog need to be initialized. There are examples here in the repo


Flags change production UI. Ask **once**, then create a flag and gate only if they picked a target.

1. Scan pages and components for additive surfaces (a banner, an extra card, an empty-state illustration). Prefer a new element over wrapping existing critical logic.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Do you think someone is more likely to come to this program with a thing they have in mind and wanna gate, or do you think they'd be looking for suggestions on what to gate?

const token = process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN
const cookieStore = await cookies()
const distinctId =
cookieStore.get('ph_distinct_id')?.value ?? crypto.randomUUID()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PostHog always generates a distinct_id on the frontend. You can call posthog.get_distinct_id(). If they're not identified, they'd have an anonymous distinct Id that's merged with the user on identify.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@fristovic@gewenyu99@sarahxsanders
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(feature-flags): add wizard feature-flags install skill - #378

Draft
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program
Draft

feat(feature-flags): add wizard feature-flags install skill#378
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program

Conversation

@fristovic

@fristovicfristovic commented Sep 1, 2026

Copy link
Copy Markdown

There's already wizard audit feature-flags (read-only) and a docs-only feature-flags group. Neither of those actually wires flags into an app.

This adds feature-flags-setup for wizard feature-flags. Next.js App Router only: evaluate on the server with evaluateFlags(), bootstrap into the client, create one boolean flag, and gate one UI path after the user confirms. Other stacks abort instead of growing a second pattern.

@fristovic
fristovic requested a review from a team as a code ownerSeptember 1, 2026 19:14
@fristovic
fristovic marked this pull request as draft September 1, 2026 20:36

`advanced_disable_feature_flags: true` in test/CI stops forgotten CI jobs from polling `/flags` (see `cutting-costs.md`). A missing token in production is a no-op (render `children`); in development throw the missing-config error named in the framework guidelines.

**If `instrumentation-client.ts` (or `.js`) already inits `posthog-js`:** move that init into this provider so bootstrap can be passed per request. Keep the existing `api_host` / `defaults` / other options. Do not leave both inits in place. Do not follow any framework note that says to keep init in `instrumentation-client.ts` — that path cannot take per-request bootstrap.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might work better as a commandment (check and see if it already is, it might be) and see what this might contradict with in commandments in general

@gewenyu99gewenyu99 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, this is a great start. I have some suggestions:

  • I'm not sure if I understand who would want/need this Wizard
  • Try setting up feature flags yourself, think about the pain points/difficult bits that someone is likely to fumble on, see if this resolves those issues.
  • I would think about this program's relationship to the main PostHog integration program and shared skill reuse. I think this contains a less reliable but duplicate version of many of they paths.


Record: package manager, whether `src/` is used, and whether PostHog is already initialized (`posthog.init`, `PostHogProvider`, `instrumentation-client`, `posthog-js` / `posthog-node` in dependencies). If flags are already wired the way this skill describes (`evaluateFlags` + bootstrap + a gated call site), verify they are correct and skip to STEP 10.

### STEP 2: Credentials

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're installing the package, we can init this for them. There's examples you can copy from, the OAuth session will let you grab the token on the wizard side to add them. I think it'd be pretty odd to have an environment variable -> have no integration.

```ts
import { PostHog } from 'posthog-node'

export function PostHogServer(token: string) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm gonna throw you one more wrench, you'll need to figure out a reasonable lower bound for the patterns you apply here. The way Next versions work across the board differs, and changes how PostHog need to be initialized. There are examples here in the repo


Flags change production UI. Ask **once**, then create a flag and gate only if they picked a target.

1. Scan pages and components for additive surfaces (a banner, an extra card, an empty-state illustration). Prefer a new element over wrapping existing critical logic.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Do you think someone is more likely to come to this program with a thing they have in mind and wanna gate, or do you think they'd be looking for suggestions on what to gate?

const token = process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN
const cookieStore = await cookies()
const distinctId =
cookieStore.get('ph_distinct_id')?.value ?? crypto.randomUUID()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PostHog always generates a distinct_id on the frontend. You can call posthog.get_distinct_id(). If they're not identified, they'd have an anonymous distinct Id that's merged with the user on identify.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@fristovic@gewenyu99@sarahxsanders
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

feat(feature-flags): add wizard feature-flags install skill - #378

Draft
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program
Draft

feat(feature-flags): add wizard feature-flags install skill#378
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program

Conversation

@fristovic

@fristovicfristovic commented Sep 1, 2026

Copy link
Copy Markdown

There's already wizard audit feature-flags (read-only) and a docs-only feature-flags group. Neither of those actually wires flags into an app.

This adds feature-flags-setup for wizard feature-flags. Next.js App Router only: evaluate on the server with evaluateFlags(), bootstrap into the client, create one boolean flag, and gate one UI path after the user confirms. Other stacks abort instead of growing a second pattern.

@fristovic
fristovic requested a review from a team as a code ownerSeptember 1, 2026 19:14
@fristovic
fristovic marked this pull request as draft September 1, 2026 20:36

`advanced_disable_feature_flags: true` in test/CI stops forgotten CI jobs from polling `/flags` (see `cutting-costs.md`). A missing token in production is a no-op (render `children`); in development throw the missing-config error named in the framework guidelines.

**If `instrumentation-client.ts` (or `.js`) already inits `posthog-js`:** move that init into this provider so bootstrap can be passed per request. Keep the existing `api_host` / `defaults` / other options. Do not leave both inits in place. Do not follow any framework note that says to keep init in `instrumentation-client.ts` — that path cannot take per-request bootstrap.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might work better as a commandment (check and see if it already is, it might be) and see what this might contradict with in commandments in general

@gewenyu99gewenyu99 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, this is a great start. I have some suggestions:

  • I'm not sure if I understand who would want/need this Wizard
  • Try setting up feature flags yourself, think about the pain points/difficult bits that someone is likely to fumble on, see if this resolves those issues.
  • I would think about this program's relationship to the main PostHog integration program and shared skill reuse. I think this contains a less reliable but duplicate version of many of they paths.


Record: package manager, whether `src/` is used, and whether PostHog is already initialized (`posthog.init`, `PostHogProvider`, `instrumentation-client`, `posthog-js` / `posthog-node` in dependencies). If flags are already wired the way this skill describes (`evaluateFlags` + bootstrap + a gated call site), verify they are correct and skip to STEP 10.

### STEP 2: Credentials

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're installing the package, we can init this for them. There's examples you can copy from, the OAuth session will let you grab the token on the wizard side to add them. I think it'd be pretty odd to have an environment variable -> have no integration.

```ts
import { PostHog } from 'posthog-node'

export function PostHogServer(token: string) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm gonna throw you one more wrench, you'll need to figure out a reasonable lower bound for the patterns you apply here. The way Next versions work across the board differs, and changes how PostHog need to be initialized. There are examples here in the repo


Flags change production UI. Ask **once**, then create a flag and gate only if they picked a target.

1. Scan pages and components for additive surfaces (a banner, an extra card, an empty-state illustration). Prefer a new element over wrapping existing critical logic.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Do you think someone is more likely to come to this program with a thing they have in mind and wanna gate, or do you think they'd be looking for suggestions on what to gate?

const token = process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN
const cookieStore = await cookies()
const distinctId =
cookieStore.get('ph_distinct_id')?.value ?? crypto.randomUUID()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PostHog always generates a distinct_id on the frontend. You can call posthog.get_distinct_id(). If they're not identified, they'd have an anonymous distinct Id that's merged with the user on identify.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@fristovic@gewenyu99@sarahxsanders
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(feature-flags): add wizard feature-flags install skill - #378

Draft
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program
Draft

feat(feature-flags): add wizard feature-flags install skill#378
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program

Conversation

@fristovic

@fristovicfristovic commented Sep 1, 2026

Copy link
Copy Markdown

There's already wizard audit feature-flags (read-only) and a docs-only feature-flags group. Neither of those actually wires flags into an app.

This adds feature-flags-setup for wizard feature-flags. Next.js App Router only: evaluate on the server with evaluateFlags(), bootstrap into the client, create one boolean flag, and gate one UI path after the user confirms. Other stacks abort instead of growing a second pattern.

@fristovic
fristovic requested a review from a team as a code ownerSeptember 1, 2026 19:14
@fristovic
fristovic marked this pull request as draft September 1, 2026 20:36

`advanced_disable_feature_flags: true` in test/CI stops forgotten CI jobs from polling `/flags` (see `cutting-costs.md`). A missing token in production is a no-op (render `children`); in development throw the missing-config error named in the framework guidelines.

**If `instrumentation-client.ts` (or `.js`) already inits `posthog-js`:** move that init into this provider so bootstrap can be passed per request. Keep the existing `api_host` / `defaults` / other options. Do not leave both inits in place. Do not follow any framework note that says to keep init in `instrumentation-client.ts` — that path cannot take per-request bootstrap.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might work better as a commandment (check and see if it already is, it might be) and see what this might contradict with in commandments in general

@gewenyu99gewenyu99 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, this is a great start. I have some suggestions:

  • I'm not sure if I understand who would want/need this Wizard
  • Try setting up feature flags yourself, think about the pain points/difficult bits that someone is likely to fumble on, see if this resolves those issues.
  • I would think about this program's relationship to the main PostHog integration program and shared skill reuse. I think this contains a less reliable but duplicate version of many of they paths.


Record: package manager, whether `src/` is used, and whether PostHog is already initialized (`posthog.init`, `PostHogProvider`, `instrumentation-client`, `posthog-js` / `posthog-node` in dependencies). If flags are already wired the way this skill describes (`evaluateFlags` + bootstrap + a gated call site), verify they are correct and skip to STEP 10.

### STEP 2: Credentials

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're installing the package, we can init this for them. There's examples you can copy from, the OAuth session will let you grab the token on the wizard side to add them. I think it'd be pretty odd to have an environment variable -> have no integration.

```ts
import { PostHog } from 'posthog-node'

export function PostHogServer(token: string) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm gonna throw you one more wrench, you'll need to figure out a reasonable lower bound for the patterns you apply here. The way Next versions work across the board differs, and changes how PostHog need to be initialized. There are examples here in the repo


Flags change production UI. Ask **once**, then create a flag and gate only if they picked a target.

1. Scan pages and components for additive surfaces (a banner, an extra card, an empty-state illustration). Prefer a new element over wrapping existing critical logic.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Do you think someone is more likely to come to this program with a thing they have in mind and wanna gate, or do you think they'd be looking for suggestions on what to gate?

const token = process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN
const cookieStore = await cookies()
const distinctId =
cookieStore.get('ph_distinct_id')?.value ?? crypto.randomUUID()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PostHog always generates a distinct_id on the frontend. You can call posthog.get_distinct_id(). If they're not identified, they'd have an anonymous distinct Id that's merged with the user on identify.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@fristovic@gewenyu99@sarahxsanders
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(feature-flags): add wizard feature-flags install skill - #378

Draft
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program
Draft

feat(feature-flags): add wizard feature-flags install skill#378
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program

Conversation

@fristovic

@fristovicfristovic commented Sep 1, 2026

Copy link
Copy Markdown

There's already wizard audit feature-flags (read-only) and a docs-only feature-flags group. Neither of those actually wires flags into an app.

This adds feature-flags-setup for wizard feature-flags. Next.js App Router only: evaluate on the server with evaluateFlags(), bootstrap into the client, create one boolean flag, and gate one UI path after the user confirms. Other stacks abort instead of growing a second pattern.

@fristovic
fristovic requested a review from a team as a code ownerSeptember 1, 2026 19:14
@fristovic
fristovic marked this pull request as draft September 1, 2026 20:36

`advanced_disable_feature_flags: true` in test/CI stops forgotten CI jobs from polling `/flags` (see `cutting-costs.md`). A missing token in production is a no-op (render `children`); in development throw the missing-config error named in the framework guidelines.

**If `instrumentation-client.ts` (or `.js`) already inits `posthog-js`:** move that init into this provider so bootstrap can be passed per request. Keep the existing `api_host` / `defaults` / other options. Do not leave both inits in place. Do not follow any framework note that says to keep init in `instrumentation-client.ts` — that path cannot take per-request bootstrap.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might work better as a commandment (check and see if it already is, it might be) and see what this might contradict with in commandments in general

@gewenyu99gewenyu99 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, this is a great start. I have some suggestions:

  • I'm not sure if I understand who would want/need this Wizard
  • Try setting up feature flags yourself, think about the pain points/difficult bits that someone is likely to fumble on, see if this resolves those issues.
  • I would think about this program's relationship to the main PostHog integration program and shared skill reuse. I think this contains a less reliable but duplicate version of many of they paths.


Record: package manager, whether `src/` is used, and whether PostHog is already initialized (`posthog.init`, `PostHogProvider`, `instrumentation-client`, `posthog-js` / `posthog-node` in dependencies). If flags are already wired the way this skill describes (`evaluateFlags` + bootstrap + a gated call site), verify they are correct and skip to STEP 10.

### STEP 2: Credentials

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're installing the package, we can init this for them. There's examples you can copy from, the OAuth session will let you grab the token on the wizard side to add them. I think it'd be pretty odd to have an environment variable -> have no integration.

```ts
import { PostHog } from 'posthog-node'

export function PostHogServer(token: string) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm gonna throw you one more wrench, you'll need to figure out a reasonable lower bound for the patterns you apply here. The way Next versions work across the board differs, and changes how PostHog need to be initialized. There are examples here in the repo


Flags change production UI. Ask **once**, then create a flag and gate only if they picked a target.

1. Scan pages and components for additive surfaces (a banner, an extra card, an empty-state illustration). Prefer a new element over wrapping existing critical logic.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Do you think someone is more likely to come to this program with a thing they have in mind and wanna gate, or do you think they'd be looking for suggestions on what to gate?

const token = process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN
const cookieStore = await cookies()
const distinctId =
cookieStore.get('ph_distinct_id')?.value ?? crypto.randomUUID()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PostHog always generates a distinct_id on the frontend. You can call posthog.get_distinct_id(). If they're not identified, they'd have an anonymous distinct Id that's merged with the user on identify.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@fristovic@gewenyu99@sarahxsanders
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

feat(feature-flags): add wizard feature-flags install skill - #378

Draft
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program
Draft

feat(feature-flags): add wizard feature-flags install skill#378
fristovic wants to merge 3 commits into
PostHog:mainfrom
fristovic:feat/feature-flags-program

Conversation

@fristovic

@fristovicfristovic commented Sep 1, 2026

Copy link
Copy Markdown

There's already wizard audit feature-flags (read-only) and a docs-only feature-flags group. Neither of those actually wires flags into an app.

This adds feature-flags-setup for wizard feature-flags. Next.js App Router only: evaluate on the server with evaluateFlags(), bootstrap into the client, create one boolean flag, and gate one UI path after the user confirms. Other stacks abort instead of growing a second pattern.

@fristovic
fristovic requested a review from a team as a code ownerSeptember 1, 2026 19:14
@fristovic
fristovic marked this pull request as draft September 1, 2026 20:36

`advanced_disable_feature_flags: true` in test/CI stops forgotten CI jobs from polling `/flags` (see `cutting-costs.md`). A missing token in production is a no-op (render `children`); in development throw the missing-config error named in the framework guidelines.

**If `instrumentation-client.ts` (or `.js`) already inits `posthog-js`:** move that init into this provider so bootstrap can be passed per request. Keep the existing `api_host` / `defaults` / other options. Do not leave both inits in place. Do not follow any framework note that says to keep init in `instrumentation-client.ts` — that path cannot take per-request bootstrap.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might work better as a commandment (check and see if it already is, it might be) and see what this might contradict with in commandments in general

@gewenyu99gewenyu99 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, this is a great start. I have some suggestions:

  • I'm not sure if I understand who would want/need this Wizard
  • Try setting up feature flags yourself, think about the pain points/difficult bits that someone is likely to fumble on, see if this resolves those issues.
  • I would think about this program's relationship to the main PostHog integration program and shared skill reuse. I think this contains a less reliable but duplicate version of many of they paths.


Record: package manager, whether `src/` is used, and whether PostHog is already initialized (`posthog.init`, `PostHogProvider`, `instrumentation-client`, `posthog-js` / `posthog-node` in dependencies). If flags are already wired the way this skill describes (`evaluateFlags` + bootstrap + a gated call site), verify they are correct and skip to STEP 10.

### STEP 2: Credentials

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're installing the package, we can init this for them. There's examples you can copy from, the OAuth session will let you grab the token on the wizard side to add them. I think it'd be pretty odd to have an environment variable -> have no integration.

```ts
import { PostHog } from 'posthog-node'

export function PostHogServer(token: string) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm gonna throw you one more wrench, you'll need to figure out a reasonable lower bound for the patterns you apply here. The way Next versions work across the board differs, and changes how PostHog need to be initialized. There are examples here in the repo


Flags change production UI. Ask **once**, then create a flag and gate only if they picked a target.

1. Scan pages and components for additive surfaces (a banner, an extra card, an empty-state illustration). Prefer a new element over wrapping existing critical logic.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Do you think someone is more likely to come to this program with a thing they have in mind and wanna gate, or do you think they'd be looking for suggestions on what to gate?

const token = process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN
const cookieStore = await cookies()
const distinctId =
cookieStore.get('ph_distinct_id')?.value ?? crypto.randomUUID()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PostHog always generates a distinct_id on the frontend. You can call posthog.get_distinct_id(). If they're not identified, they'd have an anonymous distinct Id that's merged with the user on identify.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@fristovic@gewenyu99@sarahxsanders