Building Status Page

The Static Page Trap and the SaaS Black Box

You have a microservices mesh, a Kubernetes cluster, or a fleet of Lambda functions. Somewhere in that stack, something is going to break. When it does, your customers will look for the status page. If your status page is a static index.html file in your repo that a junior dev updates manually, you're already losing. If you sign up for a SaaS status page tool, you're handing over your data, paying monthly per domain, and fighting against their rigid templates.

We built the building-status-page skill so you don't have to maintain a separate repo for status updates or wrestle with SaaS vendor lock-in. This skill generates a production-grade deployment using Uptime Kuma as the monitoring backend and a Next.js dashboard for the frontend. You get a real-time status page that talks directly to your metrics, with iframe embedding security, configurable badges, and validation scripts that run in CI.

The core requirement for any status page is real-time information about the current state of the system ^[3]. Static pages fail this. SaaS tools abstract the data so you can't integrate it with your own observability stack. Our approach gives you the real-time updates you need while keeping the infrastructure under your control. You deploy it once, and it becomes a living artifact of your system's health.

If you're already setting up your monitoring infrastructure, this skill pairs naturally with our monitoring-setup guide to ensure your metrics pipeline is solid before you surface the data to users.

The Trust Tax of Stale Status Pages

When your status page lies, your support team drowns. We've seen engineering teams burn 10–15 hours a month just keeping a static HTML file in sync with actual uptime. That's money down the drain. Worse, you lose customer trust. A status page that fails to provide real-time updates creates uncertainty ^[4]. Customers don't care about your Kubernetes pods; they care if the checkout works.

Consider the cost of a stale page during an outage. Your API gateway is down, but the status page shows "All Systems Operational" because the manual update hasn't happened yet. Support tickets spike. Engineers get paged to fix the status page instead of the outage. This is the "trust tax"—every minute your page is outdated, you're actively damaging your brand.

Best practices for public status pages demand that you talk about problems right away [8]. If you're relying on a static page, you can't do that. You need a system that updates automatically. SaaS tools promise this, but they often lack the granular control you need. You might need to hide internal components from public view, or you might need to customize the incident timeline format to match your brand. With a custom deployment, you get full control over what's shown and how it's rendered.

When an incident occurs, your status page should be the first line of communication, not an afterthought. Integrating with our incident-response workflow ensures that your status page updates are triggered by the same events that page your on-call engineers. This eliminates the lag between detection and communication.

From Stale HTML to Real-Time WebSockets

Imagine a platform engineering team managing a SaaS product with 50 microservices. Before, their status page was a hand-rolled React app that polled a legacy monitoring tool every 5 minutes. The data was stale. During an outage, the page showed "All Systems Operational" for 20 minutes while the API gateway was down. The support queue exploded.

They replaced it with a Uptime Kuma instance and a Next.js dashboard using this skill. Here's what changed:

Deployment: They used docker-compose.yml to spin up Uptime Kuma and the Next.js dashboard in a single command. The compose file includes environment variables for iframe embedding security, so they could safely expose the dashboard to their internal team without leaking sensitive monitoring data.

Automation: They ran scaffold-status-page.sh to automate monitor creation. The script uses Kuma's REST/Push API to create monitors for all 50 services, simulates heartbeats to verify connectivity, and checks badge endpoints. This took 15 minutes instead of the 3 hours it used to take to manually configure the old tool.

Real-Time Updates: The Next.js dashboard uses connection() for dynamic rendering and Suspense for streaming updates. When a component fails, the status page reflects it immediately via WebSockets. No more polling delays.

Validation: They added validate-kuma-config.sh to their CI pipeline. Now, every merge triggers a check that verifies Kuma deployment health, status page availability, and Prometheus metrics format. If the status page is broken, the build fails.

The result? Support tickets dropped by 40% in the first month. The engineering team spent zero hours maintaining the status page UI. They also added historical uptime data and incident timelines, which are essential components for a professional status page [6].

