npm - create-claude-webapp - Versions diffs - 1.0.0 → 1.0.2 - Mend

create-claude-webapp 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/.claude/agents/acceptance-test-generator.md +256 -0
package/.claude/agents/auth-flow-designer.md +93 -0
package/.claude/agents/code-reviewer.md +193 -0
package/.claude/agents/code-verifier.md +194 -0
package/.claude/agents/deployment-executor.md +90 -0
package/.claude/agents/design-sync.md +226 -0
package/.claude/agents/document-reviewer.md +304 -0
package/.claude/agents/environment-validator.md +100 -0
package/.claude/agents/integration-test-reviewer.md +196 -0
package/.claude/agents/investigator.md +162 -0
package/.claude/agents/prd-creator.md +220 -0
package/.claude/agents/quality-fixer-frontend.md +323 -0
package/.claude/agents/quality-fixer.md +280 -0
package/.claude/agents/requirement-analyzer.md +149 -0
package/.claude/agents/rls-policy-designer.md +86 -0
package/.claude/agents/rule-advisor.md +123 -0
package/.claude/agents/scope-discoverer.md +231 -0
package/.claude/agents/solver.md +173 -0
package/.claude/agents/supabase-migration-generator.md +85 -0
package/.claude/agents/task-decomposer.md +246 -0
package/.claude/agents/task-executor-frontend.md +264 -0
package/.claude/agents/task-executor.md +261 -0
package/.claude/agents/technical-designer-frontend.md +444 -0
package/.claude/agents/technical-designer.md +370 -0
package/.claude/agents/verifier.md +193 -0
package/.claude/agents/work-planner.md +211 -0
package/.claude/commands/add-integration-tests.md +116 -0
package/.claude/commands/build.md +77 -0
package/.claude/commands/db-migrate.md +96 -0
package/.claude/commands/deploy.md +95 -0
package/.claude/commands/design.md +75 -0
package/.claude/commands/diagnose.md +202 -0
package/.claude/commands/front-build.md +116 -0
package/.claude/commands/front-design.md +61 -0
package/.claude/commands/front-plan.md +53 -0
package/.claude/commands/front-reverse-design.md +183 -0
package/.claude/commands/front-review.md +89 -0
package/.claude/commands/implement.md +80 -0
package/.claude/commands/local-dev.md +94 -0
package/.claude/commands/plan.md +61 -0
package/.claude/commands/project-inject.md +76 -0
package/.claude/commands/refine-skill.md +207 -0
package/.claude/commands/reverse-engineer.md +301 -0
package/.claude/commands/review.md +88 -0
package/.claude/commands/setup-auth.md +68 -0
package/.claude/commands/setup-supabase.md +66 -0
package/.claude/commands/setup-vercel.md +71 -0
package/.claude/commands/sync-skills.md +116 -0
package/.claude/commands/task.md +13 -0
package/.claude/skills/coding-standards/SKILL.md +246 -0
package/.claude/skills/documentation-criteria/SKILL.md +184 -0
package/.claude/skills/documentation-criteria/references/adr-template.md +64 -0
package/.claude/skills/documentation-criteria/references/design-template.md +263 -0
package/.claude/skills/documentation-criteria/references/plan-template.md +130 -0
package/.claude/skills/documentation-criteria/references/prd-template.md +109 -0
package/.claude/skills/documentation-criteria/references/task-template.md +38 -0
package/.claude/skills/frontend/technical-spec/SKILL.md +147 -0
package/.claude/skills/frontend/typescript-rules/SKILL.md +136 -0
package/.claude/skills/frontend/typescript-testing/SKILL.md +129 -0
package/.claude/skills/fullstack-integration/SKILL.md +466 -0
package/.claude/skills/implementation-approach/SKILL.md +141 -0
package/.claude/skills/integration-e2e-testing/SKILL.md +146 -0
package/.claude/skills/interview/SKILL.md +345 -0
package/.claude/skills/project-context/SKILL.md +53 -0
package/.claude/skills/stack-auth/SKILL.md +519 -0
package/.claude/skills/subagents-orchestration-guide/SKILL.md +218 -0
package/.claude/skills/supabase/SKILL.md +289 -0
package/.claude/skills/supabase-edge-functions/SKILL.md +386 -0
package/.claude/skills/supabase-local/SKILL.md +328 -0
package/.claude/skills/supabase-testing/SKILL.md +513 -0
package/.claude/skills/task-analyzer/SKILL.md +131 -0
package/.claude/skills/task-analyzer/references/skills-index.yaml +375 -0
package/.claude/skills/technical-spec/SKILL.md +86 -0
package/.claude/skills/typescript-rules/SKILL.md +121 -0
package/.claude/skills/typescript-testing/SKILL.md +155 -0
package/.claude/skills/vercel-deployment/SKILL.md +355 -0
package/.claude/skills/vercel-edge/SKILL.md +407 -0
package/README.md +4 -17
package/package.json +1 -1

