Menu
Bootstrap Astro Site
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Add a "non-production" environment banner to a Phoenix 1.8 app — a sticky bar at the top of every page that warns developers the app is not production. Adds a config entry for the production host, a reusable function component + helpers in the web Layouts module, and renders the banner in every root layout. Detection is host-based (or Mix-env based) and asks for configuration like the production host. Checks what already exists and only adds missing pieces. Use when the user says "env banner", "environment banner", "dev banner", "staging banner", "non-production bar", "not in production banner", or wants a warning bar shown everywhere except production.
Bootstrap account user management UI and backend in a Phoenix 1.8 app. Adds LiveView for listing, inviting, and removing account members with role-based access control. Builds on top of bootstrap-accounts. Use when the user says "bootstrap user management", "add user management", "account users", "invite users", "member management", "manage account members", or wants to add user invitation and role management to an account-scoped Phoenix app.
Inspect OpenSpec artifacts for gaps, correctness, consistency, and codebase alignment. Dispatches subcommands via `/inspector [subcommand] [args]`. Use when the user says "/inspector review", "inspect change", "audit the spec", "/inspector review-update", "review and fix", "/inspector sync-linear", "/inspector commits", "check commits against specs", "/inspector reconcile", "reconcile specs", "sync specs to code", "/inspector explain", "explain the change", "/inspector mockups", "generate mockups", "wireframe the change", "/inspector flows", "generate flow diagrams", "workflow diagrams", "/inspector review-work", "verify and review", or asks to sanity-check, critique, find gaps, generate UI mockups, process flow diagrams, or verify implementation.
Bootstrap Phoenix Application
Set up and configure GoodIssuesReporter in Elixir/Phoenix applications. Dispatches subcommands via `/goodissues-reporter [subcommand]`. Use when the user says '/goodissues-reporter bootstrap', '/goodissues-reporter help', 'add goodissues reporter', 'setup error reporting', 'add goodissues monitoring', or wants to integrate GoodIssuesReporter into a Phoenix app.
Publish a release by running `just publish`. Use when the user says '/publish', 'publish release', 'cut a release', 'release', 'tag and release', or wants to build, tag, and publish a new version.
| name | bootstrap-astro |
| description | Bootstrap Astro Site |
Bootstrap a new Astro site in this directory with:
Use bun to create the Astro project:
bun create astro@latest . --template minimal --typescript strict --git --install
When prompted:
minimalstrictyesyesbun add @astrojs/react @astrojs/sitemap @astrojs/partytown
bun add react react-dom
bun add tailwindcss @tailwindcss/vite
bun add --dev tidewave
File: astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import sitemap from '@astrojs/sitemap';
import partytown from '@astrojs/partytown';
import tailwindcss from '@tailwindcss/vite';
import tidewave from 'tidewave/vite-plugin';
export default defineConfig({
site: 'https://your-domain.com', // UPDATE THIS
integrations: [
react(),
sitemap(),
partytown({
config: {
forward: ['dataLayer.push'], // Required for Google Analytics
},
}),
],
vite: {
plugins: [
tailwindcss(),
tidewave(), // AI agent integration (dev only)
],
},
});
File: src/styles/global.css
@import "tailwindcss";
/* Custom base styles */
@layer base {
html {
@apply antialiased;
}
body {
@apply min-h-screen bg-white text-gray-900;
}
}
/* Custom component styles */
@layer components {
.btn {
@apply px-4 py-2 rounded-lg font-medium transition-colors;
}
.btn-primary {
@apply bg-blue-600 text-white hover:bg-blue-700;
}
}
File: src/layouts/Layout.astro
---
import '../styles/global.css';
import GoogleAnalytics from '../components/GoogleAnalytics.astro';
interface Props {
title: string;
description?: string;
}
const { title, description = 'Default description for your site' } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>{title}</title>
<GoogleAnalytics />
</head>
<body>
<slot />
</body>
</html>
File: src/components/GoogleAnalytics.astro
---
// Google Analytics component using Partytown for performance optimization
// Only loads in production to prevent development traffic from skewing analytics
const GA_MEASUREMENT_ID = 'G-XXXXXXXXXX'; // Replace with your GA4 Measurement ID
---
{import.meta.env.PROD && (
<>
<!-- Google tag (gtag.js) with Partytown -->
<script
is:inline
type="text/partytown"
src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
></script>
<script is:inline type="text/partytown" define:vars={{ GA_MEASUREMENT_ID }}>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', GA_MEASUREMENT_ID);
</script>
</>
)}
File: astro.config.node.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import sitemap from '@astrojs/sitemap';
import partytown from '@astrojs/partytown';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
site: 'https://your-domain.com', // UPDATE THIS
// CRITICAL: Always use trailing slashes to prevent nginx port leakage
trailingSlash: 'always',
integrations: [
react(),
sitemap(),
partytown({
config: {
forward: ['dataLayer.push'],
},
}),
],
vite: {
plugins: [tailwindcss()],
},
});
File: package.json (scripts section)
{
"scripts": {
"dev": "astro dev",
"build": "astro check && astro build",
"preview": "astro preview",
"check": "astro check"
}
}
File: config/deploy.yml
# Kamal deployment configuration
service: your-app-name # UPDATE THIS
# Docker image name - update with your GitHub username
image: ghcr.io/your-username/your-app-name # UPDATE THIS
# Production servers
servers:
web:
- 123.456.789.012 # UPDATE with your server IP
# GitHub Container Registry configuration
registry:
server: ghcr.io
username: your-github-username # UPDATE THIS
password:
- GITHUB_TOKEN
# Build configuration
builder:
arch: amd64
# Environment variables
env:
clear:
NODE_ENV: production
# Kamal proxy configuration with SSL
proxy:
host: your-domain.com # UPDATE THIS
app_port: 3022
ssl: true
healthcheck:
path: /health
interval: 3
timeout: 3
# SSH configuration
ssh:
user: root
keys: ["~/.ssh/id_rsa"]
# Retain last 5 deployed containers for quick rollbacks
retain_containers: 5
# Logging
logging:
driver: json-file
options:
max-size: "10m"
max-file: "3"
File: Dockerfile
# Build stage
FROM node:20-alpine AS builder
WORKDIR /app
# Install git (required by npm for some dependencies)
RUN apk add --no-cache git
# Copy package files
COPY package.json bun.lock* package-lock.json* ./
# Install dependencies
RUN npm install || bun install
# Copy source code
COPY . .
# Build the application using Docker-specific config
RUN npm run build -- --config astro.config.node.mjs
# Runtime stage - use nginx to serve static files
FROM nginx:alpine
# Install curl for healthcheck
RUN apk add --no-cache curl
# Copy built static files from builder
COPY --from=builder /app/dist /usr/share/nginx/html
# Copy custom nginx server configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf
# Expose port 3022
EXPOSE 3022
# Start nginx
CMD ["nginx", "-g", "daemon off;"]
File: nginx.conf
server {
listen 3022;
server_name _;
root /usr/share/nginx/html;
index index.html;
# Trust X-Forwarded headers from Kamal proxy
real_ip_header X-Forwarded-For;
set_real_ip_from 0.0.0.0/0;
# CRITICAL: Prevent port from appearing in redirects
port_in_redirect off;
absolute_redirect off;
# Gzip compression for better performance
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_vary on;
# Security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
# Health check endpoint
location /health {
access_log off;
return 200 "healthy\n";
add_header Content-Type text/plain;
}
# Handle client-side routing and static files
location / {
try_files $uri $uri/ $uri.html /index.html;
}
# Optimize static asset caching
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
access_log off;
}
# Ensure proper handling of HTML files (no caching)
location ~* \.html$ {
expires -1;
add_header Cache-Control "no-cache, no-store, must-revalidate";
}
# Handle sitemap
location = /sitemap-index.xml {
add_header Content-Type application/xml;
}
location = /sitemap-0.xml {
add_header Content-Type application/xml;
}
}
File: .dockerignore
node_modules
.git
.gitignore
.env
.env.*
dist
.astro
*.md
.vscode
.idea
.DS_Store
File: .env.example
# GitHub Container Registry Token
# Create at: https://github.com/settings/tokens
# Required scopes: write:packages, read:packages, delete:packages
GITHUB_TOKEN=ghp_your_github_personal_access_token_here
File: src/pages/index.astro
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Welcome" description="Your site description here">
<main class="min-h-screen flex items-center justify-center">
<div class="text-center">
<h1 class="text-4xl font-bold text-gray-900 mb-4">
Welcome to Your Site
</h1>
<p class="text-lg text-gray-600 mb-8">
Built with Astro, Tailwind CSS, and ready for deployment.
</p>
<a href="#" class="btn btn-primary">
Get Started
</a>
</div>
</main>
</Layout>
After running this command, you should have:
Search and replace these values in your project:
| Placeholder | Description | Example |
|---|---|---|
your-domain.com | Your production domain | example.com |
your-app-name | Service/app name | my-awesome-app |
your-username | GitHub username | johndoe |
your-github-username | GitHub username | johndoe |
123.456.789.012 | Server IP address | 165.232.128.50 |
G-XXXXXXXXXX | GA4 Measurement ID | G-ABC123DEF4 |
# Start dev server
bun dev
# Build for production
bun run build
# Preview production build
bun run preview
# Type check
bunx astro check
# Install Kamal (one-time)
gem install kamal
# First-time deployment
kamal setup
# Subsequent deployments
kamal deploy
# View logs
kamal app logs -f
# Rollback
kamal rollback [VERSION]
Note: This command sets up a complete Astro project structure. After running, update all placeholder values and configure your domain, server IPs, and Google Analytics ID.