claudeinone-cli 1.0.2 → 1.0.3

package/kit/.claude/skills/frontend-remix-advanced.md

@@ -0,0 +1,106 @@
+# Remix Advanced Patterns
+
+Production patterns for Remix applications.
+
+## Loader Data Caching
+
+```typescript
+import { json } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const cacheKey = `product:${params.id}`;
+  
+  // Check cache
+  let product = await cache.get(cacheKey);
+  
+  if (!product) {
+    product = await db.products.findById(params.id);
+    // Cache for 1 hour
+    await cache.set(cacheKey, product, 3600);
+  }
+
+  return json({ product });
+}
+
+export default function ProductPage() {
+  const { product } = useLoaderData<typeof loader>();
+  
+  return <div>{product.name}</div>;
+}
+```
+
+## Optimistic UI
+
+```typescript
+export async function action({ request, params }: ActionFunctionArgs) {
+  if (request.method === 'POST') {
+    const formData = await request.formData();
+    const title = formData.get('title');
+
+    await db.posts.update(params.id, { title });
+
+    return redirect(`/posts/${params.id}`);
+  }
+}
+
+export default function EditPost() {
+  const fetcher = useFetcher();
+  const post = useLoaderData();
+
+  const optimisticData = fetcher.formData
+    ? { ...post, title: fetcher.formData.get('title') }
+    : post;
+
+  return (
+    <fetcher.Form method="post">
+      <input
+        name="title"
+        defaultValue={optimisticData.title}
+      />
+      <button type="submit">Update</button>
+    </fetcher.Form>
+  );
+}
+```
+
+## Streaming
+
+```typescript
+export async function loader() {
+  return defer({
+    analytics: getAnalytics(),
+    posts: getPosts()
+  });
+}
+
+export default function Dashboard() {
+  const { analytics, posts } = useLoaderData<typeof loader>();
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Await resolve={analytics}>
+        {(data) => <AnalyticsWidget data={data} />}
+      </Await>
+
+      <Suspense fallback={<div>Loading posts...</div>}>
+        <Await resolve={posts}>
+          {(data) => <PostList posts={data} />}
+        </Await>
+      </Suspense>
+    </Suspense>
+  );
+}
+```
+
+## Best Practices
+
+✅ **Server-side rendering** - Default behavior
+✅ **Streaming** - Progressive rendering
+✅ **Data fetching** - Loaders vs Actions
+✅ **Caching** - Strategic use
+✅ **Error boundaries** - Graceful degradation
+
+## Resources
+
+- [Remix Documentation](https://remix.run/docs)

package/kit/.claude/skills/frontend-remix.md

@@ -0,0 +1,101 @@
+# Remix
+
+## Overview
+Remix is a full-stack React framework focused on web standards, nested routing, and server-side rendering.
+
+## Setup
+
+```bash
+npx create-remix@latest my-app
+cd my-app
+npm run dev
+```
+
+## Route with Loader and Action
+
+```tsx
+// app/routes/users._index.tsx
+import { json, type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node';
+import { useLoaderData, Form, useActionData } from '@remix-run/react';
+import { prisma } from '~/lib/db.server';
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const users = await prisma.user.findMany({ take: 20, orderBy: { createdAt: 'desc' } });
+  return json({ users });
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const email = String(formData.get('email'));
+  const name = String(formData.get('name'));
+
+  if (!email.includes('@')) return json({ error: 'Invalid email' }, { status: 400 });
+
+  await prisma.user.create({ data: { email, name } });
+  return json({ success: true });
+}
+
+export default function UsersPage() {
+  const { users } = useLoaderData<typeof loader>();
+  const actionData = useActionData<typeof action>();
+
+  return (
+    <div>
+      <Form method="post">
+        <input name="email" type="email" required />
+        <input name="name" required />
+        <button type="submit">Add User</button>
+        {actionData?.error && <p className="text-red-500">{actionData.error}</p>}
+      </Form>
+      <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
+    </div>
+  );
+}
+```
+
+## Error Boundary
+
+```tsx
+// app/routes/users.$id.tsx
+export function ErrorBoundary() {
+  const error = useRouteError();
+  if (isRouteErrorResponse(error)) {
+    return <h2>{error.status}: {error.statusText}</h2>;
+  }
+  return <h2>Unknown error</h2>;
+}
+```
+
+## Auth with Session
+
+```typescript
+// app/lib/session.server.ts
+import { createCookieSessionStorage, redirect } from '@remix-run/node';
+
+const { getSession, commitSession, destroySession } = createCookieSessionStorage({
+  cookie: {
+    name: '__session',
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    secrets: [process.env.SESSION_SECRET!],
+    sameSite: 'lax',
+    maxAge: 60 * 60 * 24 * 7,
+  }
+});
+
+export async function requireUser(request: Request) {
+  const session = await getSession(request.headers.get('Cookie'));
+  const userId = session.get('userId');
+  if (!userId) throw redirect('/login');
+  return userId;
+}
+```
+
+## Best Practices
+- Use `loader` for data fetching (server-side only)
+- Use `action` for mutations (form submissions, API calls)
+- Loaders run in parallel for nested routes — use this for performance
+- Use `defer()` with `<Await>` for streaming slow data
+
+## Resources
+- [Remix docs](https://remix.run/docs)

package/kit/.claude/skills/frontend-solid.md

@@ -0,0 +1,99 @@
+# SolidJS
+
+## Overview
+SolidJS is a reactive UI library with no virtual DOM — updates are compiled to precise DOM operations for maximum performance.
+
+## Setup
+
+```bash
+npx degit solidjs/templates/ts my-app
+cd my-app && npm install && npm run dev
+```
+
+## Signals (Reactive Primitives)
+
+```tsx
+import { createSignal, createEffect, createMemo, Show, For } from 'solid-js';
+
+function Counter() {
+  const [count, setCount] = createSignal(0);
+  const doubled = createMemo(() => count() * 2);
+
+  createEffect(() => {
+    console.log('Count changed:', count());
+  });
+
+  return (
+    <div>
+      <p>Count: {count()}, Doubled: {doubled()}</p>
+      <button onClick={() => setCount(c => c + 1)}>Increment</button>
+    </div>
+  );
+}
+```
+
+## Stores (Complex State)
+
+```tsx
+import { createStore } from 'solid-js/store';
+
+interface Todo { id: number; text: string; done: boolean; }
+
+function TodoApp() {
+  const [todos, setTodos] = createStore<Todo[]>([]);
+
+  const addTodo = (text: string) => {
+    setTodos(todos.length, { id: Date.now(), text, done: false });
+  };
+
+  const toggleTodo = (id: number) => {
+    setTodos(t => t.id === id, 'done', d => !d);
+  };
+
+  return (
+    <div>
+      <button onClick={() => addTodo('New todo')}>Add</button>
+      <For each={todos}>
+        {(todo) => (
+          <div onClick={() => toggleTodo(todo.id)}
+               style={{ 'text-decoration': todo.done ? 'line-through' : 'none' }}>
+            {todo.text}
+          </div>
+        )}
+      </For>
+    </div>
+  );
+}
+```
+
+## Async Data with createResource
+
+```tsx
+import { createResource, Suspense } from 'solid-js';
+
+async function fetchUser(id: string) {
+  const res = await fetch(`/api/users/${id}`);
+  return res.json();
+}
+
+function UserProfile(props: { id: string }) {
+  const [user] = createResource(() => props.id, fetchUser);
+
+  return (
+    <Suspense fallback={<p>Loading...</p>}>
+      <Show when={user()} keyed>
+        {(u) => <h1>{u.name}</h1>}
+      </Show>
+    </Suspense>
+  );
+}
+```
+
+## Best Practices
+- Signals are functions — call them `count()` to read, `setCount(n)` to write
+- Use `<For>` not `.map()` — it's keyed and efficient
+- Use `createMemo` for derived values (like `useMemo` in React)
+- Never destructure props — SolidJS tracks property access reactively
+
+## Resources
+- [SolidJS docs](https://docs.solidjs.com)

package/kit/.claude/skills/frontend-state-management.md

@@ -0,0 +1,134 @@
+# State Management Patterns
+
+Managing state across components.
+
+## Context API + useReducer
+
+```typescript
+interface AppState {
+  user: { id: string; name: string } | null;
+  theme: 'light' | 'dark';
+  notifications: Array<{ id: string; message: string }>;
+}
+
+type AppAction =
+  | { type: 'SET_USER'; payload: AppState['user'] }
+  | { type: 'SET_THEME'; payload: AppState['theme'] }
+  | { type: 'ADD_NOTIFICATION'; payload: { id: string; message: string } }
+  | { type: 'REMOVE_NOTIFICATION'; payload: string };
+
+const initialState: AppState = {
+  user: null,
+  theme: 'light',
+  notifications: []
+};
+
+function appReducer(state: AppState, action: AppAction): AppState {
+  switch (action.type) {
+    case 'SET_USER':
+      return { ...state, user: action.payload };
+    case 'SET_THEME':
+      return { ...state, theme: action.payload };
+    case 'ADD_NOTIFICATION':
+      return {
+        ...state,
+        notifications: [...state.notifications, action.payload]
+      };
+    case 'REMOVE_NOTIFICATION':
+      return {
+        ...state,
+        notifications: state.notifications.filter(n => n.id !== action.payload)
+      };
+    default:
+      return state;
+  }
+}
+
+const AppContext = createContext<{
+  state: AppState;
+  dispatch: Dispatch<AppAction>;
+} | undefined>(undefined);
+
+export function AppProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(appReducer, initialState);
+
+  return (
+    <AppContext.Provider value={{ state, dispatch }}>
+      {children}
+    </AppContext.Provider>
+  );
+}
+
+export function useAppContext() {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error('useAppContext must be within AppProvider');
+  }
+  return context;
+}
+
+// Usage
+export function Profile() {
+  const { state, dispatch } = useAppContext();
+
+  return (
+    <div>
+      {state.user && <h1>{state.user.name}</h1>}
+      <button onClick={() => dispatch({ type: 'SET_THEME', payload: 'dark' })}>
+        Change theme
+      </button>
+    </div>
+  );
+}
+```
+
+## Zustand (Lightweight)
+
+```typescript
+import { create } from 'zustand';
+
+interface Store {
+  user: { id: string; name: string } | null;
+  setUser: (user: Store['user']) => void;
+  theme: 'light' | 'dark';
+  setTheme: (theme: Store['theme']) => void;
+  clear: () => void;
+}
+
+export const useStore = create<Store>((set) => ({
+  user: null,
+  setUser: (user) => set({ user }),
+  theme: 'light',
+  setTheme: (theme) => set({ theme }),
+  clear: () => set({ user: null, theme: 'light' })
+}));
+
+// Usage
+export function Profile() {
+  const user = useStore((state) => state.user);
+  const setUser = useStore((state) => state.setUser);
+
+  return (
+    <div>
+      {user && <h1>{user.name}</h1>}
+      <button onClick={() => setUser({ id: '1', name: 'John' })}>
+        Set user
+      </button>
+    </div>
+  );
+}
+```
+
+## Best Practices
+
+✅ **Normalize state** - Flatten nested structures
+✅ **Separate concerns** - UI state vs app state
+✅ **Avoid prop drilling** - Use context for deep trees
+✅ **Memoization** - Prevent unnecessary re-renders
+✅ **Persistence** - Save critical state
+
+## Resources
+
+- [React Context](https://react.dev/reference/react/useContext)
+- [Zustand](https://github.com/pmndrs/zustand)
+- [Jotai](https://jotai.org/)

package/kit/.claude/skills/frontend-state.md

@@ -0,0 +1,106 @@
+# Frontend State Management
+
+## Overview
+Patterns for managing client-side state: React Context for simple cases, Zustand for complex shared state.
+
+## React Context + useReducer
+
+```tsx
+import { createContext, useContext, useReducer, ReactNode } from 'react';
+
+interface State { user: User | null; theme: 'light' | 'dark'; }
+type Action = { type: 'SET_USER'; user: User } | { type: 'TOGGLE_THEME' } | { type: 'LOGOUT' };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'SET_USER': return { ...state, user: action.user };
+    case 'TOGGLE_THEME': return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
+    case 'LOGOUT': return { ...state, user: null };
+    default: return state;
+  }
+}
+
+const AppContext = createContext<{ state: State; dispatch: React.Dispatch<Action> } | null>(null);
+
+export function AppProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(reducer, { user: null, theme: 'light' });
+  return <AppContext.Provider value={{ state, dispatch }}>{children}</AppContext.Provider>;
+}
+
+export function useApp() {
+  const ctx = useContext(AppContext);
+  if (!ctx) throw new Error('useApp must be used within AppProvider');
+  return ctx;
+}
+```
+
+## Zustand
+
+```bash
+npm install zustand
+```
+
+```typescript
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface AppStore {
+  user: User | null;
+  theme: 'light' | 'dark';
+  setUser: (user: User | null) => void;
+  toggleTheme: () => void;
+  logout: () => void;
+}
+
+export const useAppStore = create<AppStore>()(
+  persist(
+    (set) => ({
+      user: null,
+      theme: 'light',
+      setUser: (user) => set({ user }),
+      toggleTheme: () => set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),
+      logout: () => set({ user: null }),
+    }),
+    { name: 'app-store' }
+  )
+);
+
+// Usage in component
+function Navbar() {
+  const { user, logout } = useAppStore();
+  return user ? <button onClick={logout}>Logout {user.name}</button> : null;
+}
+```
+
+## React Query for Server State
+
+```bash
+npm install @tanstack/react-query
+```
+
+```typescript
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+function useUsers() {
+  return useQuery({ queryKey: ['users'], queryFn: () => fetch('/api/users').then(r => r.json()) });
+}
+
+function useCreateUser() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (data: CreateUserInput) =>
+      fetch('/api/users', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } }).then(r => r.json()),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] }),
+  });
+}
+```
+
+## Best Practices
+- Server state (API data) → React Query or SWR
+- Client-only UI state (modals, theme) → Zustand or Context
+- Avoid putting server responses in Context/Zustand
+- Use Zustand `persist` middleware for theme/preferences only
+
+## Resources
+- [Zustand docs](https://zustand.docs.pmnd.rs)
+- [TanStack Query](https://tanstack.com/query/latest)

package/kit/.claude/skills/frontend-svelte.md

@@ -0,0 +1,121 @@
+# SvelteKit
+
+Compiler-based framework that writes less code with true reactivity.
+
+## Reactive Variables
+
+```svelte
+<script>
+  let count = 0;
+  
+  // Reactive assignment (compiler magic)
+  $: doubled = count * 2;
+  
+  // Reactive statement
+  $: if (count > 5) {
+    console.log('Count is high!');
+  }
+  
+  function increment() {
+    count++; // Direct mutation, triggers reactivity
+  }
+</script>
+
+<button on:click={increment}>
+  Clicks: {count}, Doubled: {doubled}
+</button>
+```
+
+## Component Props
+
+```svelte
+<script>
+  export let user;
+  export let age = 18; // Default value
+</script>
+
+<p>{user}, age {age}</p>
+```
+
+## Stores (Reactive)
+
+```javascript
+// stores.js
+import { writable, derived } from 'svelte/store';
+
+export const count = writable(0);
+export const doubled = derived(count, $count => $count * 2);
+
+// In component
+<script>
+  import { count, doubled } from './stores';
+</script>
+
+<p>{$count}</p>
+<p>{$doubled}</p>
+```
+
+## SvelteKit Routing
+
+```
+src/routes/
+├── +page.svelte         # /
+├── about/
+│   └── +page.svelte     # /about
+├── posts/
+│   ├── +page.svelte     # /posts
+│   └── [id]/
+│       └── +page.svelte # /posts/[id]
+└── api/
+    └── users/
+        └── +server.js   # API route
+```
+
+## Form Actions
+
+```svelte
+<!-- +page.svelte -->
+<form method="POST">
+  <input name="title" required />
+  <button>Submit</button>
+</form>
+
+<!-- +page.server.js -->
+export const actions = {
+  default: async ({ request }) => {
+    const formData = await request.formData();
+    const title = formData.get('title');
+    // Process data
+    return { success: true };
+  }
+};
+```
+
+## Animations & Transitions
+
+```svelte
+<script>
+  import { fade, slide } from 'svelte/transition';
+</script>
+
+<div transition:fade={{ duration: 300 }}>
+  Fading in/out
+</div>
+
+<div transition:slide={{ duration: 400 }}>
+  Sliding in/out
+</div>
+```
+
+## Best Practices
+
+1. Embrace compiler reactivity
+2. Use stores for shared state
+3. Keep components simple
+4. Leverage TypeScript
+5. Use +server.js for API routes
+
+## Resources
+
+- [SvelteKit Docs](https://kit.svelte.dev/)
+- [Svelte Tutorial](https://svelte.dev/tutorial)