claudeinone-cli 1.0.1 → 1.0.3

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

@@ -0,0 +1,106 @@
+# Framer Motion
+
+## Overview
+Framer Motion is a production-ready animation library for React with declarative animations and gestures.
+
+## Setup
+
+```bash
+npm install framer-motion
+```
+
+## Basic Animations
+
+```tsx
+import { motion, AnimatePresence } from 'framer-motion';
+
+// Simple fade in
+<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }}>
+  Content
+</motion.div>
+
+// Slide in from bottom
+<motion.div
+  initial={{ opacity: 0, y: 20 }}
+  animate={{ opacity: 1, y: 0 }}
+  transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+>
+  Card
+</motion.div>
+
+// Exit animation with AnimatePresence
+<AnimatePresence>
+  {isVisible && (
+    <motion.div
+      key="modal"
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      transition={{ duration: 0.2 }}
+    >
+      Modal Content
+    </motion.div>
+  )}
+</AnimatePresence>
+```
+
+## Variants (Stagger Children)
+
+```tsx
+const containerVariants = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  show: { opacity: 1, y: 0 },
+};
+
+<motion.ul variants={containerVariants} initial="hidden" animate="show">
+  {items.map((item) => (
+    <motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
+  ))}
+</motion.ul>
+```
+
+## Gestures
+
+```tsx
+<motion.button
+  whileHover={{ scale: 1.05 }}
+  whileTap={{ scale: 0.95 }}
+  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+>
+  Click me
+</motion.button>
+
+// Drag
+<motion.div
+  drag
+  dragConstraints={{ left: 0, right: 200, top: 0, bottom: 200 }}
+  dragElastic={0.1}
+  className="w-20 h-20 bg-blue-500 rounded-full cursor-grab"
+/>
+```
+
+## Layout Animations
+
+```tsx
+// Animate layout changes automatically
+<motion.div layout layoutId="card">
+  {isExpanded ? <ExpandedView /> : <CollapsedView />}
+</motion.div>
+```
+
+## Best Practices
+- Use `spring` transitions for natural-feeling animations
+- Use `AnimatePresence` for exit animations
+- Reduce motion with `useReducedMotion()` for accessibility
+- Use `layoutId` for shared element transitions between routes
+
+## Resources
+- [Framer Motion docs](https://www.framer.com/motion/)

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

@@ -0,0 +1,102 @@
+# GSAP Animations
+
+## Overview
+GSAP (GreenSock) is a professional-grade JavaScript animation library for high-performance, complex animations.
+
+## Setup
+
+```bash
+npm install gsap
+```
+
+## Basic Tweens
+
+```typescript
+import { gsap } from 'gsap';
+
+// Animate from current state
+gsap.to('.box', { x: 200, duration: 1, ease: 'power2.out' });
+
+// Animate from specified start
+gsap.from('.box', { opacity: 0, y: 50, duration: 0.5 });
+
+// Animate from to
+gsap.fromTo('.box', { x: 0, opacity: 0 }, { x: 200, opacity: 1, duration: 1 });
+
+// Multiple elements with stagger
+gsap.from('.card', { opacity: 0, y: 30, stagger: 0.1, duration: 0.6 });
+```
+
+## Timeline
+
+```typescript
+const tl = gsap.timeline({ defaults: { ease: 'power2.out', duration: 0.6 } });
+
+tl.from('.hero-title', { opacity: 0, y: 40 })
+  .from('.hero-subtitle', { opacity: 0, y: 20 }, '-=0.3')  // 0.3s overlap
+  .from('.hero-cta', { opacity: 0, scale: 0.9 }, '-=0.2')
+  .from('.hero-image', { opacity: 0, x: 50 }, '-=0.5');
+```
+
+## React with useGSAP
+
+```bash
+npm install @gsap/react
+```
+
+```tsx
+import { useRef } from 'react';
+import { useGSAP } from '@gsap/react';
+import { gsap } from 'gsap';
+
+gsap.registerPlugin(useGSAP);
+
+export function AnimatedCard() {
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(() => {
+    gsap.from(cardRef.current, {
+      opacity: 0,
+      y: 30,
+      duration: 0.6,
+      ease: 'power2.out',
+    });
+  }, { scope: cardRef });
+
+  return <div ref={cardRef} className="card">Content</div>;
+}
+```
+
+## ScrollTrigger
+
+```bash
+npm install gsap
+```
+
+```typescript
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+gsap.registerPlugin(ScrollTrigger);
+
+gsap.from('.section-title', {
+  scrollTrigger: {
+    trigger: '.section-title',
+    start: 'top 80%',
+    end: 'top 50%',
+    toggleActions: 'play none none reverse',
+  },
+  opacity: 0,
+  y: 50,
+  duration: 0.8,
+});
+```
+
+## Best Practices
+- Use `useGSAP()` in React for proper cleanup (prevents memory leaks)
+- Register plugins once at app level: `gsap.registerPlugin(ScrollTrigger)`
+- Use `gsap.context()` for scoped animations that clean up automatically
+- Prefer CSS for simple transitions, GSAP for complex sequenced animations
+
+## Resources
+- [GSAP docs](https://gsap.com/docs/v3/)
+- [GSAP React guide](https://gsap.com/resources/React/)

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

@@ -0,0 +1,82 @@
+# Radix UI
+
+## Overview
+Radix UI provides unstyled, accessible, and composable React primitives for building custom design systems.
+
+## Installation
+
+```bash
+npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-popover
+# Or install individual primitives
+```
+
+## Dialog (Modal)
+
+```tsx
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+export function Modal({ trigger, title, children }: {
+  trigger: React.ReactNode;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <Dialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-6 shadow-xl w-full max-w-md">
+          <Dialog.Title className="text-lg font-semibold">{title}</Dialog.Title>
+          <div className="mt-4">{children}</div>
+          <Dialog.Close className="absolute top-4 right-4">
+            <X className="h-4 w-4" />
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+```
+
+## Dropdown Menu
+
+```tsx
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+
+export function UserMenu({ user }: { user: User }) {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button className="flex items-center gap-2">
+          <img src={user.avatar} className="w-8 h-8 rounded-full" />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="bg-white border rounded-md shadow-lg p-1 w-48">
+          <DropdownMenu.Item className="px-3 py-2 hover:bg-gray-100 cursor-pointer rounded">
+            Profile
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="px-3 py-2 hover:bg-gray-100 cursor-pointer rounded">
+            Settings
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator className="h-px bg-gray-200 my-1" />
+          <DropdownMenu.Item className="px-3 py-2 hover:bg-red-50 text-red-600 cursor-pointer rounded">
+            Sign out
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}
+```
+
+## Best Practices
+- Use `asChild` to pass interaction to custom elements
+- Radix handles ARIA, focus management, and keyboard navigation automatically
+- Style with Tailwind using `data-[state]` selectors for animated states
+- Use shadcn/ui for pre-built Radix components with Tailwind styles
+
+## Resources
+- [Radix UI docs](https://www.radix-ui.com/primitives)
+- [shadcn/ui](https://ui.shadcn.com) — Radix + Tailwind components