claudeinone-cli 1.0.2 → 1.0.3

package/kit/.claude/skills/error-boundaries.md

@@ -0,0 +1,84 @@
+# Error Boundaries
+
+## Overview
+Catch JavaScript errors in React component trees and show fallback UI instead of crashing the whole app.
+
+## react-error-boundary (Recommended)
+
+```bash
+npm install react-error-boundary
+```
+
+```tsx
+import { ErrorBoundary, useErrorBoundary } from 'react-error-boundary';
+
+function ErrorFallback({ error, resetErrorBoundary }: {
+  error: Error;
+  resetErrorBoundary: () => void;
+}) {
+  return (
+    <div role="alert" className="p-4 bg-red-50 border border-red-200 rounded">
+      <h2 className="text-red-800 font-semibold">Something went wrong</h2>
+      <pre className="text-sm text-red-600 mt-2">{error.message}</pre>
+      <button onClick={resetErrorBoundary} className="mt-3 px-4 py-2 bg-red-600 text-white rounded">
+        Try again
+      </button>
+    </div>
+  );
+}
+
+export function App() {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => window.location.reload()}>
+      <Dashboard />
+    </ErrorBoundary>
+  );
+}
+
+// Trigger manually from async code
+function DataLoader() {
+  const { showBoundary } = useErrorBoundary();
+  useEffect(() => { fetchData().catch(showBoundary); }, []);
+}
+```
+
+## Next.js App Router Error Boundary
+
+```tsx
+// app/dashboard/error.tsx
+'use client';
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  useEffect(() => { console.error(error); }, [error]);
+  return (
+    <div>
+      <h2>Dashboard failed to load</h2>
+      <button onClick={reset}>Retry</button>
+    </div>
+  );
+}
+```
+
+## Class Component (Vanilla React)
+
+```tsx
+class ErrorBoundary extends Component<{ children: ReactNode; fallback?: ReactNode }, { hasError: boolean }> {
+  state = { hasError: false };
+  static getDerivedStateFromError() { return { hasError: true }; }
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    Sentry.captureException(error, { extra: { componentStack: info.componentStack } });
+  }
+  render() {
+    return this.state.hasError ? (this.props.fallback ?? <h2>Something went wrong</h2>) : this.props.children;
+  }
+}
+```
+
+## Best Practices
+- Place error boundaries at route level AND around isolated features
+- Always send caught errors to Sentry/Datadog
+- Give users an actionable recovery option (retry, reload)
+- Use `resetKeys` prop to auto-reset on route change
+
+## Resources
+- [react-error-boundary](https://www.npmjs.com/package/react-error-boundary)
+- [React error boundary docs](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)

package/kit/.claude/skills/file-storage.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/frontend-angular.md

@@ -0,0 +1,104 @@
+# Angular
+
+## Overview
+Angular is a full-featured TypeScript framework with dependency injection, RxJS reactivity, and a strong opinionated structure.
+
+## Setup
+
+```bash
+npm install -g @angular/cli
+ng new my-app --standalone --routing --style=css
+cd my-app
+ng serve
+```
+
+## Standalone Component
+
+```typescript
+// src/app/users/user-list.component.ts
+import { Component, OnInit, inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { UserService } from './user.service';
+
+@Component({
+  selector: 'app-user-list',
+  standalone: true,
+  imports: [AsyncPipe],
+  template: `
+    <ul>
+      @for (user of users$ | async; track user.id) {
+        <li>{{ user.name }}</li>
+      }
+    </ul>
+  `
+})
+export class UserListComponent implements OnInit {
+  private userService = inject(UserService);
+  users$ = this.userService.getAll();
+
+  ngOnInit() { this.users$.subscribe(); }
+}
+```
+
+## Service with HttpClient
+
+```typescript
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+interface User { id: string; name: string; email: string; }
+
+@Injectable({ providedIn: 'root' })
+export class UserService {
+  private http = inject(HttpClient);
+  private API = '/api/users';
+
+  getAll(): Observable<User[]> { return this.http.get<User[]>(this.API); }
+  getById(id: string): Observable<User> { return this.http.get<User>(`${this.API}/${id}`); }
+  create(data: Omit<User, 'id'>): Observable<User> { return this.http.post<User>(this.API, data); }
+  update(id: string, data: Partial<User>): Observable<User> { return this.http.patch<User>(`${this.API}/${id}`, data); }
+  delete(id: string): Observable<void> { return this.http.delete<void>(`${this.API}/${id}`); }
+}
+```
+
+## Reactive Forms
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <input formControlName="email" type="email" />
+      @if (form.get('email')?.errors?.['required']) {
+        <span>Email is required</span>
+      }
+      <button type="submit" [disabled]="form.invalid">Submit</button>
+    </form>
+  `
+})
+export class LoginComponent {
+  private fb = inject(FormBuilder);
+  form = this.fb.group({
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(8)]]
+  });
+
+  onSubmit() {
+    if (this.form.valid) console.log(this.form.value);
+  }
+}
+```
+
+## Best Practices
+- Use standalone components (Angular 17+) instead of NgModules
+- Use `inject()` instead of constructor injection for cleaner code
+- Use signals for local state, RxJS for async streams
+- Lazy load routes: `loadComponent: () => import('./component')`
+
+## Resources
+- [Angular docs](https://angular.dev)

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

@@ -0,0 +1,94 @@
+# Astro
+
+Build fast, content-focused websites with zero JavaScript by default (islands architecture).
+
+## Basic Setup
+
+```astro
+---
+// Component code (runs at build time)
+const title = "My Site";
+const posts = await fetch('/api/posts').then(r => r.json());
+---
+
+<html>
+  <body>
+    <h1>{title}</h1>
+    <ul>
+      {posts.map(post => (
+        <li><a href={post.url}>{post.title}</a></li>
+      ))}
+    </ul>
+  </body>
+</html>
+```
+
+## Islands Architecture
+
+```astro
+---
+import Counter from '../components/Counter.jsx';
+---
+
+<main>
+  <h1>Static content</h1>
+  <!-- Island: interactive React component -->
+  <Counter client:load />
+</main>
+```
+
+## Routing
+
+```
+src/pages/
+├── index.astro              # /
+├── about.astro              # /about
+├── blog/
+│   ├── index.astro          # /blog
+│   └── [slug].astro         # /blog/:slug
+└── api/
+    └── posts.ts             # /api/posts
+```
+
+## Dynamic Routes
+
+```astro
+---
+export async function getStaticPaths() {
+  const posts = await fetchPosts();
+  return posts.map(post => ({
+    params: { slug: post.slug },
+    props: { post }
+  }));
+}
+
+const { slug } = Astro.params;
+const { post } = Astro.props;
+---
+
+<article>
+  <h1>{post.title}</h1>
+  <Fragment set:html={post.content} />
+</article>
+```
+
+## Performance Benefits
+
+- Zero JavaScript by default
+- Build-time HTML generation
+- Partial hydration for interactive components
+- Fast page loads, excellent Core Web Vitals
+- Great for content sites, blogs, docs
+
+## Best Practices
+
+1. Keep islands small and focused
+2. Use static rendering where possible
+3. Lazy load interactive components
+4. Optimize images aggressively
+5. Use content collections for organized content
+
+## Resources
+
+- [Astro Documentation](https://docs.astro.build/)
+- [Islands Architecture](https://docs.astro.build/en/concepts/islands/)

package/kit/.claude/skills/frontend-bundle-analysis.md

@@ -0,0 +1,147 @@
+# Bundle Analysis & Optimization
+
+Analyzing and reducing bundle sizes.
+
+## Webpack Bundle Analyzer
+
+```bash
+npm install -D webpack-bundle-analyzer
+```
+
+```javascript
+// webpack.config.js
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
+
+module.exports = {
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: true,
+      reportFilename: 'bundle-report.html'
+    })
+  ]
+};
+```
+
+## Size Limits
+
+```json
+{
+  "bundlesize": [
+    {
+      "path": "./dist/main.js",
+      "maxSize": "100kb"
+    },
+    {
+      "path": "./dist/vendor.js",
+      "maxSize": "200kb"
+    }
+  ]
+}
+```
+
+## Code Splitting
+
+```typescript
+// Dynamic import
+const HeavyComponent = lazy(() => import('./HeavyComponent'));
+
+// Route-based splitting
+const Dashboard = lazy(() => import('./pages/Dashboard'));
+const Settings = lazy(() => import('./pages/Settings'));
+
+// Tree shaking
+import { debounce } from 'lodash-es'; // ESM import
+import { debounce } from 'lodash';   // CommonJS (includes all)
+```
+
+## Next.js Bundle Analysis
+
+```bash
+# Analyze bundle
+ANALYZE=true npm run build
+
+# Generate report
+npm install -D @next/bundle-analyzer
+
+# next.config.js
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+module.exports = withBundleAnalyzer({});
+```
+
+## Dependency Audit
+
+```bash
+# Find unused dependencies
+npm install -D depcheck
+npx depcheck
+
+# Check for vulnerabilities
+npm audit
+npm audit fix
+
+# Check bundle impact
+npm install -D bundlesize
+npm run bundlesize
+```
+
+## Optimization Strategies
+
+```typescript
+// 1. Remove unused packages
+// Before: 2.5MB
+// Remove lodash, moment (use date-fns)
+// After: 1.8MB
+
+// 2. Code splitting
+// Route-based splitting
+const Home = lazy(() => import('./pages/Home'));
+const Dashboard = lazy(() => import('./pages/Dashboard'));
+
+// 3. Lazy load heavy libraries
+// Only load PDF viewer when needed
+const PDFViewer = lazy(() => import('./PDFViewer'));
+
+// 4. Use lighter alternatives
+// moment.js (67KB) → date-fns (13KB)
+// lodash (70KB) → lodash-es with tree shaking
+
+// 5. Minification
+// webpack minifies by default
+// Next.js compresses with gzip
+
+// 6. Remove debug code
+if (process.env.NODE_ENV === 'production') {
+  console.log = () => {}; // Remove logs
+}
+```
+
+## Monitoring Bundle
+
+```typescript
+// src/utils/bundleMetrics.ts
+if (typeof window !== 'undefined') {
+  console.log('Bundle metrics:', {
+    initialLoad: performance.timing.loadEventEnd - performance.timing.navigationStart,
+    firstPaint: performance.getEntriesByName('first-paint')[0],
+    resources: performance.getEntriesByType('resource').length
+  });
+}
+```
+
+## Best Practices
+
+✅ **Regular audits** - Monitor bundle size
+✅ **Code splitting** - Chunk by route or feature
+✅ **Tree shaking** - Use ES modules
+✅ **Lazy loading** - Load on demand
+✅ **Compression** - Enable gzip
+
+## Resources
+
+- [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
+- [Web.dev Bundle](https://web.dev/reduce-javascript-for-faster-site-performance/)

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

@@ -0,0 +1,134 @@
+# Form Handling & Validation
+
+Building robust, validated forms.
+
+## React Hook Form
+
+```typescript
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+  agreeToTerms: z.boolean().default(false)
+});
+
+type FormData = z.infer<typeof schema>;
+
+export function LoginForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const onSubmit = async (data: FormData) => {
+    try {
+      await loginUser(data);
+      reset();
+    } catch (error) {
+      console.error('Login failed:', error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input
+        {...register('email')}
+        type="email"
+        placeholder="Email"
+      />
+      {errors.email && <span>{errors.email.message}</span>}
+
+      <input
+        {...register('password')}
+        type="password"
+        placeholder="Password"
+      />
+      {errors.password && <span>{errors.password.message}</span>}
+
+      <label>
+        <input {...register('agreeToTerms')} type="checkbox" />
+        I agree to terms
+      </label>
+
+      <button type="submit" disabled={isSubmitting}>
+        {isSubmitting ? 'Logging in...' : 'Login'}
+      </button>
+    </form>
+  );
+}
+```
+
+## Formik Alternative
+
+```typescript
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  email: Yup.string().email().required(),
+  password: Yup.string().min(8).required()
+});
+
+export function SignupForm() {
+  return (
+    <Formik
+      initialValues={{ email: '', password: '' }}
+      validationSchema={validationSchema}
+      onSubmit={async (values) => {
+        await registerUser(values);
+      }}
+    >
+      <Form>
+        <Field name="email" type="email" placeholder="Email" />
+        <ErrorMessage name="email" component="div" />
+
+        <Field name="password" type="password" placeholder="Password" />
+        <ErrorMessage name="password" component="div" />
+
+        <button type="submit">Sign up</button>
+      </Form>
+    </Formik>
+  );
+}
+```
+
+## Advanced Validation
+
+```typescript
+const schema = z.object({
+  password: z.string().min(8).max(50),
+  confirmPassword: z.string()
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"]
+});
+
+// Field-level validation
+const validateEmail = async (email: string) => {
+  const exists = await checkEmailExists(email);
+  if (exists) {
+    throw new Error('Email already registered');
+  }
+};
+```
+
+## Best Practices
+
+✅ **Real-time validation** - Immediate feedback
+✅ **Field-level errors** - Show errors next to fields
+✅ **Disabled submit** - During submission
+✅ **Clear labels** - Accessible forms
+✅ **CSRF protection** - Validate on server
+
+## Resources
+
+- [React Hook Form](https://react-hook-form.com/)
+- [Formik](https://formik.org/)
+- [Zod Validation](https://zod.dev/)

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

@@ -0,0 +1,86 @@
+# HTMX
+
+## Overview
+HTMX extends HTML with AJAX, WebSockets, and SSE attributes — no JavaScript required for common patterns.
+
+## Core Attributes
+
+```html
+<!-- GET request on click, swap into #result -->
+<button hx-get="/api/users" hx-target="#result" hx-swap="innerHTML">
+  Load Users
+</button>
+<div id="result"></div>
+
+<!-- POST form, replace form with response -->
+<form hx-post="/api/users" hx-target="#user-list" hx-swap="beforeend">
+  <input name="email" type="email" required />
+  <input name="name" required />
+  <button type="submit">Add User</button>
+</form>
+
+<!-- Delete with confirmation, remove row -->
+<tr id="user-1">
+  <td>John</td>
+  <td>
+    <button hx-delete="/api/users/1"
+            hx-confirm="Delete this user?"
+            hx-target="#user-1"
+            hx-swap="outerHTML">Delete</button>
+  </td>
+</tr>
+
+<!-- Live search with debounce -->
+<input type="search" name="q"
+       hx-get="/api/search"
+       hx-trigger="keyup changed delay:300ms"
+       hx-target="#results" />
+```
+
+## Server Response (Express/Node.js)
+
+```typescript
+import express from 'express';
+const app = express();
+app.use(express.urlencoded({ extended: true }));
+
+// Return HTML fragments
+app.get('/api/users', async (req, res) => {
+  const users = await db.user.findMany();
+  const html = users.map(u => `<li>${u.name} (${u.email})</li>`).join('');
+  res.send(`<ul>${html}</ul>`);
+});
+
+app.post('/api/users', async (req, res) => {
+  const user = await db.user.create({ data: req.body });
+  res.send(`<li id="user-${user.id}">${user.name}</li>`);
+});
+
+app.delete('/api/users/:id', async (req, res) => {
+  await db.user.delete({ where: { id: req.params.id } });
+  res.send(''); // Empty response removes the element
+});
+```
+
+## Loading Indicators
+
+```html
+<button hx-get="/api/slow-data" hx-target="#result">
+  Load Data
+  <span class="htmx-indicator">Loading...</span>
+</button>
+```
+
+```css
+.htmx-indicator { display: none; }
+.htmx-request .htmx-indicator { display: inline; }
+```
+
+## Best Practices
+- Return HTML fragments, not JSON
+- Use `hx-boost` on `<a>` and `<form>` tags to progressively enhance all links
+- Combine with Alpine.js for local state that doesn't need server round-trips
+- Use `HX-Trigger` response header to trigger events after requests
+
+## Resources
+- [HTMX docs](https://htmx.org/docs/)