Production readiness checklist covering domains, SEO, security, and deployment. Use when asked to "ship it", "deploy to production", "go live", "launch", or when preparing a project for production deployment.
Generates tailored production readiness checklists by analyzing codebases and user requirements for deployment.
/plugin marketplace add howells/arc/plugin install arc@howellsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
<progress_context>
Use Read tool: docs/progress.md (first 50 lines)
Check what's been done recently — ensures nothing is missed before shipping. </progress_context>
Prepare a codebase for production. Generates a tailored checklist based on project detection and user input—not a generic one-size-fits-all list.
Scan the codebase to understand what's present. Look for:
Detection signals:
├── Framework: package.json (next, remix, astro, etc.)
├── Auth: auth libraries, OAuth config, session handling
├── Payments: stripe, paddle, lemon-squeezy
├── Email: resend, sendgrid, postmark, nodemailer
├── Database: prisma, drizzle, supabase, planetscale
├── Analytics: GA, mixpanel, posthog, plausible
├── i18n: next-intl, i18next, locale files
├── CMS: sanity, contentful, payload
├── File uploads: uploadthing, cloudinary, S3 config
└── Existing meta: robots.txt, sitemap, og images
Report findings:
## Project Detection
**Framework:** Next.js 14 (App Router)
**Detected features:**
- ✓ Authentication (NextAuth with Google, GitHub providers)
- ✓ Payments (Stripe)
- ✓ Database (Prisma + PostgreSQL)
- ✓ Email (Resend)
- ✗ i18n (not detected)
- ✗ Analytics (not configured)
**Existing production config:**
- ✓ robots.txt present
- ✗ sitemap.xml missing
- ✗ Site verification meta tags missing
Ask the user to fill gaps detection can't cover:
**Questions to scope your checklist:**
1. **Target platforms for site verification?**
- [ ] Google Search Console
- [ ] Bing Webmaster Tools
- [ ] Pinterest
- [ ] Twitter/X
- [ ] Facebook/Meta
- [ ] Yandex
- [ ] Other: ___
2. **Social sharing requirements?**
- [ ] Need OG images for all pages
- [ ] Twitter Cards (summary vs large image)
- [ ] LinkedIn sharing
- [ ] Pinterest Rich Pins
3. **Email sending from custom domain?**
- [ ] Yes (need SPF/DKIM/DMARC DNS records)
- [ ] No (using provider's domain)
4. **Compliance requirements?**
- [ ] GDPR (EU users)
- [ ] CCPA (California)
- [ ] Cookie consent banner
- [ ] Accessibility (WCAG 2.1)
5. **Launch type?**
- [ ] Soft launch (limited audience)
- [ ] Public launch (SEO, marketing)
- [ ] Migration (redirects needed)
Based on detection + user input, generate ONLY relevant sections:
<!-- Google Search Console -->
<meta name="google-site-verification" content="..." />
<!-- Bing Webmaster -->
<meta name="msvalidate.01" content="..." />
<!-- Pinterest -->
<meta name="p:domain_verify" content="..." />
<!-- Twitter/X (for analytics, not cards) -->
<meta name="twitter:site:id" content="..." />
<!-- Facebook/Meta domain verification -->
<meta name="facebook-domain-verification" content="..." />
<!-- Yandex -->
<meta name="yandex-verification" content="..." />
Checklist:
Reference:
${CLAUDE_PLUGIN_ROOT}/rules/seo.mdfor full SEO rules.
<html lang="..."> attribute set<meta name="viewport"> present<h1> per page, logical heading hierarchyalt textnoindex on production marketing pages (check for Vercel preview leftover)For a comprehensive SEO audit, run /arc:seo.
Next.js OG Image Generation (Recommended for Next.js projects):
Offer to set up dynamic OG images using Next.js built-in ImageResponse:
// app/og/route.tsx - Dynamic OG image generation
import { ImageResponse } from 'next/og'
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const title = searchParams.get('title') ?? 'Default Title'
return new ImageResponse(
(
<div style={{ /* your design */ }}>
<h1>{title}</h1>
</div>
),
{ width: 1200, height: 630 }
)
}
Then reference in metadata:
// app/layout.tsx or page.tsx
export const metadata: Metadata = {
openGraph: {
images: ['/og?title=Your+Page+Title'],
},
}
⚠️ OG Image Design Quality:
OG images are often the first impression of your product. Avoid:
Use /arc:design to create distinctive OG image designs that match your brand and stand out in social feeds. The OG image should feel like part of your product, not an afterthought.
Good OG images have:
Next.js Metadata API (Recommended for Next.js projects):
Next.js can auto-generate favicons from a single source. Offer to set up:
app/
├── icon.tsx # Dynamic favicon (uses ImageResponse)
├── icon.png # Or static favicon (auto-detected)
├── apple-icon.png # Apple touch icon (auto-detected)
└── opengraph-image.tsx # Dynamic OG image per route
Example dynamic favicon:
// app/icon.tsx
import { ImageResponse } from 'next/og'
export const size = { width: 32, height: 32 }
export const contentType = 'image/png'
export default function Icon() {
return new ImageResponse(
(
<div style={{
fontSize: 24,
background: '#000',
color: '#fff',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 4,
}}>
A
</div>
),
{ ...size }
)
}
⚠️ Favicon Design Quality:
Favicons appear in browser tabs, bookmarks, and home screens. Avoid:
Use /arc:design for favicon concepts if you don't have a dedicated icon mark. Good favicons:
next build output)Font Rendering & Body Classes:
Ensure the <body> has proper font rendering classes for crisp text:
// Tailwind CSS
<body className="antialiased">
// Or with more control:
<body className="antialiased text-base leading-relaxed text-foreground bg-background">
If not using Tailwind, add equivalent CSS:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
Additional body-level considerations:
antialiased class applied (smoother fonts on macOS/iOS)overflow-x-hidden on html/body if using full-bleed sectionsscroll-behavior: smooth if desired (or Tailwind scroll-smooth)min-h-screen on body/main for proper footer positioningIf React/Next.js and vercel-react-best-practices skill available:
Invoke skill: vercel-react-best-practices
"Review performance patterns. Check: component rendering, data fetching, bundle optimization"
If React Native/Expo and vercel-react-native-skills skill available:
Invoke skill: vercel-react-native-skills
"Review React Native production readiness. Check: list performance, animation optimization, memory leaks, native module usage, Expo config"
pnpm audit shows no critical vulnerabilitiesIf handling sensitive data:
Required Documents:
Cookie Consent:
GDPR Compliance (if EU users):
Accessibility:
If legal documents are missing, offer to generate them:
Invoke skill: /arc:legal
"Generate Privacy Policy, Terms of Service, and Cookie Policy for this project"
This will detect data collection, gather business info, and create template pages.
pnpm tsc --noEmit)pnpm biome check . or eslint)/arc:audit --hygiene run (no code artifacts)Audit all brand touchpoints for consistency:
Logo usage:
Brand name casing:
Common brand casing mistakes to check:
WRONG → CORRECT
Github → GitHub
Javascript → JavaScript
Typescript → TypeScript
NextJS/Nextjs → Next.js
NodeJS/Nodejs → Node.js
VSCode → VS Code
MacOS → macOS
iOS (correct) → iOS (not IOS)
PostgreSQL → PostgreSQL (not Postgres in formal contexts)
MongoDB → MongoDB (not Mongo in formal contexts)
LinkedIn → LinkedIn (not Linkedin)
YouTube → YouTube (not Youtube)
PayPal → PayPal (not Paypal)
Grep for inconsistencies:
# Find potential casing issues (case-insensitive search, then review)
grep -ri "github\|javascript\|typescript\|nextjs\|nodejs" --include="*.tsx" --include="*.ts" --include="*.md" | grep -v node_modules
Brand colors:
Typography:
Voice & messaging:
Ask user: "What is the exact casing for your product name? (e.g., 'MyApp', 'myApp', 'MYAPP')"
Then grep the codebase for variations and fix any inconsistencies.
/arc:responsive if not done already)tabular-nums, no font-weight changes on hover)prefers-reduced-motion support@media (hover: hover)aria-labeltext-base (16px+) to prevent iOS zoomtransition: all — specify exact propertiesisolation: isolateAlertDialog, not confirm())Reference:
${CLAUDE_PLUGIN_ROOT}/rules/interface/for detailed rules on each item.
For each unchecked item relevant to this project:
# Build production
pnpm build
# Run tests
pnpm test
# Check for issues
pnpm tsc --noEmit
pnpm biome check .
# Check bundle for secrets (manual review)
# Look for API keys, tokens, passwords in build output
If all relevant checks pass:
# Deploy via Vercel CLI
vercel --prod
# Or via git (if Vercel GitHub integration set up)
git push origin main
If vercel:deploy skill is available:
Invoke skill: vercel:deploy
This handles the deployment workflow with proper verification.
<tasklist_update> If follow-up work is identified, use TaskCreate:
<arc_log>
After completing this skill, append to the activity log.
See: ${CLAUDE_PLUGIN_ROOT}/references/arc-log.md
Entry: /arc:letsgo — [Deployed to URL / Checklist complete]
</arc_log>
<success_criteria> Letsgo is complete when:
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.