claudeinone-cli 1.0.1 → 1.0.3

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

@@ -0,0 +1,100 @@
+# Frontend Testing
+
+## Overview
+Test React components with React Testing Library, mock APIs with MSW, and run E2E tests with Playwright.
+
+## React Testing Library
+
+```bash
+npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-dom
+```
+
+```tsx
+// components/LoginForm.test.tsx
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LoginForm } from './LoginForm';
+
+describe('LoginForm', () => {
+  it('shows error on invalid email', async () => {
+    render(<LoginForm onSubmit={vi.fn()} />);
+    await userEvent.type(screen.getByLabelText('Email'), 'notanemail');
+    await userEvent.click(screen.getByRole('button', { name: /sign in/i }));
+    expect(screen.getByText(/invalid email/i)).toBeInTheDocument();
+  });
+
+  it('calls onSubmit with credentials', async () => {
+    const onSubmit = vi.fn();
+    render(<LoginForm onSubmit={onSubmit} />);
+    await userEvent.type(screen.getByLabelText('Email'), 'user@example.com');
+    await userEvent.type(screen.getByLabelText('Password'), 'password123');
+    await userEvent.click(screen.getByRole('button', { name: /sign in/i }));
+    expect(onSubmit).toHaveBeenCalledWith({ email: 'user@example.com', password: 'password123' });
+  });
+});
+```
+
+## MSW (Mock Service Worker)
+
+```bash
+npm install -D msw
+```
+
+```typescript
+// src/mocks/handlers.ts
+import { http, HttpResponse } from 'msw';
+
+export const handlers = [
+  http.get('/api/users', () => {
+    return HttpResponse.json([
+      { id: '1', name: 'Alice', email: 'alice@example.com' }
+    ]);
+  }),
+  http.post('/api/users', async ({ request }) => {
+    const body = await request.json() as any;
+    return HttpResponse.json({ id: '2', ...body }, { status: 201 });
+  }),
+];
+
+// src/mocks/server.ts (Node.js for tests)
+import { setupServer } from 'msw/node';
+export const server = setupServer(...handlers);
+
+// vitest.setup.ts
+import { server } from './src/mocks/server';
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+```
+
+## Playwright E2E
+
+```bash
+npm install -D @playwright/test
+npx playwright install
+```
+
+```typescript
+// e2e/login.spec.ts
+import { test, expect } from '@playwright/test';
+
+test('user can log in', async ({ page }) => {
+  await page.goto('/login');
+  await page.fill('[name="email"]', 'user@example.com');
+  await page.fill('[name="password"]', 'password123');
+  await page.click('button[type="submit"]');
+  await expect(page).toHaveURL('/dashboard');
+  await expect(page.getByText('Welcome')).toBeVisible();
+});
+```
+
+## Best Practices
+- Test behavior, not implementation — query by role, label, text
+- Use MSW for API mocking instead of `vi.mock` for fetch
+- Write E2E tests for critical user flows only (login, checkout, signup)
+- Run component tests with `jsdom`, E2E with real browser
+
+## Resources
+- [Testing Library docs](https://testing-library.com/docs)
+- [MSW docs](https://mswjs.io/docs)
+- [Playwright docs](https://playwright.dev)

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

@@ -0,0 +1,94 @@
+# Vite
+
+## Overview
+Vite is a fast build tool using native ES modules in dev and Rollup for production builds.
+
+## Setup
+
+```bash
+npm create vite@latest my-app -- --template react-ts
+cd my-app && npm install && npm run dev
+```
+
+## vite.config.ts
+
+```typescript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: { '@': path.resolve(__dirname, './src') }
+  },
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': { target: 'http://localhost:8080', changeOrigin: true }
+    }
+  },
+  build: {
+    target: 'esnext',
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          router: ['react-router-dom'],
+        }
+      }
+    }
+  }
+});
+```
+
+## Environment Variables
+
+```env
+# .env.development
+VITE_API_URL=http://localhost:8080
+VITE_APP_NAME=My App Dev
+
+# .env.production
+VITE_API_URL=https://api.example.com
+VITE_APP_NAME=My App
+```
+
+```typescript
+// Access in code (must start with VITE_)
+const apiUrl = import.meta.env.VITE_API_URL;
+```
+
+## Path Aliases in TypeScript
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "paths": { "@/*": ["./src/*"] }
+  }
+}
+```
+
+## Bundle Analysis
+
+```bash
+npm install -D rollup-plugin-visualizer
+```
+
+```typescript
+import { visualizer } from 'rollup-plugin-visualizer';
+export default defineConfig({
+  plugins: [react(), visualizer({ open: true, gzipSize: true })]
+});
+```
+
+## Best Practices
+- Use path aliases (`@/`) for clean imports
+- Use `manualChunks` to split vendor and feature bundles
+- Run `vite preview` before deploying to test production build locally
+- Use `import.meta.env.PROD` to conditionally include debug tools
+
+## Resources
+- [Vite docs](https://vitejs.dev/guide/)

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

@@ -0,0 +1,133 @@
+# Vue 3
+
+Progressive JavaScript framework with reactive data binding and component-based architecture.
+
+## Composition API (Recommended)
+
+```javascript
+import { ref, computed, onMounted } from 'vue';
+
+export default {
+  setup() {
+    const count = ref(0);
+    const doubled = computed(() => count.value * 2);
+
+    const increment = () => {
+      count.value++;
+    };
+
+    onMounted(() => {
+      console.log('Component mounted');
+    });
+
+    return { count, doubled, increment };
+  }
+}
+```
+
+## Template Syntax
+
+```vue
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Doubled: {{ doubled }}</p>
+    <button @click="increment">+1</button>
+    
+    <div v-if="count > 5">Count is high!</div>
+    <ul>
+      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
+    </ul>
+    
+    <input v-model="message" />
+  </div>
+</template>
+```
+
+## Reactive Data
+
+```javascript
+import { ref, reactive, watch } from 'vue';
+
+// ref for single values
+const count = ref(0);
+
+// reactive for objects
+const state = reactive({
+  user: { name: 'John', age: 30 },
+  posts: []
+});
+
+// Watch for changes
+watch(() => state.user.age, (newAge, oldAge) => {
+  console.log(`Age changed from ${oldAge} to ${newAge}`);
+});
+```
+
+## Props & Emits
+
+```vue
+<!-- Parent -->
+<MyComponent :user="currentUser" @update="handleUpdate" />
+
+<!-- Child -->
+<script setup>
+defineProps({
+  user: { type: Object, required: true }
+});
+const emit = defineEmits(['update']);
+</script>
+```
+
+## Pinia State Management
+
+```javascript
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0);
+  const increment = () => count.value++;
+  return { count, increment };
+});
+
+// Use in component
+import { useCounterStore } from '@/stores/counter';
+
+const counter = useCounterStore();
+counter.increment();
+```
+
+## Lifecycle Hooks
+
+- `onBeforeMount`, `onMounted` - Mounting
+- `onBeforeUpdate`, `onUpdated` - Updating
+- `onBeforeUnmount`, `onUnmounted` - Unmounting
+
+## Best Practices
+
+1. Use Composition API for new projects
+2. Keep components focused and reusable
+3. Use Pinia for state management
+4. Leverage reactive data binding
+5. Use TypeScript for type safety
+
+## Nuxt (Vue Meta-Framework)
+
+Nuxt provides: file-based routing, server-side rendering, API routes, auto-imports.
+
+```
+app/
+├── pages/
+│   ├── index.vue        # /
+│   └── about.vue        # /about
+├── components/          # Auto-imported
+└── server/
+    └── routes/
+        └── api.ts       # /api/*
+```
+
+## Resources
+
+- [Vue 3 Docs](https://vuejs.org/)
+- [Pinia Documentation](https://pinia.vuejs.org/)
+- [Nuxt Documentation](https://nuxt.com/)

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

@@ -0,0 +1,93 @@
+# Webpack
+
+## Overview
+Webpack is a module bundler with powerful code splitting, tree shaking, and plugin ecosystem for complex build requirements.
+
+## webpack.config.ts
+
+```typescript
+import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { Configuration } from 'webpack';
+
+const config: Configuration = {
+  entry: './src/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].[contenthash].js',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    alias: { '@': path.resolve(__dirname, 'src') },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ template: './public/index.html' }),
+    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
+  ],
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        vendor: { test: /node_modules/, name: 'vendors', chunks: 'all' },
+      },
+    },
+    runtimeChunk: 'single',
+  },
+};
+
+export default config;
+```
+
+## Dev Server
+
+```typescript
+import { merge } from 'webpack-merge';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+
+export default merge(config, {
+  mode: 'development',
+  devtool: 'eval-source-map',
+  devServer: {
+    port: 3000,
+    hot: true,
+    historyApiFallback: true,
+    proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } },
+  },
+  plugins: [new ReactRefreshWebpackPlugin()],
+});
+```
+
+## Bundle Analysis
+
+```bash
+npm install -D webpack-bundle-analyzer
+```
+
+```typescript
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+plugins: [new BundleAnalyzerPlugin()]
+```
+
+## Best Practices
+- Use `[contenthash]` in filenames for long-term caching
+- Split vendor chunks separately from app code
+- Enable `runtimeChunk: 'single'` to share the runtime across chunks
+- Use `ts-loader` with `transpileOnly: true` for faster builds in dev
+
+## Resources
+- [Webpack docs](https://webpack.js.org/concepts/)

package/kit/.claude/skills/functional-programming.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/hooks-custom.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/http-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/i18n-general.md

@@ -0,0 +1,89 @@
+# Internationalization (i18n)
+
+## Overview
+Support multiple languages and locales in your application with proper translation management and locale-aware formatting.
+
+## react-i18next
+
+```bash
+npm install i18next react-i18next i18next-browser-languagedetector
+```
+
+```typescript
+// src/i18n/index.ts
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import en from './locales/en.json';
+import es from './locales/es.json';
+import ja from './locales/ja.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: { en: { translation: en }, es: { translation: es }, ja: { translation: ja } },
+    fallbackLng: 'en',
+    interpolation: { escapeValue: false },
+  });
+```
+
+## Translation Files
+
+```json
+// locales/en.json
+{
+  "common": { "save": "Save", "cancel": "Cancel", "loading": "Loading..." },
+  "auth": {
+    "login": "Sign in",
+    "welcome": "Welcome, {{name}}!",
+    "items": "{{count}} item",
+    "items_other": "{{count}} items"
+  }
+}
+```
+
+## Usage in Components
+
+```tsx
+import { useTranslation } from 'react-i18next';
+
+function Header({ user }: { user: User }) {
+  const { t, i18n } = useTranslation();
+
+  return (
+    <div>
+      <h1>{t('auth.welcome', { name: user.name })}</h1>
+      <p>{t('auth.items', { count: 5 })}</p>
+      <select value={i18n.language} onChange={e => i18n.changeLanguage(e.target.value)}>
+        <option value="en">English</option>
+        <option value="es">Español</option>
+        <option value="ja">日本語</option>
+      </select>
+    </div>
+  );
+}
+```
+
+## Date/Number/Currency Formatting
+
+```typescript
+// Locale-aware formatting
+const formatter = new Intl.DateTimeFormat('ja-JP', { year: 'numeric', month: 'long', day: 'numeric' });
+const price = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
+const percent = new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 1 });
+
+formatter.format(new Date()); // '2024年1月15日'
+price.format(1234.56);       // '1.234,56 €'
+percent.format(0.856);       // '85.6%'
+```
+
+## Best Practices
+- Use ICU message format for plurals and genders
+- Never hardcode strings — extract all user-visible text
+- Provide context keys in long files (`auth.login`, `common.save`)
+- Test RTL layout for Arabic and Hebrew with `dir="rtl"`
+
+## Resources
+- [react-i18next docs](https://react.i18next.com)
+- [Intl API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)