claudeinone-cli 1.0.2 → 1.0.3

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

@@ -0,0 +1,97 @@
+# Design Tokens
+
+## Overview
+Design tokens are named variables for design decisions (colors, spacing, typography) that maintain consistency across platforms.
+
+## CSS Custom Properties (Variables)
+
+```css
+/* globals.css */
+:root {
+  /* Colors */
+  --color-primary-50: #eff6ff;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-900: #1e3a8a;
+
+  /* Semantic colors */
+  --color-background: #ffffff;
+  --color-foreground: #0f172a;
+  --color-muted: #f1f5f9;
+  --color-muted-foreground: #64748b;
+  --color-border: #e2e8f0;
+
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* Typography */
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'Fira Code', 'Courier New', monospace;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+
+  /* Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-full: 9999px;
+}
+
+[data-theme="dark"] {
+  --color-background: #0f172a;
+  --color-foreground: #f8fafc;
+  --color-muted: #1e293b;
+  --color-border: #334155;
+}
+```
+
+## Tailwind CSS v4 Tokens
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #3b82f6;
+  --color-primary-hover: #2563eb;
+  --font-family-sans: 'Inter', sans-serif;
+  --spacing-page: 1.5rem;
+  --radius-card: 0.75rem;
+}
+```
+
+## TypeScript Token Object
+
+```typescript
+// lib/tokens.ts
+export const tokens = {
+  colors: {
+    primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a' },
+    gray: { 50: '#f9fafb', 500: '#6b7280', 900: '#111827' },
+    success: '#22c55e',
+    warning: '#f59e0b',
+    error: '#ef4444',
+  },
+  spacing: { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' },
+  fontSize: { sm: '14px', base: '16px', lg: '18px', xl: '20px', '2xl': '24px' },
+  borderRadius: { sm: '4px', md: '8px', lg: '12px', full: '9999px' },
+} as const;
+
+type Colors = typeof tokens.colors;
+export type ColorKey = keyof Colors;
+```
+
+## Best Practices
+- Use semantic tokens (`--color-background`) not literal tokens (`--color-white`) in components
+- Dark mode: swap semantic tokens, not all literal tokens
+- Define tokens once in CSS variables, reference everywhere
+- Use Tailwind v4 `@theme` to expose tokens as utility classes
+
+## Resources
+- [Tailwind v4 theming](https://tailwindcss.com/docs/theme)
+- [Design Tokens W3C spec](https://www.w3.org/community/design-tokens/)

package/kit/.claude/skills/utilities-date-time.md

@@ -0,0 +1,170 @@
+# Date & Time Handling
+
+Working with dates, timezones, and scheduling.
+
+## date-fns Library
+
+```typescript
+import {
+  format,
+  parse,
+  addDays,
+  isBefore,
+  differenceInDays,
+  startOfDay,
+  endOfDay
+} from 'date-fns';
+
+// Format dates
+const formatted = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
+
+// Parse dates
+const parsed = parse('2024-01-15', 'yyyy-MM-dd', new Date());
+
+// Manipulate dates
+const tomorrow = addDays(new Date(), 1);
+const nextWeek = addDays(new Date(), 7);
+
+// Compare dates
+const isExpired = isBefore(expiryDate, new Date());
+
+// Calculate differences
+const daysDiff = differenceInDays(new Date(), pastDate);
+
+// Get start/end of day
+const dayStart = startOfDay(new Date());
+const dayEnd = endOfDay(new Date());
+```
+
+## Day.js (Lightweight)
+
+```typescript
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+// Basic operations
+const now = dayjs();
+const formatted = now.format('YYYY-MM-DD HH:mm:ss');
+const tomorrow = now.add(1, 'day');
+
+// Timezone handling
+const nyTime = dayjs().tz('America/New_York');
+const londonTime = dayjs().tz('Europe/London');
+
+console.log(nyTime.format('HH:mm'));      // New York time
+console.log(londonTime.format('HH:mm'));  // London time
+```
+
+## Cron Jobs
+
+```typescript
+import cron from 'node-cron';
+import schedule from 'node-schedule';
+
+// node-cron syntax
+// Run every day at 2 AM
+cron.schedule('0 2 * * *', async () => {
+  console.log('Running daily task');
+  await cleanupExpiredTokens();
+});
+
+// Run every Monday at 9 AM
+cron.schedule('0 9 * * 1', async () => {
+  console.log('Weekly report');
+  await generateWeeklyReport();
+});
+
+// node-schedule syntax
+const job = schedule.scheduleJob('0 9 * * 1', async () => {
+  console.log('Scheduled task running');
+});
+
+// Cancel job
+job.cancel();
+```
+
+## Timezone Handling
+
+```typescript
+function convertToTimezone(date: Date, timezone: string): string {
+  return dayjs(date).tz(timezone).format('YYYY-MM-DD HH:mm:ss');
+}
+
+// Examples
+console.log(convertToTimezone(new Date(), 'America/New_York'));
+console.log(convertToTimezone(new Date(), 'Europe/London'));
+console.log(convertToTimezone(new Date(), 'Asia/Tokyo'));
+
+// Store times in UTC, display in user's timezone
+async function getUserEvents(userId: string) {
+  const user = await db.users.findById(userId);
+  const events = await db.events.findByUserId(userId);
+
+  return events.map(event => ({
+    ...event,
+    displayTime: dayjs(event.startTime).tz(user.timezone)
+  }));
+}
+```
+
+## Recurring Schedules
+
+```typescript
+import RRule from 'rrule';
+
+// Repeat every weekday at 9 AM
+const rule = new RRule({
+  freq: RRule.DAILY,
+  byweekday: [RRule.MO, RRule.TU, RRule.WE, RRule.TH, RRule.FR],
+  dtstart: new Date(2024, 0, 1, 9, 0)
+});
+
+// Get next 10 occurrences
+const occurrences = rule.all().slice(0, 10);
+
+// Monthly subscription billing
+const billingRule = new RRule({
+  freq: RRule.MONTHLY,
+  bymonthday: 1, // First day of month
+  dtstart: new Date()
+});
+```
+
+## Date Range Queries
+
+```typescript
+// Find events in date range
+async function getEventsInRange(startDate: Date, endDate: Date) {
+  return await db.events.find({
+    startTime: { $gte: startDate, $lte: endDate }
+  });
+}
+
+// Find upcoming events
+async function getUpcomingEvents(days: number = 7) {
+  const today = dayjs().startOf('day').toDate();
+  const futureDate = dayjs().add(days, 'day').endOf('day').toDate();
+
+  return await db.events.find({
+    startTime: { $gte: today, $lte: futureDate }
+  });
+}
+```
+
+## Best Practices
+
+✅ **Store in UTC** - Always store dates in UTC
+✅ **Display in user timezone** - Convert for display
+✅ **Use ISO strings** - For API communication
+✅ **Avoid time libraries** - Use date-fns or Day.js
+✅ **Test with timezones** - Include timezone in tests
+
+## Resources
+
+- [date-fns Documentation](https://date-fns.org/)
+- [Day.js Documentation](https://day.js.org/)
+- [RRule Documentation](https://github.com/jakubroztocil/rrule)

package/kit/.claude/skills/validation-schemas.md

@@ -0,0 +1,110 @@
+# Schema Validation
+
+Validating data structure and types.
+
+## Zod
+
+```typescript
+import { z } from 'zod';
+
+const UserSchema = z.object({
+  id: z.string().uuid(),
+  email: z.string().email(),
+  age: z.number().min(18).max(120),
+  status: z.enum(['active', 'inactive', 'pending']),
+  createdAt: z.date(),
+  tags: z.array(z.string()).optional(),
+  profile: z.object({
+    bio: z.string().optional(),
+    avatar: z.string().url()
+  })
+});
+
+type User = z.infer<typeof UserSchema>;
+
+// Validate
+const user = await UserSchema.parseAsync(userData);
+
+// Validate with error handling
+const result = UserSchema.safeParse(userData);
+if (!result.success) {
+  console.error(result.error.flatten());
+}
+
+// Custom validation
+const PasswordSchema = z.string()
+  .min(8, 'Too short')
+  .regex(/[A-Z]/, 'Need uppercase')
+  .regex(/[0-9]/, 'Need number');
+```
+
+## Yup
+
+```typescript
+import * as Yup from 'yup';
+
+const schema = Yup.object({
+  email: Yup.string().email().required(),
+  password: Yup.string().min(8).required(),
+  age: Yup.number().min(18).required()
+});
+
+schema.validate({
+  email: 'test@example.com',
+  password: 'secure123',
+  age: 25
+}).then(valid => {
+  console.log(valid);
+}).catch(err => {
+  console.error(err.message);
+});
+
+// Async validation
+const schema = Yup.object({
+  email: Yup.string().email().required().test(
+    'unique-email',
+    'Email already exists',
+    async (email) => {
+      const exists = await checkEmailExists(email);
+      return !exists;
+    }
+  )
+});
+```
+
+## Runtime Type Checking
+
+```typescript
+// Using a simple validator
+const validate = (data: unknown, schema: any): boolean => {
+  return schema.safeParse(data).success;
+};
+
+// API route validation
+app.post('/api/users', (req, res) => {
+  const result = UserSchema.safeParse(req.body);
+
+  if (!result.success) {
+    return res.status(400).json({
+      errors: result.error.flatten()
+    });
+  }
+
+  // result.data is now typed as User
+  const user = await db.users.create(result.data);
+  res.status(201).json(user);
+});
+```
+
+## Best Practices
+
+✅ **Type inference** - Use z.infer for TypeScript types
+✅ **Custom messages** - Clear error messages
+✅ **Async validation** - For unique fields
+✅ **Reusable schemas** - DRY validation
+✅ **Server & client** - Validate both sides
+
+## Resources
+
+- [Zod Documentation](https://zod.dev/)
+- [Yup Documentation](https://github.com/jquense/yup)

package/kit/.claude/skills/version-control-git.md

@@ -0,0 +1,144 @@
+# Git Version Control
+
+Source code management and collaboration.
+
+## Git Basics
+
+```bash
+# Initialize repository
+git init
+
+# Clone repository
+git clone https://github.com/user/repo.git
+
+# Check status
+git status
+
+# Stage changes
+git add .
+git add src/file.ts
+
+# Commit
+git commit -m "feat: add new feature"
+
+# Push to remote
+git push origin main
+
+# Pull latest changes
+git pull origin main
+```
+
+## Branching Strategy
+
+```bash
+# Create branch
+git checkout -b feature/new-feature
+
+# Switch branch
+git checkout main
+
+# List branches
+git branch -a
+
+# Delete branch
+git branch -d feature/new-feature
+git branch -D feature/force-delete
+
+# Merge branch
+git merge feature/new-feature
+
+# Rebase (linear history)
+git rebase main
+```
+
+## Advanced Git
+
+```bash
+# View commit history
+git log --oneline --graph --all
+
+# Check specific commit
+git show abc123
+
+# Revert commit
+git revert abc123
+
+# Cherry-pick commit
+git cherry-pick abc123
+
+# Stash changes
+git stash
+git stash list
+git stash pop
+
+# Interactive rebase
+git rebase -i HEAD~5
+```
+
+## Git Workflows
+
+```bash
+# GitHub Flow (simple)
+git checkout -b feature-branch
+# Make changes
+git commit -m "Add feature"
+git push origin feature-branch
+# Create Pull Request
+
+# Git Flow (complex projects)
+git checkout -b develop
+git checkout -b release/1.0.0
+git checkout -b hotfix/critical-bug
+```
+
+## Undoing Changes
+
+```bash
+# Undo unstaged changes
+git checkout -- src/file.ts
+
+# Undo staged changes
+git reset HEAD src/file.ts
+
+# Undo commit (keep changes)
+git reset --soft HEAD~1
+
+# Undo commit (discard changes)
+git reset --hard HEAD~1
+
+# Amend last commit
+git commit --amend --no-edit
+```
+
+## Remote Management
+
+```bash
+# List remotes
+git remote -v
+
+# Add remote
+git remote add origin https://github.com/user/repo.git
+
+# Change remote URL
+git remote set-url origin https://github.com/user/new-repo.git
+
+# Remove remote
+git remote remove origin
+
+# Fetch all remotes
+git fetch --all
+```
+
+## Best Practices
+
+✅ **Meaningful commits** - Clear commit messages
+✅ **Small commits** - One feature per commit
+✅ **Branch per feature** - Isolate work
+✅ **Code review** - Pull request process
+✅ **Protected main** - Require approvals
+
+## Resources
+
+- [Git Documentation](https://git-scm.com/doc)
+- [GitHub Guides](https://guides.github.com/)
+- [Atlassian Git Tutorials](https://www.atlassian.com/git)

package/kit/.claude/skills/web-accessibility-wcag.md

@@ -0,0 +1,102 @@
+# WCAG & Accessibility Standards
+
+Web Content Accessibility Guidelines compliance.
+
+## WCAG Levels
+
+```
+WCAG 2.1 has three levels:
+- Level A: Basic accessibility
+- Level AA: Enhanced accessibility (recommended)
+- Level AAA: Advanced accessibility
+```
+
+## Perceivable
+
+```html
+<!-- Images need alt text -->
+<img src="dog.jpg" alt="Brown dog playing in park">
+
+<!-- Color not only indicator -->
+<label>
+  <input type="checkbox"> Required field
+</label>
+<!-- Don't rely only on color -->
+
+<!-- Captions for video -->
+<video>
+  <track kind="captions" src="captions.vtt">
+</video>
+
+<!-- Sufficient contrast -->
+<style>
+  body { color: #333; background: #fff; } /* 21:1 ratio */
+</style>
+```
+
+## Operable
+
+```html
+<!-- Keyboard navigation -->
+<button>Accessible button</button>
+<a href="/page">Link</a>
+
+<!-- Skip navigation -->
+<a href="#main" class="skip-link">Skip to main</a>
+
+<!-- Focus visible -->
+<style>
+  button:focus-visible {
+    outline: 2px solid blue;
+  }
+</style>
+
+<!-- Sufficient time -->
+<!-- No auto-refreshing content -->
+```
+
+## Understandable
+
+```html
+<!-- Clear language -->
+<label for="email">Email address</label>
+<input id="email" type="email" required>
+
+<!-- Consistent navigation -->
+<!-- Menu in same location -->
+
+<!-- Error prevention -->
+<input type="email" required>
+<span class="error" role="alert">Invalid email</span>
+```
+
+## Robust
+
+```html
+<!-- Valid HTML -->
+<div role="navigation">Menu</div>
+
+<!-- ARIA labels -->
+<button aria-label="Close menu">×</button>
+
+<!-- Semantic HTML -->
+<nav>Navigation</nav>
+<main>Main content</main>
+<footer>Footer</footer>
+```
+
+## Testing Checklist
+
+- [ ] Keyboard navigation works
+- [ ] Color contrast ≥ 4.5:1
+- [ ] All images have alt text
+- [ ] Form labels associated
+- [ ] Focus indicator visible
+- [ ] No auto-playing content
+- [ ] Heading hierarchy correct
+- [ ] Links descriptive
+
+## Resources
+
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [ARIA Best Practices](https://www.w3.org/WAI/ARIA/apg/)