← ClaudeAtlas

iblai-vibe-monetization-subscriptionlisted

Build the user-facing PurchasesTab inside the Profile page — list, detail, and cancel for the current user's subscriptions on a Platform. Use when the user mentions purchases, my subscriptions, subscription list, cancel subscription, stripe portal, grandfathered, legacy subscription, subscription detail, or cancel-at-period-end. See /iblai-vibe-monetization for the family index + auth + RBAC, /iblai-vibe-monetization-checkout for how the user got here (paywall, checkout, callback), /iblai-vibe-monetization-analytics for the admin subscriber view, /iblai-vibe-profile for the Profile shell that hosts this tab, and /iblai-vibe-auth for the token wiring.
iblai/vibe · ★ 15 · AI & Automation · score 76
Install: claude install-skill iblai/vibe
# /iblai-vibe-monetization-subscription Wire the post-purchase surface inside the Profile page: a paginated, searchable list of the current user's subscriptions, a detail view per subscription, and a cancel flow that branches between an immediate cancel and a Stripe Customer Portal redirect. The SDK ships `PurchasesTab` — Profile renders it automatically when the Platform has monetization enabled — so most of the work is wiring, not UI. Do NOT add custom styles, colors, or CSS overrides to ibl.ai SDK components. They ship with their own styling. Keep the components as-is. Do NOT implement dark mode unless the user explicitly asks for it. When building custom UI around SDK components, use the ibl.ai brand: - **Primary**: `#0058cc`, **Gradient**: `linear-gradient(135deg, #00b0ef, #0058cc)` - **Button**: `bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white` - **Font**: System sans-serif stack, **Style**: shadcn/ui new-york variant - Follow the component hierarchy: use ibl.ai SDK components (`@iblai/iblai-js`) first, then shadcn/ui for everything else (`npx shadcn@latest add <component>`). Do NOT write custom components when an ibl.ai or shadcn equivalent exists. Both share the same Tailwind theme and render in ibl.ai brand colors automatically. - Follow [BRAND.md](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/BRAND.md) for colors, typography, spacing, and component styles. You MUST run `/iblai-vibe-ops-test` before telling the user the work is re