If you're deploying this alongside your application, you'll appreciate how the skill's file structure mirrors modern Next.js patterns. For deeper guidance on real-time dashboards, check out our nextjs-patterns skill, which covers advanced streaming and Server Component data fetching.

What Changes Once the Dashboard Is Live

Once you install this skill, your status page becomes a robust, automated part of your infrastructure. Here's what you get:

• Real-Time Badges: The StatusBadge.tsx component fetches and renders SVG badges from Kuma's Badge API. You can configure styles and embed them in your README, Slack, or internal wikis. Badges update in real-time, giving your team instant visibility.
• Prometheus Metrics: Uptime Kuma exposes Prometheus-compatible metrics out of the box. You can scrape these metrics and feed them into your existing Grafana dashboards. This creates a unified view of your system's health.
• CI/CD Integration: The scaffold-status-page.sh script is designed for CI/CD. You can use it to create monitors during deployment, ensuring that new services are automatically added to the status page. The validate-kuma-config.sh validator ensures your deployment is healthy before you merge.
• Internal and External Support: You can deploy this skill for internal teams ^[5]. Start by identifying key stakeholders and their needs, determining which services to cover, and setting clear goals. The skill's Docker Compose configuration supports both internal and external deployments, with security controls for iframe embedding.
• Curated References: The skill includes references/kuma-api-reference.md and references/nextjs-dashboard-patterns.md. These files provide exact endpoint signatures, Socket.IO events, and Next.js patterns for real-time dashboards. You don't have to hunt for documentation; it's all in the package.

This skill also integrates well with our observability-pack skill. If you need structured logging across services, you can correlate status page incidents with log traces to accelerate debugging.

What's in the building-status-page Skill

Here's the full manifest. Every file is included, tested, and ready to deploy.

• skill.md — Orchestrator skill that defines the workflow for building real-time status pages using Uptime Kuma and Next.js. References all templates, scripts, validators, and references to guide the agent through deployment, integration, and validation.
• templates/docker-compose.yml — Production-grade Docker Compose configuration for Uptime Kuma and a Next.js dashboard. Includes environment variables for iframe embedding security and port mapping.
• templates/nextjs-dashboard/app/page.tsx — Next.js App Router Server Component that fetches Kuma status page data. Uses connection() for dynamic rendering and Suspense for runtime API access.
• templates/nextjs-dashboard/app/components/StatusBadge.tsx — Client-side React component that fetches and renders real-time SVG status badges from Kuma's Badge API with configurable styles.
• scripts/scaffold-status-page.sh — Executable bash script that automates monitor creation via Kuma's REST/Push API, simulates heartbeats, and verifies badge endpoints. Designed for CI/CD or initial setup.
• validators/validate-kuma-config.sh — Programmatic validator that checks Kuma deployment health, status page availability, and Prometheus metrics format. Exits non-zero on any failure.
• references/kuma-api-reference.md — Curated authoritative reference for Uptime Kuma APIs. Includes exact endpoint signatures, Socket.IO events, Push API usage, Badge styles, and PromQL queries from Context7 docs.
• references/nextjs-dashboard-patterns.md — Curated Next.js patterns for real-time dashboards. Covers dynamic rendering with connection(), Suspense boundaries, streaming SSE with ReadableStream, and Server Component data fetching.
• examples/worked-example.md — Step-by-step worked example demonstrating end-to-end deployment: Docker compose up, monitor configuration via script, Next.js dashboard integration, and validation.

If you're also designing your API, our api-design skill ensures your error formats and response structures are consistent across your stack, making it easier to correlate API issues with status page incidents.

Install and Ship

Stop maintaining static HTML. Stop paying for SaaS tools you don't control. Upgrade to Pro to install the building-status-page skill and deploy a real-time status page that your team and customers can trust.

The skill is ready to run. Just install it, run docker-compose up, and let the validation scripts do the rest. You'll have a production-grade status page in minutes, not days.