bootstrap-env-banner

Adds a non-production warning banner to Phoenix 1.8 HEEx layouts.

1|Updated May 7, 2026
One-click install
npx skills add https://github.com/agoodway/GoodSkills --skill bootstrap-env-banner
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bootstrap-env-banner
Source: https://github.com/agoodway/GoodSkills/tree/main/skills/bootstrap-env-banner
Command: npx skills add https://github.com/agoodway/GoodSkills --skill bootstrap-env-banner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents developers and reviewers from confusing a non-production deployment with production by adding an unmistakable, consistent warning banner across the entire Phoenix app.

Core Features & Use Cases

  • Host-based environment detection: Shows the banner on every host except the canonical production hostname, and supports a configurable production host for correct multi-host behavior.
  • Phoenix 1.8 HEEx layout integration: Adds a reusable function component plus helpers in your web Layouts module and renders the banner in every root layout.
  • Safe incremental behavior: Audits the existing app first (banner presence, root layouts, and top sticky/fixed chrome) and only adds missing pieces while guiding user confirmation.
  • Sticky offset handling: Detects fixed/sticky top elements and applies a conditional offset so the banner never overlaps top chrome.

Quick Start

Install the skill, then follow the prompts by choosing your detection strategy and providing the canonical production host so the banner appears everywhere except production.

Frequently Asked Questions about bootstrap-env-banner

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

FAQPage Schema
How do I add a non-production warning banner to a Phoenix HEEx layout?

To add a non-production warning banner to a Phoenix HEEx layout, you can use a skill that injects a reusable function component into your Layouts module and renders it across all root layouts to prevent environment confusion.

How does host-based environment detection work for dev staging safety in Phoenix?

Host-based environment detection for dev staging safety works by comparing the current request hostname against a configurable canonical production host, displaying the warning banner on every non-production environment.

Can I apply a top offset for sticky headers when displaying an environment banner?

Yes, you can apply a conditional top offset for sticky or fixed header elements, auditing your existing root layouts to ensure the non-production environment banner never overlaps your top chrome.

Does the environment banner support mix-env based detection for Phoenix applications?

Yes, the environment banner supports mix-env based detection alongside host-based detection, allowing you to choose your preferred strategy to safely activate non-production warnings during development and staging.

What is the safest way to incrementally add a non-production banner to an existing Phoenix app?

The safest way to incrementally add a non-production banner is by auditing existing banners and root layouts first, then adding only the missing Layouts helpers and components while guiding user confirmation.