From arc
Generates tailored production readiness checklist covering domains, DNS, SSL, SEO, security headers, error pages, analytics, monitoring, and deployment based on project stack detection.
npx claudepluginhub howells/arc --plugin arcThis skill uses the workspace's default tool permissions.
<tool_restrictions>
Provides Ktor server patterns for routing DSL, plugins (auth, CORS, serialization), Koin DI, WebSockets, services, and testApplication testing.
Conducts multi-source web research with firecrawl and exa MCPs: searches, scrapes pages, synthesizes cited reports. For deep dives, competitive analysis, tech evaluations, or due diligence.
Provides demand forecasting, safety stock optimization, replenishment planning, and promotional lift estimation for multi-location retailers managing 300-800 SKUs.
<tool_restrictions>
AskUserQuestion — Preserve the one-question-at-a-time interaction pattern at every decision point marked with AskUserQuestion: in the process below. In Claude Code, use the tool. In Codex, ask one concise plain-text question at a time unless a structured question tool is actually available in the current mode. Do not narrate missing tools or fallbacks to the user.
</tool_restrictions><arc_runtime> Arc-owned files live under the Arc install root for full-runtime installs.
Set ${ARC_ROOT} to that root and use ${ARC_ROOT}/... for Arc bundle files such as
references/, disciplines/, agents/, templates/, scripts/, and rules/.
Project-local files stay relative to the user's repository. </arc_runtime>
<progress_context>
Use Read tool: docs/arc/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: stow, 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. Ask each question one at a time:
AskUserQuestion:
question: "Which platforms do you want to verify your site with?"
header: "Site Verification Platforms"
options:
- label: "Google Search Console"
description: "Essential for SEO monitoring and indexing"
- label: "Bing Webmaster Tools"
description: "Bing and Yahoo search visibility"
- label: "Pinterest"
description: "Enable Rich Pins and site analytics"
- label: "Twitter/X"
description: "Twitter analytics and card validation"
- label: "Facebook/Meta"
description: "Domain verification for ads and insights"
- label: "Yandex"
description: "Russian search engine visibility"
- label: "None of these"
description: "Skip site verification setup"
AskUserQuestion:
question: "What social sharing features do you need?"
header: "Social Sharing"
options:
- label: "OG images for all pages"
description: "Dynamic or static Open Graph images for every page"
- label: "Twitter Cards"
description: "Summary or large image cards for Twitter/X"
- label: "LinkedIn sharing"
description: "Optimized previews for LinkedIn posts"
- label: "Pinterest Rich Pins"
description: "Enhanced pins with metadata from your site"
- label: "None"
description: "Skip social sharing setup"
AskUserQuestion:
question: "Will you send email from a custom domain (e.g., hello@yourdomain.com)?"
header: "Email Domain"
options:
- label: "Yes, custom domain"
description: "Need SPF/DKIM/DMARC DNS records for deliverability"
- label: "No, provider domain"
description: "Using the email provider's default sending domain"
- label: "Not sending email"
description: "No transactional or marketing email"
AskUserQuestion:
question: "What compliance requirements apply to your project?"
header: "Compliance"
options:
- label: "GDPR"
description: "Required if you have EU users — consent, data rights, DPA"
- label: "CCPA"
description: "Required for California users — opt-out, disclosure"
- label: "Cookie consent banner"
description: "Banner with accept/reject before setting non-essential cookies"
- label: "Accessibility (WCAG 2.1)"
description: "Web accessibility compliance — audit and statement"
- label: "None"
description: "No specific compliance requirements"
AskUserQuestion:
question: "What type of launch is this?"
header: "Launch Type"
options:
- label: "Soft launch"
description: "Limited audience, no SEO push, testing in production"
- label: "Public launch"
description: "Full SEO, marketing, and social sharing"
- label: "Migration"
description: "Replacing an existing site — redirects and DNS cutover 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:
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, flag it as a checklist item for the user to address. Consider using a service like Termly, iubenda, or consulting a lawyer for production-ready legal pages.
pnpm tsc --noEmit)pnpm biome check . or eslint)/arc:audit pre-pr run/arc:audit --harden run for UI-heavy launchesAudit 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 for product name casing:
AskUserQuestion:
question: "What is the exact casing for your product name? This will be used to find and fix inconsistencies across the codebase."
header: "Brand Name Casing"
options:
- label: "PascalCase (e.g., MyApp)"
description: "Each word capitalized, no spaces"
- label: "camelCase (e.g., myApp)"
description: "First word lowercase, rest capitalized"
- label: "ALL CAPS (e.g., MYAPP)"
description: "Every letter uppercase"
- label: "lowercase (e.g., myapp)"
description: "Every letter lowercase"
- label: "Custom casing"
description: "Something else — I'll type it out"
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:
rules/interface/for detailed rules on each item.
For each unchecked item relevant to this project:
AskUserQuestion:
question: "[Explanation of what's missing and why it matters]"
header: "Gap: [Item Name]"
options:
- label: "Implement it"
description: "I'll build this now"
- label: "Show me steps"
description: "Provide step-by-step instructions for me to do manually"
- label: "Skip for now"
description: "Defer this to a follow-up task"
# 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: ${ARC_ROOT}/references/arc-log.md
Entry: /arc:letsgo — [Deployed to URL / Checklist complete]
</arc_log>
<success_criteria> Letsgo is complete when: