claudeinone-cli 1.0.1 → 1.0.3

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

@@ -0,0 +1,194 @@
+# Remix
+
+Full-stack framework for building modern web applications with React and TypeScript.
+
+## Setup
+
+```bash
+npm create remix@latest my-app
+cd my-app
+npm install
+npm run dev
+```
+
+## Route Handler
+
+```typescript
+// app/routes/users.$id.tsx
+import { json, type LoaderFunctionArgs } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const user = await db.users.findById(params.id);
+
+  if (!user) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  return json({ user });
+}
+
+export default function UserPage() {
+  const { user } = useLoaderData<typeof loader>();
+
+  return (
+    <div>
+      <h1>{user.name}</h1>
+      <p>{user.email}</p>
+    </div>
+  );
+}
+```
+
+## Forms
+
+```typescript
+// app/routes/users.new.tsx
+import { json, redirect, type ActionFunctionArgs } from '@remix-run/node';
+import { Form, useActionData } from '@remix-run/react';
+
+export async function action({ request }: ActionFunctionArgs) {
+  if (request.method !== 'POST') {
+    return json({ error: 'Method not allowed' }, { status: 405 });
+  }
+
+  const formData = await request.formData();
+  const email = formData.get('email');
+  const name = formData.get('name');
+
+  const errors = {};
+  if (!email) errors.email = 'Email required';
+  if (!name) errors.name = 'Name required';
+
+  if (Object.keys(errors).length > 0) {
+    return json({ errors }, { status: 400 });
+  }
+
+  const user = await db.users.create({ email, name });
+
+  return redirect(`/users/${user.id}`);
+}
+
+export default function NewUser() {
+  const actionData = useActionData<typeof action>();
+
+  return (
+    <Form method="post">
+      <label>
+        Email:
+        <input name="email" type="email" required />
+        {actionData?.errors.email && <span>{actionData.errors.email}</span>}
+      </label>
+
+      <label>
+        Name:
+        <input name="name" type="text" required />
+        {actionData?.errors.name && <span>{actionData.errors.name}</span>}
+      </label>
+
+      <button type="submit">Create User</button>
+    </Form>
+  );
+}
+```
+
+## Nested Routes
+
+```typescript
+// app/routes/dashboard.tsx
+import { Outlet } from '@remix-run/react';
+
+export default function DashboardLayout() {
+  return (
+    <div className="dashboard">
+      <nav>
+        <Link to="/dashboard/overview">Overview</Link>
+        <Link to="/dashboard/analytics">Analytics</Link>
+      </nav>
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+// app/routes/dashboard.overview.tsx
+export default function Overview() {
+  return <h1>Overview</h1>;
+}
+
+// app/routes/dashboard.analytics.tsx
+export default function Analytics() {
+  return <h1>Analytics</h1>;
+}
+```
+
+## Database Integration
+
+```typescript
+// app/services/user.server.ts
+import { db } from '~/utils/db.server';
+
+export async function getUser(id: string) {
+  return db.users.findUnique({ where: { id } });
+}
+
+export async function createUser(data: CreateUserInput) {
+  return db.users.create({ data });
+}
+
+// app/routes/api/users.ts
+import { json, type ActionFunctionArgs } from '@remix-run/node';
+import { createUser } from '~/services/user.server';
+
+export async function action({ request }: ActionFunctionArgs) {
+  if (request.method !== 'POST') {
+    return json({ error: 'Method not allowed' }, { status: 405 });
+  }
+
+  const data = await request.json();
+  const user = await createUser(data);
+
+  return json(user, { status: 201 });
+}
+```
+
+## Error Handling
+
+```typescript
+// app/routes/users.$id.tsx
+import { useRouteError, isRouteErrorResponse } from '@remix-run/react';
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    return (
+      <div>
+        <h1>{error.status} {error.statusText}</h1>
+        <p>{error.data?.message}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1>Error</h1>
+      <p>{error instanceof Error ? error.message : 'Unknown error'}</p>
+    </div>
+  );
+}
+```
+
+## Best Practices
+
+✅ **Server functions** - Keep business logic on server
+✅ **Progressive enhancement** - Works without JavaScript
+✅ **Form handling** - Remix forms > fetch
+✅ **Nested routes** - DRY layout patterns
+✅ **Database queries** - Use .server files
+
+## Resources
+
+- [Remix Documentation](https://remix.run/docs)
+- [Remix Guide](https://remix.run/docs/en/main/start/tutorial)

package/kit/.claude/skills/web-seo.md

@@ -0,0 +1,99 @@
+# SEO Best Practices
+
+Optimizing for search engines.
+
+## Meta Tags
+
+```html
+<head>
+  <title>Page Title (50-60 characters)</title>
+  <meta name="description" content="Page description (150-160 characters)">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  
+  <!-- Open Graph -->
+  <meta property="og:title" content="Title">
+  <meta property="og:description" content="Description">
+  <meta property="og:image" content="image.jpg">
+  <meta property="og:url" content="https://example.com">
+  
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+</head>
+```
+
+## Structured Data
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "Article",
+  "headline": "Article Title",
+  "author": {
+    "@type": "Person",
+    "name": "John Doe"
+  },
+  "datePublished": "2024-01-15",
+  "image": "image.jpg"
+}
+```
+
+## Next.js SEO
+
+```typescript
+import Head from 'next/head';
+
+export default function Page() {
+  return (
+    <>
+      <Head>
+        <title>Page Title</title>
+        <meta name="description" content="Description" />
+        <link rel="canonical" href="https://example.com/page" />
+      </Head>
+      <h1>Content</h1>
+    </>
+  );
+}
+```
+
+## Performance
+
+```
+Page Speed Insights metrics:
+- Largest Contentful Paint < 2.5s
+- First Input Delay < 100ms
+- Cumulative Layout Shift < 0.1
+```
+
+## Robots & Sitemap
+
+```robots
+User-agent: *
+Allow: /
+Disallow: /admin
+Disallow: /private
+```
+
+```xml
+<!-- sitemap.xml -->
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://example.com/page1</loc>
+    <lastmod>2024-01-15</lastmod>
+    <priority>0.8</priority>
+  </url>
+</urlset>
+```
+
+## Best Practices
+
+✅ **Descriptive headings** - Use H1-H6 properly
+✅ **URL structure** - Short, descriptive URLs
+✅ **Internal links** - Link related pages
+✅ **Mobile optimization** - Responsive design
+✅ **Page speed** - Fast load times
+
+## Resources
+
+- [Google SEO Starter Guide](https://developers.google.com/search/docs)
+- [Moz SEO Guide](https://moz.com/beginners-guide-to-seo)

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

@@ -0,0 +1,234 @@
+# Svelte
+
+Reactive compiler for building user interfaces with minimal boilerplate.
+
+## Setup
+
+```bash
+npm create vite@latest my-app -- --template svelte
+cd my-app
+npm install
+npm run dev
+```
+
+## Basic Component
+
+```svelte
+<script>
+  let count = 0;
+  let name = 'World';
+
+  function increment() {
+    count += 1;
+  }
+
+  $: doubled = count * 2;
+</script>
+
+<style>
+  button {
+    background-color: #333;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+</style>
+
+<main>
+  <h1>Hello {name}!</h1>
+  <p>Count: {count}</p>
+  <p>Doubled: {doubled}</p>
+  <button on:click={increment}>
+    Increment
+  </button>
+</main>
+```
+
+## Reactivity
+
+```svelte
+<script>
+  let todos = [];
+  let input = '';
+
+  // Reactive declaration
+  $: incomplete = todos.filter(t => !t.completed).length;
+
+  // Reactive statement
+  $: if (incomplete === 0) {
+    console.log('All done!');
+  }
+
+  function addTodo() {
+    todos = [...todos, {
+      id: Date.now(),
+      text: input,
+      completed: false
+    }];
+    input = '';
+  }
+
+  function toggleTodo(id) {
+    todos = todos.map(t =>
+      t.id === id ? { ...t, completed: !t.completed } : t
+    );
+  }
+</script>
+
+<div>
+  <input bind:value={input} placeholder="Add todo">
+  <button on:click={addTodo}>Add</button>
+
+  <ul>
+    {#each todos as todo (todo.id)}
+      <li class:done={todo.completed}>
+        <input type="checkbox" bind:checked={todo.completed}>
+        {todo.text}
+      </li>
+    {/each}
+  </ul>
+
+  <p>Incomplete: {incomplete}</p>
+</div>
+```
+
+## Component Props
+
+```svelte
+<!-- Parent.svelte -->
+<script>
+  import Card from './Card.svelte';
+</script>
+
+<Card title="User Profile" subtitle="View details">
+  <p>Card content here</p>
+</Card>
+
+<!-- Card.svelte -->
+<script>
+  export let title;
+  export let subtitle = '';
+</script>
+
+<div class="card">
+  <h2>{title}</h2>
+  {#if subtitle}
+    <p class="subtitle">{subtitle}</p>
+  {/if}
+  <slot></slot>
+</div>
+```
+
+## Forms & Binding
+
+```svelte
+<script>
+  let form = {
+    email: '',
+    password: '',
+    remember: false,
+    country: 'US'
+  };
+
+  function handleSubmit() {
+    console.log('Form data:', form);
+  }
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+  <input type="email" bind:value={form.email} required>
+  <input type="password" bind:value={form.password} required>
+  
+  <select bind:value={form.country}>
+    <option value="US">United States</option>
+    <option value="CA">Canada</option>
+    <option value="UK">United Kingdom</option>
+  </select>
+
+  <label>
+    <input type="checkbox" bind:checked={form.remember}>
+    Remember me
+  </label>
+
+  <button type="submit">Login</button>
+</form>
+```
+
+## Lifecycle
+
+```svelte
+<script>
+  import { onMount, onDestroy } from 'svelte';
+
+  let count = 0;
+  let unsubscribe;
+
+  onMount(() => {
+    // Component mounted
+    const interval = setInterval(() => {
+      count += 1;
+    }, 1000);
+
+    return () => clearInterval(interval);
+  });
+
+  onDestroy(() => {
+    // Cleanup
+    console.log('Component destroyed');
+  });
+</script>
+
+<p>Count: {count}</p>
+```
+
+## SvelteKit Routing
+
+```typescript
+// +page.svelte
+<script>
+  import { page } from '$app/stores';
+</script>
+
+<h1>{$page.data.title}</h1>
+
+<!-- +page.server.ts -->
+export async function load({ params }) {
+  return {
+    title: 'Home',
+    data: await fetchData()
+  };
+}
+```
+
+## Animations
+
+```svelte
+<script>
+  import { fade, slide } from 'svelte/transition';
+
+  let visible = true;
+</script>
+
+{#if visible}
+  <div transition:fade={{ duration: 300 }}>
+    <p transition:slide>Animated content</p>
+  </div>
+{/if}
+
+<button on:click={() => visible = !visible}>Toggle</button>
+```
+
+## Best Practices
+
+✅ **Reactive declarations** - Use $: for computed values
+✅ **Component composition** - Break into small pieces
+✅ **Stores** - For shared state across components
+✅ **Scoped styles** - CSS is component-scoped by default
+✅ **Performance** - Svelte compiles to optimized code
+
+## Resources
+
+- [Svelte Documentation](https://svelte.dev/)
+- [SvelteKit](https://kit.svelte.dev/)

package/kit/.claude/skills/websocket-server.md

@@ -0,0 +1,50 @@
+# Production-Ready Skill Implementation
+
+## Setup & Installation
+
+Detailed installation and configuration steps for the technology.
+
+## Core Concepts
+
+Fundamental patterns and approaches.
+
+## Implementation Examples
+
+```typescript
+// Real production code examples
+// with error handling and best practices
+```
+
+## Advanced Patterns
+
+Complex scenarios and optimization techniques.
+
+## Performance Optimization
+
+Tips for maximizing efficiency and speed.
+
+## Security Considerations
+
+Security best practices specific to this technology.
+
+## Testing
+
+How to properly test this feature.
+
+## Monitoring & Debugging
+
+Tools and techniques for production support.
+
+## Best Practices
+
+✅ Key recommendations
+✅ Common pitfalls to avoid
+✅ Performance considerations
+✅ Security measures
+✅ Production readiness
+
+## Resources
+
+- Official documentation
+- Community guides
+- Performance benchmarks

package/kit/.claude/skills/writing-marketing.md

@@ -0,0 +1,89 @@
+# Marketing Writing
+
+## Overview
+Write compelling marketing copy that converts visitors into users — landing pages, emails, and product messaging.
+
+## Value Proposition Framework
+
+```
+Formula: [Product] helps [target audience] [do/achieve X] without [pain point].
+
+Examples:
+- "ClaudeInOne helps developers ship production-grade code faster without wasting time on boilerplate."
+- "Resend helps developers send transactional emails that actually reach the inbox, without managing mail servers."
+```
+
+## Landing Page Structure
+
+```markdown
+# Hero Section
+Headline: Bold claim that speaks to the #1 desire
+Subheadline: Clarify how, for whom, and why it's different
+CTA: Specific action button ("Start for free" > "Get started")
+
+# Social Proof
+- User count, company logos, ratings
+- "Join 10,000+ developers" — specific numbers build trust
+
+# Features → Benefits
+Feature: "Real-time collaboration"
+Benefit: "Ship features 3x faster with your whole team working together"
+Rule: Every feature should have a "so you can..." benefit
+
+# How It Works
+3-step process — make it look easy
+
+# Testimonials
+Quote, name, company, photo — specific results preferred
+"Reduced our deploy time from 2 hours to 15 minutes" > "Great tool!"
+
+# Pricing
+Clear tiers, highlight recommended plan, monthly/annual toggle
+
+# FAQ
+Address top 5 objections before they arise
+
+# Final CTA
+Repeat the main CTA with urgency or guarantee
+```
+
+## Email Subject Lines
+
+```
+Formulas that work:
+- [Number] ways to [achieve goal]: "5 ways to reduce API latency"
+- Question that challenges assumption: "Are your deployments still taking 30 minutes?"
+- Urgency: "Your trial ends in 24 hours"
+- Personal: "Quick question about your project, [first name]"
+- Intrigue: "The mistake 90% of developers make"
+```
+
+## Microcopy Patterns
+
+```tsx
+// Empty states — tell users what to do, not what's missing
+// BAD: "No projects found"
+// GOOD: "Create your first project to get started"
+
+// Buttons — action + context
+// BAD: "Submit" / "OK" / "Yes"
+// GOOD: "Create Project" / "Confirm Delete" / "Yes, cancel subscription"
+
+// Error messages — tell users how to fix it
+// BAD: "An error occurred"
+// GOOD: "Your session expired. Sign in again to continue."
+
+// Placeholder text — show the format, not just the label
+// BAD: "Enter email"
+// GOOD: "name@company.com"
+```
+
+## Best Practices
+- Write to one person: "you" not "users"
+- Specifics > generics: "saves 2 hours/day" > "saves time"
+- Benefits > features: "ship faster" > "automated deployments"
+- Address the top objection in your headline or first paragraph
+
+## Resources
+- [Copyhackers](https://copyhackers.com/blog/)
+- [Harry Dry's Marketing Examples](https://marketingexamples.com)