create-baton 1.0.0 → 1.1.0

package/templates/skills/patterns/seo/SKILL.md

@@ -0,0 +1,219 @@
+---
+name: seo
+description: >-
+  SEO patterns — metadata, Open Graph, sitemaps, structured data, and
+  Core Web Vitals. Load at Session 5+ when preparing for launch.
+  Use when optimizing pages for search engines or social sharing.
+---
+
+# SEO Skill
+
+> SEO is not magic. It's metadata + performance + content. Do the basics right.
+
+---
+
+## Load This Skill When
+
+- Project is approaching launch (Session 5+)
+- User mentions SEO, search rankings, or discoverability
+- Building a marketing site, blog, or e-commerce store
+
+---
+
+## The Basics (Session 5-6)
+
+### Every Page Needs
+
+```typescript
+// Next.js metadata
+export const metadata: Metadata = {
+  title: 'Page Title — App Name',        // Under 60 characters
+  description: 'What this page offers.',  // Under 160 characters
+};
+```
+
+### Title Rules
+
+```
+Homepage:    "App Name — One Line Value Prop"
+Inner pages: "Page Topic — App Name"
+Blog posts:  "Post Title — App Name"
+```
+
+- Keep under 60 characters
+- Put the important words first
+- Don't stuff keywords
+
+### Description Rules
+
+- Write for humans, not search engines
+- Include a call to action ("Learn how to...")
+- Unique per page (never duplicate)
+- 120-160 characters
+
+---
+
+## Open Graph (Social Sharing)
+
+### Every Page Needs
+
+```typescript
+export const metadata: Metadata = {
+  openGraph: {
+    title: 'Page Title',
+    description: 'What this page offers.',
+    url: 'https://yourdomain.com/page',
+    siteName: 'App Name',
+    images: [{
+      url: 'https://yourdomain.com/og-image.png',
+      width: 1200,
+      height: 630,
+    }],
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Page Title',
+    description: 'What this page offers.',
+    images: ['https://yourdomain.com/og-image.png'],
+  },
+};
+```
+
+### OG Image Rules
+
+- Size: 1200x630px
+- Include app name/logo
+- Readable text (not too small)
+- Create a default OG image for the site
+- Create unique OG images for key pages (homepage, pricing, blog posts)
+
+---
+
+## Sitemap (Session 5)
+
+### Next.js Auto-Generation
+
+```typescript
+// app/sitemap.ts
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const pages = [
+    { url: 'https://yourdomain.com', lastModified: new Date() },
+    { url: 'https://yourdomain.com/pricing', lastModified: new Date() },
+    { url: 'https://yourdomain.com/about', lastModified: new Date() },
+  ];
+
+  // Add dynamic pages
+  const posts = await getBlogPosts();
+  const postPages = posts.map(post => ({
+    url: `https://yourdomain.com/blog/${post.slug}`,
+    lastModified: post.updatedAt,
+  }));
+
+  return [...pages, ...postPages];
+}
+```
+
+### robots.txt
+
+```typescript
+// app/robots.ts
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: { userAgent: '*', allow: '/' },
+    sitemap: 'https://yourdomain.com/sitemap.xml',
+  };
+}
+```
+
+---
+
+## Structured Data (Session 6+)
+
+### When to Add
+
+- Product pages (e-commerce)
+- Blog posts/articles
+- FAQ pages
+- Organization info
+
+### JSON-LD Pattern
+
+```typescript
+// Component for structured data
+function JsonLd({ data }: { data: Record<string, unknown> }) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  );
+}
+
+// Usage in a blog post
+<JsonLd data={{
+  '@context': 'https://schema.org',
+  '@type': 'Article',
+  headline: post.title,
+  datePublished: post.publishedAt,
+  author: { '@type': 'Person', name: 'Author Name' },
+}} />
+```
+
+### Don't Over-Do It
+
+Only add structured data for:
+- Content types Google explicitly supports
+- Pages you want enhanced search results for
+- Don't add it to every page "just in case"
+
+---
+
+## Performance as SEO
+
+### Core Web Vitals
+
+Google uses these as ranking signals:
+
+| Metric | Target | What It Measures |
+|--------|--------|-----------------|
+| **LCP** (Largest Contentful Paint) | < 2.5s | How fast the main content loads |
+| **INP** (Interaction to Next Paint) | < 200ms | How fast the page responds to clicks |
+| **CLS** (Cumulative Layout Shift) | < 0.1 | How much the page shifts during load |
+
+### Quick Wins
+
+1. **Use Next.js Image** — auto-optimization, lazy loading, sizing
+2. **Minimize client-side JavaScript** — use Server Components
+3. **Don't load fonts from Google Fonts CDN** — use `next/font`
+4. **Preload critical assets** — hero images, above-fold content
+5. **Avoid layout shifts** — set width/height on images, use skeleton loaders
+
+---
+
+## SEO Checklist (Pre-Launch)
+
+- [ ] Every page has unique title and description
+- [ ] OG images set for key pages
+- [ ] Sitemap generated and accessible
+- [ ] robots.txt allows indexing
+- [ ] Core Web Vitals passing (check with PageSpeed Insights)
+- [ ] No broken links (404s)
+- [ ] HTTPS enforced
+- [ ] Mobile-friendly (test at 375px)
+- [ ] Structured data on key pages (if applicable)
+
+---
+
+## What NOT to Do
+
+- Don't keyword stuff (Google penalizes this)
+- Don't hide text (white text on white background)
+- Don't create pages just for SEO (thin content)
+- Don't buy backlinks
+- Don't obsess over rankings — focus on content quality
+- Don't add SEO before the product works
+
+---
+
+*Last updated: Baton Protocol v3.1*

package/templates/skills/stacks/prisma/SKILL.md

@@ -0,0 +1,281 @@
+---
+name: prisma
+description: >-
+  Prisma ORM patterns — schema design, migrations, type-safe queries,
+  relations, and seeding. Load at Session 1-2 when using Prisma as the
+  database ORM. Use when designing schemas, writing queries, or running
+  migrations.
+---
+
+# Prisma Skill
+
+> Schema-first development. Define your data model, Prisma handles the rest.
+
+---
+
+## Setup (Session 1)
+
+```bash
+npm install prisma @prisma/client
+npx prisma init
+```
+
+This creates:
+- `prisma/schema.prisma` — your data model
+- `.env` — database connection string
+
+### Database URL
+
+```bash
+# .env
+DATABASE_URL="postgresql://user:password@localhost:5432/mydb"
+```
+
+---
+
+## Schema Design
+
+### Basic Model
+
+```prisma
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  name      String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  posts     Post[]
+}
+
+model Post {
+  id        String   @id @default(cuid())
+  title     String
+  content   String?
+  published Boolean  @default(false)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  author    User     @relation(fields: [authorId], references: [id])
+  authorId  String
+}
+```
+
+### Naming Conventions
+
+| Thing | Convention | Example |
+|-------|-----------|---------|
+| Models | PascalCase, singular | `User`, `OrderItem` |
+| Fields | camelCase | `firstName`, `createdAt` |
+| Relations | camelCase, descriptive | `author`, `orderItems` |
+| Enums | PascalCase | `Role`, `OrderStatus` |
+
+### Enums
+
+```prisma
+enum Role {
+  USER
+  ADMIN
+}
+
+enum OrderStatus {
+  PENDING
+  CONFIRMED
+  SHIPPED
+  DELIVERED
+  CANCELLED
+}
+```
+
+---
+
+## Migrations
+
+### Create a Migration
+
+```bash
+npx prisma migrate dev --name add_users_table
+```
+
+This:
+1. Generates SQL migration file
+2. Applies it to your dev database
+3. Regenerates Prisma Client types
+
+### Migration Workflow
+
+```
+1. Edit schema.prisma
+2. Run prisma migrate dev
+3. Check generated SQL
+4. Commit migration file
+5. Build features
+```
+
+### Production Migrations
+
+```bash
+npx prisma migrate deploy
+```
+
+**Rule:** Never run `migrate dev` in production. Always use `migrate deploy`.
+
+---
+
+## Prisma Client (Queries)
+
+### Setup
+
+```typescript
+// lib/db.ts
+import { PrismaClient } from '@prisma/client';
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
+
+export const prisma = globalForPrisma.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV !== 'production') {
+  globalForPrisma.prisma = prisma;
+}
+```
+
+**Why the global pattern:** Prevents creating multiple Prisma Client instances during hot reload in development.
+
+### Common Queries
+
+```typescript
+// Find many with filter
+const posts = await prisma.post.findMany({
+  where: { published: true, authorId: userId },
+  orderBy: { createdAt: 'desc' },
+  take: 20,
+});
+
+// Find one
+const user = await prisma.user.findUnique({
+  where: { id: userId },
+});
+
+// Find one or throw
+const user = await prisma.user.findUniqueOrThrow({
+  where: { id: userId },
+});
+
+// Create
+const post = await prisma.post.create({
+  data: {
+    title: 'Hello',
+    authorId: userId,
+  },
+});
+
+// Update
+const post = await prisma.post.update({
+  where: { id: postId },
+  data: { published: true },
+});
+
+// Delete
+await prisma.post.delete({
+  where: { id: postId },
+});
+```
+
+### Include Relations
+
+```typescript
+// Get user with their posts
+const user = await prisma.user.findUnique({
+  where: { id: userId },
+  include: { posts: true },
+});
+
+// Selective include
+const user = await prisma.user.findUnique({
+  where: { id: userId },
+  include: {
+    posts: {
+      where: { published: true },
+      orderBy: { createdAt: 'desc' },
+      take: 5,
+    },
+  },
+});
+```
+
+### Select Specific Fields
+
+```typescript
+// Only get what you need
+const users = await prisma.user.findMany({
+  select: {
+    id: true,
+    name: true,
+    email: true,
+  },
+});
+```
+
+---
+
+## Transactions
+
+```typescript
+// When multiple operations must succeed together
+const [order, updatedInventory] = await prisma.$transaction([
+  prisma.order.create({ data: orderData }),
+  prisma.product.update({
+    where: { id: productId },
+    data: { inventory: { decrement: quantity } },
+  }),
+]);
+```
+
+---
+
+## Seeding
+
+```typescript
+// prisma/seed.ts
+import { prisma } from '../lib/db';
+
+async function main() {
+  await prisma.user.create({
+    data: {
+      email: 'test@example.com',
+      name: 'Test User',
+      posts: {
+        create: [
+          { title: 'First Post', published: true },
+          { title: 'Draft Post' },
+        ],
+      },
+    },
+  });
+}
+
+main()
+  .catch(console.error)
+  .finally(() => prisma.$disconnect());
+```
+
+```bash
+npx prisma db seed
+```
+
+---
+
+## Common Mistakes
+
+| Mistake | Fix |
+|---------|-----|
+| Not using the global pattern | Multiple clients = connection pool issues |
+| Fetching all fields when you need 2 | Use `select` |
+| N+1 queries (looping with queries) | Use `include` or `select` with relations |
+| Running `migrate dev` in production | Use `migrate deploy` |
+| Not committing migration files | Always commit `prisma/migrations/` |
+| Editing generated migration SQL | Create a new migration instead |
+
+---
+
+*Last updated: Baton Protocol v3.1*