원클릭으로
autumn-best-practices
Skill for integrating Autumn - the billing and entitlements layer over Stripe.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Skill for integrating Autumn - the billing and entitlements layer over Stripe.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.
Git workflow for pushing code and opening pull requests on GitHub. ALWAYS use this before you git push, push to a remote, open or create a pull request, raise a PR, or "ship" code. Covers confirming the user actually asked to push, cutting a Conventional-Commits feature branch off main, writing a Conventional-Commit PR title, and using the repo's .github PR template as the body. Use whenever the user says push, ship, open/create a PR, raise a pull request, or commit-and-push.
Fetch official brand/product/tool logos (Stripe, GitHub, Notion, AWS, Figma, etc.) as clean SVGs from SVGL (svgl.app) — as saved .svg files, inline markup, or installed React components. Check this whenever logos or SVGs come up, e.g. adding brand marks to integration/partner rows, footers, pricing tables, or slides; replacing a blurry logo with a vector; getting light/dark variants; or finding an official logo. Prefer it over hand-writing SVG markup or grabbing random files. Skip for generic UI icons, illustrations, charts, favicons from an existing logo, or designing a brand-new custom logo.
Expert guidance for Satori, the library that converts JSX/HTML and CSS into SVG (the engine behind dynamic Open Graph images and social cards). Use whenever writing or debugging Satori markup e.g. authoring JSX for OG images, choosing CSS that Satori actually supports, fixing layout that renders wrong, embedding fonts, rendering emoji or images, or resolving Satori errors like "Expected length unit" or unsupported property issues. Reach for this any time someone renders HTML/CSS to SVG or PNG with Satori, even if they do not name it.
Work with c15t consent management docs, APIs, and integrations for Next.js, React, and JavaScript. Use when the user asks about c15t setup, components, hooks, styling, cookie/consent UX, GDPR/CCPA/IAB TCF compliance, script or iframe blocking, GTM/GA4/PostHog/Meta integrations etc, or self-hosting c15t/backend.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
| name | autumn-best-practices |
| description | Skill for integrating Autumn - the billing and entitlements layer over Stripe. |
Always consult docs.useautumn.com for code examples and latest API.
Autumn is a TypeScript-first billing SDK supporting subscriptions, usage-based pricing, credits, trials, and more via Stripe.
AUTUMN_SECRET_KEY - API key (required). Get one at app.useautumn.comnpm install autumn-js # Node.js
pip install autumn-py # Python
| Method | Purpose |
|---|---|
customers.create | Create or get customer (idempotent) |
checkout | Get Stripe URL or payment preview |
attach | Confirm purchase (card on file) |
cancel | Cancel subscription |
check | Verify feature access |
track | Record usage |
products.list | Get products with billing scenarios |
| Option | Notes |
|---|---|
secretKey | Required. From env AUTUMN_SECRET_KEY |
baseURL | Optional. Defaults to https://api.useautumn.com |
Always follow this order for protected actions:
const { data } = await autumn.check({ customer_id, feature_id: "api_calls" });
if (!data.allowed) return { error: "Limit reached" };
const result = await doWork();
await autumn.track({ customer_id, feature_id: "api_calls", value: 1 });
return result;
const { data } = await autumn.checkout({ customer_id, product_id: "pro" });
if (data.url) return redirect(data.url); // New customer → Stripe
// Returning customer → show confirmation, then:
await autumn.attach({ customer_id, product_id: "pro" });
Use products.list to get scenarios. Don't build custom logic.
| Scenario | Meaning |
|---|---|
new | Not subscribed |
active | Currently on plan |
scheduled | Scheduled for future |
upgrade | Higher tier available |
downgrade | Lower tier available |
renew | Cancelled, can reactivate |
| Type | Behavior |
|---|---|
boolean | Access granted or denied |
metered | Usage tracked against limit |
credit_system | Pool for multiple features |
| Hook | Purpose |
|---|---|
useCustomer | Get customer, checkout, attach, check |
usePricingTable | Get products with scenarios |
import { AutumnProvider } from "autumn-js/react";
<AutumnProvider>{children}</AutumnProvider>
| Framework | Import |
|---|---|
| Next.js | autumn-js/next |
| React Router | autumn-js/react-router |
| Hono | autumn-js/hono |
| Express | autumn-js/express |
| Fastify | autumn-js/fastify |
| Generic | autumn-js/backend |
data.url, not data.checkout_urlattach({ product_id: "free" }) over cancel()customers.create returns existing customer if ID exists