Add Feature Skill

Add or configure optional features and integrations in this template.

Trigger

Use this skill when: user says "add [feature]", "enable [integration]", "setup [service]", or mentions specific integrations (payments, analytics, email, etc.)

Available Features

1. Payments (LemonSqueezy)

Enable:

1. •Sign up at lemonsqueezy.com
2. •Get API key from Settings → API
3. •Add to .env.local:
   code

   LEMONSQUEEZY_API_KEY=your_api_key
   LEMONSQUEEZY_STORE_ID=your_store_id
   LEMONSQUEEZY_WEBHOOK_SECRET=your_webhook_secret
   

4. •Create products/variants in LemonSqueezy dashboard
5. •Update lib/config/site.ts pricing tiers with variant IDs
6. •The webhook at /api/webhooks/lemonsqueezy handles events

Usage:

import { createCheckout } from "@/lib/payments/lemonsqueezy";

// Create checkout
const checkoutUrl = await createCheckout({
  variantId: "variant_id",
  email: user.email,
  customData: { userId: user.id },
});

2. Email (Resend)

Enable:

1. •Sign up at resend.com
2. •Verify your domain
3. •Add to .env.local:
   code

   RESEND_API_KEY=re_xxxxx
   RESEND_FROM_EMAIL=hello@yourdomain.com
   

Usage:

import { sendEmail, emailTemplates } from "@/lib/email/resend";

// Send welcome email
await sendEmail({
  to: user.email,
  subject: "Welcome!",
  html: emailTemplates.welcome({ name: user.name }),
});

3. Analytics (Posthog)

Enable:

1. •Sign up at posthog.com
2. •Create project and get API key
3. •Add to .env.local:
   code

   NEXT_PUBLIC_POSTHOG_KEY=phc_xxxxx
   NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
   

Usage:

import { usePostHog } from "@/lib/analytics/posthog";

// Track event
const posthog = usePostHog();
posthog?.capture("button_clicked", { button_name: "signup" });

4. Error Tracking (Sentry)

Enable:

1. •Sign up at sentry.io
2. •Create project (Next.js)
3. •Run setup wizard:
   bash

   npx @sentry/wizard@latest -i nextjs
   

4. •Add DSN to .env.local:
   code

   NEXT_PUBLIC_SENTRY_DSN=https://xxx@sentry.io/xxx
   SENTRY_AUTH_TOKEN=sntrys_xxxxx
   

5. Blog with MDX

Enable:

1. •Install dependencies:
   bash

   pnpm add @next/mdx @mdx-js/loader @mdx-js/react
   

2. •Update next.config.js for MDX support
3. •Create content/blog/ directory
4. •Add MDX files with frontmatter

6. Search (Command Palette)

Already included! The command palette (Cmd+K) is ready to use.

To customize:

1. •Edit components/command-palette.tsx
2. •Add custom commands and navigation

7. Real-time Features

Enable Supabase Realtime:

import { createClient } from "@/supabase/client";

// Subscribe to changes
const supabase = createClient();
const subscription = supabase
  .channel("my-channel")
  .on("postgres_changes", {
    event: "*",
    schema: "public",
    table: "messages",
  }, (payload) => {
    console.log("Change:", payload);
  })
  .subscribe();

8. File Uploads

Enable with Supabase Storage:

1. •Create bucket in Supabase dashboard
2. •Set up RLS policies

import { createClient } from "@/supabase/client";

const supabase = createClient();

// Upload file
const { data, error } = await supabase.storage
  .from("avatars")
  .upload(`${userId}/avatar.png`, file);

Disable a Feature

To remove a feature:

1. •Remove environment variables from .env.local
2. •Remove the integration directory:
   • •Payments: rm -rf lib/payments/
   • •Email: rm -rf lib/email/
   • •Analytics: rm -rf lib/analytics/
3. •Remove from providers in app/layout.tsx
4. •Remove unused dependencies from package.json
5. •Update CLAUDE.md to note the feature is disabled

Checklist

• • Environment variables added
• • Integration tested locally
• • Error handling in place
• • Documentation updated
• • Build passes: pnpm build