skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

posthog-ui-skills

Enforces Posthog's UI design system constraints for building dark mode interfaces.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#color palette#front-end development#ui-design#posthog#dark-mode
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill posthog-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: posthog-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/posthog
Command: npx skills add https://github.com/ihlamury/design-skills --skill posthog-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building Posthog-style interfaces, ensuring consistency in dark mode, font usage, and spacing.

Core Features & Use Cases

  • Dark Mode Implementation: Enforces dark backgrounds and specific color palettes for a Posthog aesthetic.
  • Typography Guidelines: Mandates the use of 'Inter' font with specific sizes and weights.
  • Spacing and Layout: Adheres to a 4px grid for consistent spacing and defines layout patterns for a cohesive UI.
  • Use Case: When designing a new feature for a product that needs to match the existing Posthog look and feel, use this Skill to guide the UI development.

Quick Start

Apply Posthog's UI design system to create a dark mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about posthog-ui-skills

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

FAQPage Schema
How do I build a dark mode interface that matches Posthog's UI design system?▼

To build a Posthog-style dark mode interface, apply specific color palettes, the Inter font family, a 4px grid spacing system, and defined layout patterns using strict semantic color tokens and border-radius scales.

What typography and spacing constraints are required for Posthog-style UI development?▼

Posthog-style UI development mandates using the Inter font family with specific sizes and weights, alongside strict adherence to a 4px grid for all spacing and layout patterns to ensure visual consistency.

Can I use semantic color tokens for a dark mode UI without a predefined color palette?▼

Building a Posthog aesthetic requires strict implementation of predefined semantic color tokens paired with specific dark background color palettes, rather than generating custom colors outside the design system constraints.

When do I need to enforce a 4px grid spacing system in front-end development?▼

You need to enforce a 4px grid spacing system in front-end development when adhering to Posthog's UI design system, ensuring consistent layout patterns and spacing for new features matching the existing product look.

What are the limitations of applying Posthog's design system constraints to existing interfaces?▼

The constraints are opinionated toward Posthog's aesthetic, meaning existing interfaces must adopt the Inter font, dark mode color palettes, 4px grid, and specific border-radius scales, which may require significant refactoring of non-compliant components.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

descript-ui-skills

Enforce Descript UI design constraints for dark mode, Inter font, and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
ihlamuryihlamury
73

convex-ui-skills

Enforce Convex design constraints for dark-mode UIs with Inter font and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

rippling-ui-skills

Enforce Rippling UI design constraints for dark mode, Inter font, and 4px grid.

Community
Intermediate