claudeinone-cli 1.0.2 → 1.0.3

package/kit/.claude/skills/ui-shadcn.md

@@ -0,0 +1,463 @@
+# shadcn/ui
+
+High-quality React component library built on Radix UI and Tailwind CSS for accessible interfaces.
+
+## Setup
+
+```bash
+npx shadcn-ui@latest init
+
+# Choose your preferences:
+# - TypeScript: Yes
+# - Style: Default
+# - Base color: Slate
+# - CSS variables: Yes
+```
+
+## Install Components
+
+```bash
+# Single component
+npx shadcn-ui@latest add button
+
+# Multiple components
+npx shadcn-ui@latest add button input card dialog
+
+# All components
+npx shadcn-ui@latest add --all
+```
+
+## Button Component
+
+```tsx
+import { Button } from '@/components/ui/button';
+
+export default function ButtonDemo() {
+  return (
+    <div className="flex gap-4">
+      <Button>Default</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="link">Link</Button>
+
+      <Button size="sm">Small</Button>
+      <Button size="lg">Large</Button>
+      <Button disabled>Disabled</Button>
+    </div>
+  );
+}
+```
+
+## Form with Input Components
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card } from '@/components/ui/card';
+
+export default function FormExample() {
+  const [email, setEmail] = useState('');
+
+  return (
+    <Card className="w-full max-w-md p-6">
+      <form onSubmit={(e) => {
+        e.preventDefault();
+        console.log('Submitting:', email);
+      }}>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="john@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+
+          <Button type="submit" className="w-full">
+            Sign In
+          </Button>
+        </div>
+      </form>
+    </Card>
+  );
+}
+```
+
+## Dialog Component
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog';
+
+export default function DialogExample() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. This will permanently delete your account.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button variant="destructive">Delete</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+## Dropdown Menu
+
+```tsx
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+
+export default function DropdownExample() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Actions</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuItem>Support</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Logout</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+
+## Modal/Sheet (Side Panel)
+
+```tsx
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+} from '@/components/ui/sheet';
+
+export default function SheetExample() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button>Open Settings</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Settings</SheetTitle>
+          <SheetDescription>
+            Make changes to your account settings here.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="space-y-4 py-4">
+          {/* Settings content */}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+```
+
+## Select Component
+
+```tsx
+'use client';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+export default function SelectExample() {
+  const [value, setValue] = useState('');
+
+  return (
+    <Select value={value} onValueChange={setValue}>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select a role" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="admin">Admin</SelectItem>
+        <SelectItem value="user">User</SelectItem>
+        <SelectItem value="guest">Guest</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
+```
+
+## Tabs Component
+
+```tsx
+'use client';
+
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from '@/components/ui/tabs';
+
+export default function TabsExample() {
+  return (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <div>Account settings here</div>
+      </TabsContent>
+      <TabsContent value="password">
+        <div>Password settings here</div>
+      </TabsContent>
+    </Tabs>
+  );
+}
+```
+
+## Alert Component
+
+```tsx
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-react';
+
+export default function AlertExample() {
+  return (
+    <Alert variant="destructive">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please sign in again.
+      </AlertDescription>
+    </Alert>
+  );
+}
+```
+
+## Data Table
+
+```tsx
+'use client';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table';
+
+const users = [
+  { id: 1, name: 'John Doe', email: 'john@example.com' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
+];
+
+export default function TableExample() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map((user) => (
+          <TableRow key={user.id}>
+            <TableCell>{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+## Toast Notifications
+
+```tsx
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/use-toast';
+
+export default function ToastExample() {
+  const { toast } = useToast();
+
+  return (
+    <Button
+      onClick={() => {
+        toast({
+          title: 'Success',
+          description: 'Your changes have been saved.',
+          variant: 'default'
+        });
+      }}
+    >
+      Show Toast
+    </Button>
+  );
+}
+```
+
+## Themeing with CSS Variables
+
+```css
+/* globals.css */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.6%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.6%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 89.5%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 9%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 0 0% 89.5%;
+    --input: 0 0% 89.5%;
+    --ring: 0 0% 3.6%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.6%;
+    --foreground: 0 0% 98%;
+    /* ... more dark variables ... */
+  }
+}
+```
+
+## Custom Component Usage
+
+```tsx
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+
+export default function DashboardCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Dashboard</CardTitle>
+        <CardDescription>View your analytics</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between">
+          <span>Status</span>
+          <Badge>Active</Badge>
+        </div>
+        <Button className="w-full">View Details</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Best Practices
+
+✅ **Use headless** - Base components on Radix UI for accessibility
+✅ **Customize with CSS** - Modify colors in globals.css CSS variables
+✅ **Combine components** - Build complex UIs from simple primitives
+✅ **Type-safe** - Full TypeScript support out of the box
+✅ **Accessible** - All components follow WAI-ARIA standards
+✅ **Dark mode** - Built-in dark mode support via CSS classes
+✅ **Responsive** - Mobile-first design with Tailwind breakpoints
+
+## Common Patterns
+
+- Always use the `asChild` prop for custom triggers
+- Nest components properly (Dialog > DialogContent > DialogHeader)
+- Use `className` for Tailwind customization
+- Import icons from `lucide-react` for consistency
+- Combine multiple components for complex UIs
+
+## When to Use shadcn/ui
+
+✅ Next.js projects
+✅ Need accessible components
+✅ Want customizable UI library
+✅ TypeScript projects
+✅ Tailwind CSS styling
+
+❌ Non-React projects
+❌ Need pre-built templates
+❌ Simple static sites
+
+## Resources
+
+- [shadcn/ui Documentation](https://ui.shadcn.com/)
+- [Component Gallery](https://ui.shadcn.com/docs/components/accordion)
+- [Radix UI Docs](https://www.radix-ui.com/docs/primitives/overview/introduction)
+- [Tailwind CSS Docs](https://tailwindcss.com/docs)

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

@@ -0,0 +1,98 @@
+# Tailwind CSS v4
+
+Utility-first CSS framework for rapid UI development.
+
+## Basic Usage
+
+```html
+<div class="flex items-center justify-between p-4 bg-blue-500">
+  <h1 class="text-2xl font-bold text-white">Header</h1>
+  <button class="px-4 py-2 bg-white text-blue-500 rounded hover:bg-gray-100">
+    Click Me
+  </button>
+</div>
+```
+
+## Layout
+
+```html
+<!-- Flex layout -->
+<div class="flex gap-4">
+  <div class="flex-1">Sidebar</div>
+  <div class="flex-2">Main Content</div>
+</div>
+
+<!-- Grid layout -->
+<div class="grid grid-cols-3 gap-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</div>
+
+<!-- Responsive -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+  <div>Responsive Grid</div>
+</div>
+```
+
+## Styling
+
+```html
+<!-- Colors -->
+<div class="bg-blue-500 text-white">Blue Background</div>
+
+<!-- Shadows & Borders -->
+<div class="border border-gray-300 rounded-lg shadow-lg">Card</div>
+
+<!-- Spacing -->
+<div class="p-4 m-2">Padded and Margined</div>
+
+<!-- Opacity & Hover -->
+<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 opacity-80">
+  Interactive
+</button>
+```
+
+## Dark Mode
+
+```html
+<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
+  Toggles with dark mode
+</div>
+
+<!-- In CSS -->
+<html class="dark">
+  <!-- Content -->
+</html>
+```
+
+## Custom Configuration
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        brand: '#FF6B6B',
+      },
+      spacing: {
+        '128': '32rem',
+      },
+    },
+  },
+};
+```
+
+## Best Practices
+
+1. **Use utility classes**
+2. **Avoid inline styles**
+3. **Create component classes for reuse**
+4. **Use @apply for custom components**
+5. **Responsive-first design**
+6. **Dark mode support**
+
+## Resources
+
+- [Tailwind CSS Docs](https://tailwindcss.com/docs)

package/kit/.claude/skills/ui-threejs.md

@@ -0,0 +1,110 @@
+# Three.js
+
+## Overview
+Three.js renders 3D scenes in the browser using WebGL — for product visualizations, games, and immersive UIs.
+
+## Setup
+
+```bash
+npm install three @types/three
+```
+
+## Basic Scene Setup
+
+```typescript
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+// Scene
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0xf0f0f0);
+
+// Camera
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.set(0, 2, 5);
+
+// Renderer
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.shadowMap.enabled = true;
+document.body.appendChild(renderer.domElement);
+
+// Controls
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+
+// Geometry + Material + Mesh
+const geometry = new THREE.BoxGeometry(1, 1, 1);
+const material = new THREE.MeshStandardMaterial({ color: 0x00aaff });
+const cube = new THREE.Mesh(geometry, material);
+cube.castShadow = true;
+scene.add(cube);
+
+// Lighting
+const light = new THREE.DirectionalLight(0xffffff, 1);
+light.position.set(5, 10, 5);
+light.castShadow = true;
+scene.add(light);
+scene.add(new THREE.AmbientLight(0xffffff, 0.4));
+
+// Animation loop
+function animate() {
+  requestAnimationFrame(animate);
+  cube.rotation.y += 0.01;
+  controls.update();
+  renderer.render(scene, camera);
+}
+animate();
+
+// Resize handler
+window.addEventListener('resize', () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
+```
+
+## React with React Three Fiber
+
+```bash
+npm install @react-three/fiber @react-three/drei
+```
+
+```tsx
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, Box, Environment } from '@react-three/drei';
+import { useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+
+function RotatingBox() {
+  const meshRef = useRef<THREE.Mesh>(null);
+  useFrame(() => { if (meshRef.current) meshRef.current.rotation.y += 0.01; });
+  return (
+    <Box ref={meshRef} args={[1, 1, 1]}>
+      <meshStandardMaterial color="#00aaff" />
+    </Box>
+  );
+}
+
+export function ThreeScene() {
+  return (
+    <Canvas camera={{ position: [0, 2, 5] }} shadows>
+      <ambientLight intensity={0.4} />
+      <directionalLight position={[5, 10, 5]} castShadow />
+      <RotatingBox />
+      <OrbitControls enableDamping />
+      <Environment preset="city" />
+    </Canvas>
+  );
+}
+```
+
+## Best Practices
+- Always dispose of geometries, materials, and textures on cleanup: `geometry.dispose()`
+- Use `GLTFLoader` for 3D models: `new GLTFLoader().load('/model.glb', ...)`
+- Keep polygon count low for web performance
+- Use React Three Fiber for React projects — much cleaner than imperative Three.js
+
+## Resources
+- [Three.js docs](https://threejs.org/docs/)
+- [React Three Fiber](https://docs.pmnd.rs/react-three-fiber)