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

organizing-conversations-code

Defines file layout rules for React components and helpers in the PostHog conversations product.

713|118|Updated Aug 11, 2020
Search Tags:#file organization#components#code structure#Frontend#PostHog#reAct#Code review
One-click install
npx skills add https://github.com/PostHog/posthog-foss --skill organizing-conversations-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: organizing-conversations-code
Source: https://github.com/PostHog/posthog-foss/tree/main/products/conversations/skills/organizing-conversations-code
Command: npx skills add https://github.com/PostHog/posthog-foss --skill organizing-conversations-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When adding, moving, or reviewing files under products/conversations/, developers need consistent rules for where components, helpers, and tests live. Without them, components end up as loose files, barrel exports appear, and moves leave stale re-export shims.

Core Features & Use Cases

  • Component placement rules: Every React component gets its own folder under products/conversations/frontend/components/<Name>/<Name>.tsx, with colocated tests.
  • Import conventions: Import the file directly, never the folder, and never add an index.ts barrel.
  • Helper distinction: Helpers returning props or data (not markup) stay next to the feature or at the frontend root, e.g. clearFilterButtonProps.tsx.
  • Use Case: When moving a component like SlaDisplay, use git mv, update every consumer import to the new path, and delete the old file with no re-export shim.

Quick Start

Ask the AI to review where a new conversations React component should be placed and how its imports should be written.

Frequently Asked Questions about organizing-conversations-code

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

FAQPage Schema
Where should React components go in the PostHog conversations product?▼

Each React component lives in its own folder under products/conversations/frontend/components/<Name>/<Name>.tsx, with its test colocated as <Name>.test.tsx. Never place components as loose files in components/ or at the frontend root.

How do I import a conversations component in PostHog?▼

Import the file directly, not the folder, using either a relative path like ../../components/SlaDisplay/SlaDisplay or the full products/conversations path. Do not add an index.ts barrel to enable folder imports.

Where do non-component helpers go in conversations frontend code?▼

A helper that returns props or data rather than markup is not a component. Keep it next to the feature or at products/conversations/frontend/<name>.ts(x), following the clearFilterButtonProps.tsx example.

How do I move a component without breaking imports?▼

Use git mv to move the component, then update every consumer to point at the new path and delete the old file. Do not leave a re-export shim behind.

Does this skill replace repo-wide UI component rules?▼

No. Repo-wide rules like one-component-per-file, no barrels, and import sweeps still apply from the writing-ui-components skill. This skill only governs where files go within the conversations product.

Related Skills

Explore More Software Engineering Skills→
liminal-ailiminal-ai
1

convex-quickstart

Scaffold Convex projects and wire ConvexProvider with environment variables.

Official
Intermediate
trycompaitrycompai
1.9k

code

Enforces TypeScript and React coding standards for type safety, component patterns, and file organization.

Official
Basic
bkinsey808bkinsey808

file-organization

Enforce direct imports, kebab-case docs, and colocated tests across codebases.

Community
Intermediate
wonkpentinkwonkpentink

feature-specific-business-logic

Structure domain-specific feature logic under src/features with modular components and custom hooks.

Community
Advanced