Installation

bun install -g @anthropic-ai/claude-code

# utilsio Integration Standards

## Project
- Next.js app with App Router
- Using utilsio for monetization
- Reference: https://github.com/utilsio/templates/tree/main/nextjs

## Security Requirements
- HMAC-SHA256 signing for all requests
- Never expose UTILSIO_APP_SECRET to client
- Proper environment variable handling
- Input validation on signing endpoint

## Code Standards
- TypeScript with strict type safety
- Proper error handling and logging
- Loading states for async operations
- Test all generated code

## Utilsio Integration
- Use @utilsio/react for client components
- Use @utilsio/react/server for backend
- Always validate deviceId
- Include timestamp in signatures

claude "Create a secure signing endpoint at src/app/api/sign/route.ts.
Use the utilsio documentation from https://utilsio.dev/docs.
Requirements:
- HMAC-SHA256 signing with @utilsio/react/server
- Input validation for deviceId
- Error handling and logging
- Security headers to prevent caching
- Only accept POST requests"

claude "Generate a UtilsioProvider component that:
1. Wraps my app with <UtilsioProvider>
2. Calls /api/sign from getAuthHeadersAction
3. Handles loading and error states
4. Is reusable across multiple pages
Use this template as reference: 
https://github.com/utilsio/templates/nextjs/src/app/layout.tsx"

claude "Create a subscription management component using useUtilsio hook.
Features:
- Show current subscription status
- Display amount per day and estimated monthly
- Subscribe button with redirectToConfirm
- Cancel button with confirmation dialog
- Handle loading and error states
- Display when not logged in
Reference: /sdks/react/client"

Build a complete subscription system for my Next.js app using utilsio.

I have:
- Next.js 14 with App Router
- No subscriptions yet
- Need to charge $10/month for premium

Deliver:
1. src/app/api/sign/route.ts - Signing endpoint
2. src/app/layout.tsx - UtilsioProvider setup
3. src/components/SubscriptionWidget.tsx - UI component
4. src/app/success/page.tsx - Success redirect
5. src/app/cancelled/page.tsx - Cancelled redirect

Use this as reference: https://github.com/utilsio/templates/tree/main/nextjs

Each file should include:
- Full TypeScript types
- Error handling
- Comments explaining security
- Loading states

Generate tests for my utilsio subscription components.

Create tests for:
1. SubscriptionWidget - mounting, loading, states
2. useUtilsio hook behavior
3. Signing route - valid/invalid inputs
4. Provider initialization
5. Error scenarios

Use Jest and React Testing Library.

Document the utilsio integration I just built.

Create:
1. How to configure environment variables
2. How to use SubscriptionWidget
3. Common issues and solutions
4. Security considerations
5. Performance tips

claude "Generate subscription management UI with multiple components.

Features:
- Display current subscription status
- Show pricing and subscription details
- Subscribe button that redirects to confirmation
- Cancel subscription with confirmation dialog
- Integration with provider

Files to create:
1. src/components/SubscriptionStatus.tsx - Status display
2. src/components/SubscribeButton.tsx - Subscribe action
3. src/components/PricingInfo.tsx - Pricing display
4. src/lib/pricing.ts - Price calculations

Use utilsio templates from: https://github.com/utilsio/templates/nextjs
Reference: /templates/nextjs/quickstart and /sdks/react/client"

claude "Integrate utilsio with my existing authentication.

I use [NextAuth / Clerk / Auth0 - choose one].
When user logs in:
1. Authenticate with [auth provider]
2. Get or create utilsio user
3. Link subscription to my user
4. Store subscription status in database

Show me:
- How to structure the flow
- Database schema for subscriptions
- Code to sync subscription status
"

claude "My utilsio signing endpoint returns errors.
Error: [paste error message]
Endpoint code: [paste code]
Environment: [paste relevant env vars setup]

Debug and fix:
1. Check environment variable handling
2. Verify HMAC signing
3. Validate input
4. Add detailed logging
"

claude "My UtilsioProvider isn't working.
Error in console: [paste error]
My code: [paste provider code]

Check:
1. Environment variables passed correctly
2. getAuthHeadersAction function
3. Provider wrapping in layout
4. Client component directive
"

claude "Add custom pricing logic to my utilsio integration.

Rules:
- Basic plan: $5/month (0.167/day)
- Pro plan: $15/month (0.5/day)  
- Enterprise: Custom (contact sales)

Implement:
1. Pricing constants file with plan definitions
2. Pricing page showing all plans
3. Subscribe function that takes plan selection
4. Display function showing current user's plan

Note: utilsio only supports one active subscription per device. 
To change plans, users must cancel and resubscribe.
"

claude "Add subscription tracking to my app's database.

Track events in your own database:
- When user subscribes (timestamp, user ID, amount)
- When user cancels (timestamp, user ID)
- Current subscription status

Note: utilsio doesn't provide webhooks, so you'll manually sync when the SDK loads subscription info.

Implement:
1. Database schema for subscription events
2. Effect hook to track subscription changes from useUtilsio
3. Queries to calculate MRR from your tracked data
4. Admin page showing subscription metrics from your database

Remember: You're tracking utilsio events in YOUR database, not receiving webhooks from utilsio.
"

claude "Add subscription event handlers to my app.

When subscription status changes in the useUtilsio hook:
1. Hook detects the change
2. Call my backend endpoint to log the event
3. Update my database
4. Send notification email if needed
5. Invalidate cache/refresh dashboard

Implement:
1. useEffect hook in component to watch for subscription changes
2. src/app/api/events/subscription/route.ts to log events
3. Database schema for subscription events
4. Email notification service

Note: utilsio uses client-side SDK only, not webhooks. You manually capture and sync subscription changes.
"

claude "Here's my current setup:
[paste relevant files]
Now [your request]"

claude "Using the utilsio docs at https://utilsio.dev/docs,
specifically the /templates/nextjs/quickstart and /sdks/react/client pages,
[your specific request]"

claude "In the code you just generated, explain:
1. Why did you use [X approach]?
2. What are the security implications?
3. How would this scale with 1M users?"

claude "The code you generated works, but:
1. Add better error handling for [scenario]
2. Improve performance by [specific concern]
3. Add types for [missing types]"

claude "Add a subscription status indicator to my navigation bar.

Show:
- User's email
- 'Premium' badge if subscribed
- Monthly cost next to email
- Dropdown menu with option to manage subscription

Match my existing design (use Tailwind CSS).
Reference: https://github.com/utilsio/templates/nextjs
"

claude "Create an admin dashboard for subscription monitoring.

Show:
- Total active subscriptions count
- Total monthly recurring revenue (MRR)
- List of active subscriptions with user info and amounts
- Subscription change history
- Export subscription data to CSV

Use Chart.js for visualizations.
Create: src/app/admin/subscriptions/page.tsx

Note: This reads from your own database where you're tracking subscription events, not directly from utilsio.
"