autoworkflow 3.1.4 → 3.5.0

package/.claude/skills/remix.md

@@ -0,0 +1,246 @@
+# Remix Skill
+
+## Route Conventions
+\`\`\`
+app/
+├── root.tsx                 # Root layout
+├── routes/
+│   ├── _index.tsx           # / (index route)
+│   ├── users.tsx            # /users (layout)
+│   ├── users._index.tsx     # /users (index)
+│   ├── users.$id.tsx        # /users/:id
+│   ├── users.$id_.edit.tsx  # /users/:id/edit (escapes layout)
+│   └── api.users.ts         # /api/users (resource route)
+\`\`\`
+
+## Loader (Data Fetching)
+\`\`\`typescript
+import type { LoaderFunctionArgs } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  // Access URL search params
+  const url = new URL(request.url);
+  const page = url.searchParams.get('page') ?? '1';
+
+  // Auth check
+  const user = await requireUser(request);
+
+  const post = await db.post.findUnique({ where: { id: params.id } });
+
+  if (!post) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  return json({ post, user });
+}
+
+export default function PostPage() {
+  const { post, user } = useLoaderData<typeof loader>();
+
+  return (
+    <article>
+      <h1>{post.title}</h1>
+      <p>By {user.name}</p>
+    </article>
+  );
+}
+\`\`\`
+
+## Action (Mutations)
+\`\`\`typescript
+import type { ActionFunctionArgs } from '@remix-run/node';
+import { redirect, json } from '@remix-run/node';
+import { useActionData, Form } from '@remix-run/react';
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const intent = formData.get('intent');
+
+  if (intent === 'delete') {
+    await db.post.delete({ where: { id: formData.get('id') } });
+    return redirect('/posts');
+  }
+
+  // Validation
+  const title = formData.get('title');
+  const content = formData.get('content');
+
+  const errors: Record<string, string> = {};
+  if (!title) errors.title = 'Title is required';
+  if (!content) errors.content = 'Content is required';
+
+  if (Object.keys(errors).length) {
+    return json({ errors, values: { title, content } }, { status: 400 });
+  }
+
+  await db.post.create({ data: { title, content } });
+  return redirect('/posts');
+}
+
+export default function NewPost() {
+  const actionData = useActionData<typeof action>();
+
+  return (
+    <Form method="post">
+      <input
+        name="title"
+        defaultValue={actionData?.values?.title}
+      />
+      {actionData?.errors?.title && (
+        <span className="error">{actionData.errors.title}</span>
+      )}
+
+      <textarea
+        name="content"
+        defaultValue={actionData?.values?.content}
+      />
+
+      <button type="submit">Create Post</button>
+    </Form>
+  );
+}
+\`\`\`
+
+## Error Handling
+\`\`\`typescript
+import { isRouteErrorResponse, useRouteError } from '@remix-run/react';
+
+// Error boundary for this route
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    return (
+      <div>
+        <h1>{error.status} {error.statusText}</h1>
+        <p>{error.data}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1>Unexpected Error</h1>
+      <p>{error instanceof Error ? error.message : 'Unknown error'}</p>
+    </div>
+  );
+}
+
+// Throwing errors in loaders/actions
+export async function loader({ params }: LoaderFunctionArgs) {
+  const user = await db.user.findUnique({ where: { id: params.id } });
+
+  if (!user) {
+    throw new Response('User not found', { status: 404 });
+  }
+
+  return json({ user });
+}
+\`\`\`
+
+## Deferred Data (Streaming)
+\`\`\`typescript
+import { defer } from '@remix-run/node';
+import { Await, useLoaderData } from '@remix-run/react';
+import { Suspense } from 'react';
+
+export async function loader() {
+  // Fast data - awaited
+  const user = await getUser();
+
+  // Slow data - deferred
+  const recommendationsPromise = getRecommendations();
+
+  return defer({
+    user,
+    recommendations: recommendationsPromise
+  });
+}
+
+export default function Dashboard() {
+  const { user, recommendations } = useLoaderData<typeof loader>();
+
+  return (
+    <div>
+      <h1>Welcome, {user.name}</h1>
+
+      <Suspense fallback={<p>Loading recommendations...</p>}>
+        <Await resolve={recommendations}>
+          {(data) => <RecommendationsList items={data} />}
+        </Await>
+      </Suspense>
+    </div>
+  );
+}
+\`\`\`
+
+## Session Management
+\`\`\`typescript
+// app/sessions.server.ts
+import { createCookieSessionStorage } from '@remix-run/node';
+
+export const sessionStorage = createCookieSessionStorage({
+  cookie: {
+    name: '__session',
+    httpOnly: true,
+    maxAge: 60 * 60 * 24 * 7, // 1 week
+    path: '/',
+    sameSite: 'lax',
+    secrets: [process.env.SESSION_SECRET!],
+    secure: process.env.NODE_ENV === 'production',
+  },
+});
+
+export async function getSession(request: Request) {
+  return sessionStorage.getSession(request.headers.get('Cookie'));
+}
+
+export async function requireUser(request: Request) {
+  const session = await getSession(request);
+  const userId = session.get('userId');
+
+  if (!userId) {
+    throw redirect('/login');
+  }
+
+  return db.user.findUnique({ where: { id: userId } });
+}
+\`\`\`
+
+## Resource Routes (API)
+\`\`\`typescript
+// app/routes/api.users.ts
+import { json } from '@remix-run/node';
+import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const users = await db.user.findMany();
+  return json(users);
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  if (request.method === 'POST') {
+    const data = await request.json();
+    const user = await db.user.create({ data });
+    return json(user, { status: 201 });
+  }
+
+  return json({ error: 'Method not allowed' }, { status: 405 });
+}
+\`\`\`
+
+## ❌ DON'T
+- Use useEffect for data fetching (use loaders)
+- Forget error boundaries
+- Skip validation in actions
+- Put secrets in client code
+
+## ✅ DO
+- Use loaders for data fetching
+- Use actions for mutations
+- Use Form for progressive enhancement
+- Use defer for slow data
+- Handle errors with ErrorBoundary
+- Use sessions for auth state