claudeinone-cli 1.0.2 → 1.0.3

package/kit/.claude/skills/styling-css-modules.md

@@ -0,0 +1,219 @@
+# CSS Modules
+
+Scoped CSS with automatic naming and no conflicts.
+
+## Basic Usage
+
+```module.css
+/* Button.module.css */
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background-color 0.3s;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}
+
+.button.primary {
+  background-color: #28a745;
+}
+
+.button.primary:hover {
+  background-color: #218838;
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+```
+
+```jsx
+// Button.jsx
+import styles from './Button.module.css';
+
+export function Button({ variant = 'primary', disabled = false, children }) {
+  return (
+    <button
+      className={`${styles.button} ${styles[variant]}`}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
+```
+
+## Composition
+
+```module.css
+/* Form.module.css */
+.form {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+}
+
+.group {
+  margin-bottom: 20px;
+}
+
+.label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #333;
+}
+
+.input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+.error {
+  composes: input;
+  border-color: #dc3545;
+}
+
+.error:focus {
+  box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
+}
+```
+
+```jsx
+// LoginForm.jsx
+import styles from './Form.module.css';
+
+export function LoginForm() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+
+  return (
+    <form className={styles.form}>
+      <div className={styles.group}>
+        <label className={styles.label}>Email</label>
+        <input
+          className={error ? styles.error : styles.input}
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+      </div>
+    </form>
+  );
+}
+```
+
+## TypeScript Support
+
+```typescript
+// Button.module.css
+export const button: string;
+export const primary: string;
+export const disabled: string;
+```
+
+```typescript
+// Button.tsx
+import styles from './Button.module.css';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary';
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  className,
+  ...props
+}) => {
+  return (
+    <button
+      className={`${styles.button} ${styles[variant]} ${className || ''}`}
+      {...props}
+    />
+  );
+};
+```
+
+## Mixins with PostCSS
+
+```module.css
+/* mixins.css */
+@define-mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@define-mixin button-base {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s;
+}
+
+/* Component.module.css */
+.container {
+  @mixin flex-center;
+  height: 100vh;
+}
+
+.button {
+  @mixin button-base;
+  background-color: #007bff;
+  color: white;
+}
+```
+
+## Organization Pattern
+
+```
+src/
+├── components/
+│   ├── Button/
+│   │   ├── Button.tsx
+│   │   └── Button.module.css
+│   ├── Card/
+│   │   ├── Card.tsx
+│   │   └── Card.module.css
+│   └── Form/
+│       ├── Form.tsx
+│       └── Form.module.css
+└── styles/
+    ├── globals.css
+    └── variables.css
+```
+
+## Best Practices
+
+✅ **Namespace by component** - One module per component
+✅ **Avoid nesting** - Keep selectors simple
+✅ **Composition** - Use composes for DRY styles
+✅ **TypeScript** - Get type safety for classes
+✅ **Global styles** - Use separate global file
+
+## Resources
+
+- [CSS Modules Spec](https://github.com/css-modules/css-modules)
+- [PostCSS Documentation](https://postcss.org/)

package/kit/.claude/skills/styling-styled-components.md

@@ -0,0 +1,206 @@
+# styled-components
+
+CSS-in-JS library for component-scoped styling with full JavaScript support.
+
+## Setup
+
+```bash
+npm install styled-components
+npm install -D @types/styled-components
+```
+
+## Basic Usage
+
+```typescript
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+`;
+
+export function Button({ children, ...props }) {
+  return <StyledButton {...props}>{children}</StyledButton>;
+}
+```
+
+## Props & Theming
+
+```typescript
+const StyledInput = styled.input<{ hasError: boolean }>`
+  width: 100%;
+  padding: 10px;
+  border: 2px solid ${props => props.hasError ? '#dc3545' : '#ddd'};
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus {
+    outline: none;
+    border-color: ${props => props.hasError ? '#dc3545' : '#007bff'};
+    box-shadow: 0 0 5px ${props => props.hasError ? 'rgba(220, 53, 69, 0.5)' : 'rgba(0, 123, 255, 0.5)'};
+  }
+`;
+
+export function FormInput({ error, ...props }) {
+  return <StyledInput hasError={!!error} {...props} />;
+}
+```
+
+## Global Styles
+
+```typescript
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
+  }
+
+  button {
+    font-family: inherit;
+  }
+`;
+
+export function App() {
+  return (
+    <>
+      <GlobalStyles />
+      <MyComponent />
+    </>
+  );
+}
+```
+
+## Theme Provider
+
+```typescript
+import { ThemeProvider } from 'styled-components';
+
+const lightTheme = {
+  colors: {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    danger: '#dc3545',
+    background: '#ffffff',
+    text: '#333333'
+  }
+};
+
+const darkTheme = {
+  colors: {
+    primary: '#0d6efd',
+    secondary: '#6c757d',
+    danger: '#dc3545',
+    background: '#1a1a1a',
+    text: '#ffffff'
+  }
+};
+
+export function App() {
+  const [isDark, setIsDark] = useState(false);
+
+  return (
+    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
+      <GlobalStyles />
+      <MyComponent onToggleTheme={() => setIsDark(!isDark)} />
+    </ThemeProvider>
+  );
+}
+```
+
+## Complex Components
+
+```typescript
+const Card = styled.div`
+  background-color: ${props => props.theme.colors.background};
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+
+const CardTitle = styled.h2`
+  color: ${props => props.theme.colors.primary};
+  margin-bottom: 10px;
+`;
+
+const CardContent = styled.p`
+  color: ${props => props.theme.colors.text};
+  line-height: 1.6;
+`;
+
+export function UserCard({ user }) {
+  return (
+    <Card>
+      <CardTitle>{user.name}</CardTitle>
+      <CardContent>{user.bio}</CardContent>
+    </Card>
+  );
+}
+```
+
+## Extending Styles
+
+```typescript
+const BaseButton = styled.button`
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+`;
+
+const PrimaryButton = styled(BaseButton)`
+  background-color: #007bff;
+  color: white;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;
+
+const DangerButton = styled(BaseButton)`
+  background-color: #dc3545;
+  color: white;
+
+  &:hover {
+    background-color: #c82333;
+  }
+`;
+```
+
+## Best Practices
+
+✅ **Theme Provider** - Centralize color/style values
+✅ **Extend components** - Reuse styles
+✅ **Component API** - Pass props for customization
+✅ **Performance** - Use React.memo for styled components
+✅ **TypeScript** - Strong typing for props
+
+## Resources
+
+- [styled-components Docs](https://styled-components.com/)
+- [Emotion (alternative)](https://emotion.sh/)

package/kit/.claude/skills/styling-tailwind.md

@@ -0,0 +1,206 @@
+# Tailwind CSS v4
+
+Utility-first CSS framework with rapid styling capabilities.
+
+## Setup (Next.js)
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+## Configuration
+
+```typescript
+// tailwind.config.ts
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#3B82F6',
+        secondary: '#10B981'
+      },
+      spacing: {
+        '128': '32rem'
+      }
+    }
+  },
+  plugins: [require('@tailwindcss/forms')]
+} satisfies Config
+```
+
+## Utility Classes
+
+```jsx
+export function Button({ variant = 'primary', size = 'md', ...props }) {
+  const baseClasses = 'font-semibold rounded-lg transition-colors';
+  
+  const variants = {
+    primary: 'bg-blue-500 text-white hover:bg-blue-600',
+    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
+    danger: 'bg-red-500 text-white hover:bg-red-600'
+  };
+
+  const sizes = {
+    sm: 'px-3 py-1 text-sm',
+    md: 'px-4 py-2 text-base',
+    lg: 'px-6 py-3 text-lg'
+  };
+
+  return (
+    <button 
+      className={`${baseClasses} ${variants[variant]} ${sizes[size]}`}
+      {...props}
+    />
+  );
+}
+```
+
+## Responsive Design
+
+```jsx
+export function Grid() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {items.map(item => (
+        <div key={item.id} className="bg-white p-4 rounded-lg shadow">
+          <h3 className="text-lg font-bold">{item.title}</h3>
+          <p className="text-gray-600 mt-2">{item.description}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Dark Mode
+
+```jsx
+// tailwind.config.ts with darkMode: 'class'
+
+export function ThemeToggle() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [isDark]);
+
+  return (
+    <>
+      <div className="bg-white dark:bg-slate-900 text-black dark:text-white">
+        Content
+      </div>
+      <button onClick={() => setIsDark(!isDark)}>
+        Toggle Dark Mode
+      </button>
+    </>
+  );
+}
+```
+
+## Custom CSS with Tailwind
+
+```css
+/* globals.css */
+@import "tailwindcss";
+
+@layer components {
+  .btn-primary {
+    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600;
+  }
+
+  .input-base {
+    @apply px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .truncate-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+```
+
+## Forms
+
+```jsx
+export function LoginForm() {
+  return (
+    <form className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700">
+          Email
+        </label>
+        <input 
+          type="email"
+          className="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          placeholder="you@example.com"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700">
+          Password
+        </label>
+        <input
+          type="password"
+          className="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+        />
+      </div>
+
+      <button className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600">
+        Sign In
+      </button>
+    </form>
+  );
+}
+```
+
+## Performance
+
+```jsx
+// Use clsx for conditional classes (lighter than classnames)
+import clsx from 'clsx';
+
+export function Card({ highlighted }) {
+  return (
+    <div className={clsx(
+      'p-4 rounded-lg border',
+      highlighted && 'border-blue-500 bg-blue-50'
+    )}>
+      Content
+    </div>
+  );
+}
+```
+
+## Best Practices
+
+✅ **Use @layer** - Organize custom utilities
+✅ **Extract components** - DRY up repeated patterns
+✅ **Responsive-first** - Mobile first approach
+✅ **Plugins** - Leverage community plugins
+✅ **PurgeCSS** - Automatic unused CSS removal
+
+## Resources
+
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [Tailwind UI](https://tailwindui.com/)
+- [Headless UI](https://headlessui.com/)

package/kit/.claude/skills/test-e2e.md

@@ -0,0 +1,86 @@
+# End-to-End Testing
+
+Full-stack testing using Playwright or Cypress to test complete user workflows.
+
+## Playwright Setup
+
+```bash
+npm install -D @playwright/test
+```
+
+## Basic Test
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('user can login and view dashboard', async ({ page }) => {
+  // Navigate
+  await page.goto('http://localhost:3000/login');
+
+  // Fill form
+  await page.fill('input[name="email"]', 'user@example.com');
+  await page.fill('input[name="password"]', 'password123');
+
+  // Click button
+  await page.click('button:has-text("Sign In")');
+
+  // Wait for navigation
+  await page.waitForURL('http://localhost:3000/dashboard');
+
+  // Verify content
+  expect(await page.locator('h1').textContent()).toBe('Dashboard');
+});
+```
+
+## Assertions
+
+```typescript
+// Wait for element
+await expect(page.locator('.success-message')).toBeVisible();
+
+// Check URL
+await expect(page).toHaveURL('/dashboard');
+
+// Check text
+await expect(page.locator('h1')).toHaveText('Welcome');
+
+// Count elements
+await expect(page.locator('.item')).toHaveCount(5);
+```
+
+## Page Objects
+
+```typescript
+class LoginPage {
+  constructor(private page: Page) {}
+
+  async goto() {
+    await this.page.goto('http://localhost:3000/login');
+  }
+
+  async login(email: string, password: string) {
+    await this.page.fill('input[name="email"]', email);
+    await this.page.fill('input[name="password"]', password);
+    await this.page.click('button:has-text("Sign In")');
+    await this.page.waitForURL('/dashboard');
+  }
+}
+
+// Usage
+const loginPage = new LoginPage(page);
+await loginPage.goto();
+await loginPage.login('user@example.com', 'password123');
+```
+
+## Best Practices
+
+✅ **Use Page Objects** - Maintainable test code
+✅ **Wait for elements** - Don't hardcode waits
+✅ **Test critical flows** - Focus on user journeys
+✅ **Run in CI/CD** - Automate testing
+✅ **Use test data** - Reset state between tests
+
+## Resources
+
+- [Playwright Docs](https://playwright.dev/)
+- [Cypress Docs](https://cypress.io/)