package/.claude/skills/stack-auth/SKILL.md ADDED Viewed

@@ -0,0 +1,519 @@
+---
+name: stack-auth
+description: Stack-auth integration, MCP server usage, and authentication flows. Use when implementing authentication with Stack-auth.
+---
+# Stack-auth Integration
+## Overview
+Stack-auth is a modern authentication solution with an MCP server for AI-assisted development.
+**MCP Server**: `https://mcp.stack-auth.com/`
+## Setup
+### Installation
+```bash
+npm install @stackframe/stack
+```
+### Environment Variables
+```env
+# Public (browser-accessible)
+NEXT_PUBLIC_STACK_PROJECT_ID=your-project-id
+NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=pk_...
+# Server-only
+STACK_SECRET_SERVER_KEY=sk_...
+```
+### Provider Setup
+```typescript
+// app/layout.tsx
+import { StackProvider, StackTheme } from '@stackframe/stack'
+import { stackServerApp } from '@/lib/stack'
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <StackProvider app={stackServerApp}>
+          <StackTheme>
+            {children}
+          </StackTheme>
+        </StackProvider>
+      </body>
+    </html>
+  )
+}
+```
+### Stack Client Configuration
+```typescript
+// lib/stack.ts
+import { StackServerApp } from '@stackframe/stack'
+export const stackServerApp = new StackServerApp({
+  projectId: process.env.NEXT_PUBLIC_STACK_PROJECT_ID!,
+  publishableClientKey: process.env.NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY!,
+  secretServerKey: process.env.STACK_SECRET_SERVER_KEY!,
+})
+```
+## Authentication Flows
+### Email/Password Authentication
+```typescript
+// components/auth/sign-in-form.tsx
+'use client'
+import { useStackApp } from '@stackframe/stack'
+import { useState } from 'react'
+export function SignInForm() {
+  const app = useStackApp()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    try {
+      await app.signInWithCredential({
+        email,
+        password,
+      })
+      // Redirect handled automatically
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Sign in failed')
+    }
+  }
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Email"
+        required
+      />
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="Password"
+        required
+      />
+      {error && <p className="error">{error}</p>}
+      <button type="submit">Sign In</button>
+    </form>
+  )
+}
+```
+### OAuth Authentication
+```typescript
+// components/auth/oauth-buttons.tsx
+'use client'
+import { useStackApp } from '@stackframe/stack'
+export function OAuthButtons() {
+  const app = useStackApp()
+  return (
+    <div className="oauth-buttons">
+      <button onClick={() => app.signInWithOAuth('google')}>
+        Continue with Google
+      </button>
+      <button onClick={() => app.signInWithOAuth('github')}>
+        Continue with GitHub
+      </button>
+    </div>
+  )
+}
+```
+### Magic Link Authentication
+```typescript
+// components/auth/magic-link-form.tsx
+'use client'
+import { useStackApp } from '@stackframe/stack'
+import { useState } from 'react'
+export function MagicLinkForm() {
+  const app = useStackApp()
+  const [email, setEmail] = useState('')
+  const [sent, setSent] = useState(false)
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await app.sendMagicLinkEmail(email)
+    setSent(true)
+  }
+  if (sent) {
+    return <p>Check your email for a sign-in link!</p>
+  }
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Email"
+        required
+      />
+      <button type="submit">Send Magic Link</button>
+    </form>
+  )
+}
+```
+## User Management
+### Getting Current User
+```typescript
+// Client component
+'use client'
+import { useUser } from '@stackframe/stack'
+export function UserProfile() {
+  const user = useUser()
+  if (!user) {
+    return <p>Not signed in</p>
+  }
+  return (
+    <div>
+      <p>Email: {user.primaryEmail}</p>
+      <p>Name: {user.displayName}</p>
+      <img src={user.profileImageUrl} alt="Profile" />
+    </div>
+  )
+}
+```
+```typescript
+// Server component
+import { stackServerApp } from '@/lib/stack'
+export default async function ProfilePage() {
+  const user = await stackServerApp.getUser()
+  if (!user) {
+    redirect('/sign-in')
+  }
+  return (
+    <div>
+      <h1>Welcome, {user.displayName}</h1>
+    </div>
+  )
+}
+```
+### Updating User Profile
+```typescript
+'use client'
+import { useUser } from '@stackframe/stack'
+export function UpdateProfileForm() {
+  const user = useUser({ or: 'redirect' })
+  const handleUpdate = async (formData: FormData) => {
+    await user.update({
+      displayName: formData.get('name') as string,
+    })
+  }
+  return (
+    <form action={handleUpdate}>
+      <input
+        name="name"
+        defaultValue={user.displayName ?? ''}
+        placeholder="Display Name"
+      />
+      <button type="submit">Update</button>
+    </form>
+  )
+}
+```
+## Security Best Practices
+### Session Configuration
+```typescript
+// lib/stack.ts
+export const stackServerApp = new StackServerApp({
+  // ... other config
+  tokenStore: 'cookie', // Use httpOnly cookies
+})
+```
+### Protected Routes
+```typescript
+// app/dashboard/page.tsx
+import { stackServerApp } from '@/lib/stack'
+import { redirect } from 'next/navigation'
+export default async function DashboardPage() {
+  const user = await stackServerApp.getUser()
+  if (!user) {
+    redirect('/sign-in?redirect=/dashboard')
+  }
+  return <Dashboard user={user} />
+}
+```
+### API Route Protection
+```typescript
+// app/api/protected/route.ts
+import { stackServerApp } from '@/lib/stack'
+import { NextResponse } from 'next/server'
+export async function GET() {
+  const user = await stackServerApp.getUser()
+  if (!user) {
+    return NextResponse.json(
+      { error: 'Unauthorized' },
+      { status: 401 }
+    )
+  }
+  return NextResponse.json({ user })
+}
+```
+### Middleware Protection
+```typescript
+// middleware.ts
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+const protectedPaths = ['/dashboard', '/settings', '/api/protected']
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl
+  // Check if path needs protection
+  const isProtected = protectedPaths.some(path => pathname.startsWith(path))
+  if (!isProtected) {
+    return NextResponse.next()
+  }
+  // Check for Stack-auth session cookie
+  const sessionCookie = request.cookies.get('stack-session')
+  if (!sessionCookie) {
+    const signInUrl = new URL('/sign-in', request.url)
+    signInUrl.searchParams.set('redirect', pathname)
+    return NextResponse.redirect(signInUrl)
+  }
+  return NextResponse.next()
+}
+export const config = {
+  matcher: ['/dashboard/:path*', '/settings/:path*', '/api/protected/:path*'],
+}
+```
+## Integration with Supabase
+### Syncing User ID
+```typescript
+// After Stack-auth sign-in, sync with Supabase
+import { stackServerApp } from '@/lib/stack'
+import { supabaseAdmin } from '@/lib/supabase-admin'
+export async function syncUserToSupabase() {
+  const stackUser = await stackServerApp.getUser()
+  if (!stackUser) return null
+  // Check if user exists in Supabase
+  const { data: existingUser } = await supabaseAdmin
+    .from('users')
+    .select('id')
+    .eq('stack_auth_id', stackUser.id)
+    .single()
+  if (!existingUser) {
+    // Create user in Supabase
+    const { data: newUser, error } = await supabaseAdmin
+      .from('users')
+      .insert({
+        stack_auth_id: stackUser.id,
+        email: stackUser.primaryEmail,
+        name: stackUser.displayName,
+      })
+      .select()
+      .single()
+    if (error) throw error
+    return newUser
+  }
+  return existingUser
+}
+```
+### RLS with Stack-auth ID
+```sql
+-- Migration: Add stack_auth_id to users table
+ALTER TABLE users ADD COLUMN stack_auth_id TEXT UNIQUE;
+-- Create index for lookups
+CREATE INDEX idx_users_stack_auth_id ON users(stack_auth_id);
+-- RLS policy using custom claim
+CREATE POLICY "Users can access own data"
+  ON user_data FOR ALL
+  TO authenticated
+  USING (
+    user_id IN (
+      SELECT id FROM users
+      WHERE stack_auth_id = current_setting('app.stack_user_id', true)
+    )
+  );
+```
+### API Route with Both Auth Systems
+```typescript
+// app/api/user-data/route.ts
+import { stackServerApp } from '@/lib/stack'
+import { createClient } from '@supabase/supabase-js'
+import { NextResponse } from 'next/server'
+export async function GET() {
+  // Get Stack-auth user
+  const stackUser = await stackServerApp.getUser()
+  if (!stackUser) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+  // Create Supabase client with user context
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.SUPABASE_SERVICE_ROLE_KEY!
+  )
+  // Set user context for RLS
+  await supabase.rpc('set_config', {
+    setting: 'app.stack_user_id',
+    value: stackUser.id,
+  })
+  // Query with RLS
+  const { data, error } = await supabase
+    .from('user_data')
+    .select('*')
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 })
+  }
+  return NextResponse.json({ data })
+}
+```
+## MCP Server Usage
+### Configuring Claude Code MCP
+Add to your Claude Code MCP configuration:
+```json
+{
+  "mcpServers": {
+    "stack-auth": {
+      "url": "https://mcp.stack-auth.com/",
+      "transport": "sse"
+    }
+  }
+}
+```
+### Available MCP Tools
+The Stack-auth MCP server provides tools for:
+- Creating and managing projects
+- Configuring OAuth providers
+- Managing users
+- Generating authentication code
+## Sign Out
+```typescript
+'use client'
+import { useStackApp } from '@stackframe/stack'
+export function SignOutButton() {
+  const app = useStackApp()
+  return (
+    <button onClick={() => app.signOut()}>
+      Sign Out
+    </button>
+  )
+}
+```
+## Error Handling
+```typescript
+'use client'
+import { useStackApp } from '@stackframe/stack'
+import { useState } from 'react'
+export function AuthForm() {
+  const app = useStackApp()
+  const [error, setError] = useState<string | null>(null)
+  const handleAuth = async () => {
+    try {
+      await app.signInWithCredential({ email, password })
+    } catch (err) {
+      if (err instanceof Error) {
+        // Handle specific error types
+        if (err.message.includes('invalid_credentials')) {
+          setError('Invalid email or password')
+        } else if (err.message.includes('user_not_found')) {
+          setError('No account found with this email')
+        } else if (err.message.includes('email_not_verified')) {
+          setError('Please verify your email first')
+        } else {
+          setError('An error occurred. Please try again.')
+        }
+      }
+    }
+  }
+  return (
+    <div>
+      {error && <div className="error-banner">{error}</div>}
+      {/* Form fields */}
+    </div>
+  )
+}
+```