signoz-feature-page-builder

name

signoz-feature-page-builder

description

Create new SigNoz feature pages following established architecture, shared components, and design patterns. Use when asked to "create a feature page", "build a landing page", "new product page", "scaffold a page like trace-funnels", or any request to build a marketing/product page for a SigNoz feature. Also activates for "add a page for [feature]", "build a page similar to alerts/external-apis/why-signoz", "here's the copy for the page", "build from this copy", or "use this Figma file to build a page".

SigNoz Feature Page Builder

Build new feature pages that match the established architecture, component library, and visual language of existing SigNoz feature pages.

Reference Implementation

The trace-funnels page (app/trace-funnels/) is the cleanest reference implementation. Use it as the primary pattern to follow. Other pages provide additional patterns:

• app/alerts-management/ — Rich multi-section layout with many feature highlights
• app/external-apis/ — CarouselCards interactive pattern
• app/why-signoz/ — Complex enterprise page with varied card types
• app/datadog-migration-tool/ — Modal/form integration pattern

Build Workflows

Workflow A: Interactive (define as you go)

1. Define Page Goals: Clarify the feature name, target audience, key value propositions (3-5), primary CTA, and secondary CTA.
2. Create File Structure: Follow the standard 3-file pattern (see page-architecture.md).
3. Build Constants: Define card data, carousel data, button configs, and tracking objects (see content-patterns.md).
4. Compose Sections: Assemble the page using shared components in the standard flow (see ).