ai-qakit 1.0.0

package/templates/.cursor/commands/devkit/create-form.md

@@ -0,0 +1,189 @@
+---
+description: Generate form component with validation and submission handling
+---
+
+# Create Form
+
+Generate form component with React Hook Form, Zod validation, and submission handling.
+
+## Usage
+
+`@create-form [form-name]`
+
+## Ask First
+
+- Form fields and types?
+- Validation rules?
+- Multi-step wizard?
+- API endpoint for submission?
+- Success/error handling?
+- Reset after submit?
+
+## Generated Files
+
+```
+src/components/forms/
+├── [FormName]/
+│   ├── [FormName].tsx           # Form component
+│   ├── [FormName].schema.ts     # Zod schema
+│   ├── [FormName].types.ts      # TypeScript types
+│   └── index.ts                 # Export
+```
+
+## Schema Template
+
+```typescript
+// [FormName].schema.ts
+import { z } from 'zod';
+
+export const [formName]Schema = z.object({
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Min 8 characters'),
+  // ... fields
+});
+
+export type [FormName]Values = z.infer<typeof [formName]Schema>;
+```
+
+## Form Template
+
+```typescript
+// [FormName].tsx
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { [formName]Schema, type [FormName]Values } from './[FormName].schema';
+
+interface [FormName]Props {
+  onSubmit: (data: [FormName]Values) => Promise<void>;
+  defaultValues?: Partial<[FormName]Values>;
+  isLoading?: boolean;
+}
+
+export function [FormName]({ 
+  onSubmit, 
+  defaultValues,
+  isLoading 
+}: [FormName]Props) {
+  const form = useForm<[FormName]Values>({
+    resolver: zodResolver([formName]Schema),
+    defaultValues,
+  });
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onSubmit(data);
+      form.reset();
+    } catch (error) {
+      // Handle error
+    }
+  });
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {/* Form fields */}
+      
+      <button 
+        type="submit" 
+        disabled={isLoading}
+      >
+        {isLoading ? 'Submitting...' : 'Submit'}
+      </button>
+    </form>
+  );
+}
+```
+
+## Multi-Step Wizard Template
+
+```typescript
+// [FormName].tsx
+'use client';
+
+import { useState } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+const STEPS = [
+  { id: 'step1', title: 'Step 1', component: Step1 },
+  { id: 'step2', title: 'Step 2', component: Step2 },
+  { id: 'step3', title: 'Review', component: Review },
+];
+
+export function [FormName]Wizard({ onSubmit }) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const form = useForm({
+    resolver: zodResolver([formName]Schema),
+    mode: 'onChange',
+  });
+
+  const CurrentStepComponent = STEPS[currentStep].component;
+
+  const next = async () => {
+    const isValid = await form.trigger();
+    if (isValid) setCurrentStep((s) => s + 1);
+  };
+
+  const prev = () => setCurrentStep((s) => s - 1);
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        {/* Progress indicator */}
+        <div className="flex gap-2 mb-6">
+          {STEPS.map((step, i) => (
+            <div 
+              key={step.id}
+              className={i <= currentStep ? 'bg-primary' : 'bg-muted'}
+            />
+          ))}
+        </div>
+
+        <CurrentStepComponent />
+
+        <div className="flex justify-between mt-6">
+          {currentStep > 0 && (
+            <button type="button" onClick={prev}>
+              Previous
+            </button>
+          )}
+          {currentStep < STEPS.length - 1 ? (
+            <button type="button" onClick={next}>
+              Next
+            </button>
+          ) : (
+            <button type="submit">Submit</button>
+          )}
+        </div>
+      </form>
+    </FormProvider>
+  );
+}
+```
+
+## Output
+
+```
+════════════════════════════════════════
+✅ FORM CREATED
+════════════════════════════════════════
+
+FORM: [FormName]
+TYPE: [Single / Multi-step]
+
+FILES CREATED:
+  📄 components/forms/[FormName]/[FormName].tsx
+  📄 components/forms/[FormName]/[FormName].schema.ts
+  📄 components/forms/[FormName]/index.ts
+
+USAGE:
+  import { [FormName] } from '@/components/forms/[FormName]';
+  
+  <[FormName] 
+    onSubmit={handleSubmit}
+    defaultValues={{ ... }}
+  />
+════════════════════════════════════════
+```
+

package/templates/.cursor/commands/devkit/create-page.md

@@ -0,0 +1,111 @@
+---
+description: Generate page/route components with data fetching and layouts
+---
+
+# Create Page
+
+Generate page components for web frameworks.
+
+## Usage
+
+`@create-page [page-name] [route]`
+
+## Supported Routers
+
+| Framework | Router |
+|-----------|--------|
+| Next.js | App Router, Pages Router |
+| React | React Router, TanStack Router |
+| Remix | Remix Router |
+| Vue | Vue Router |
+| Nuxt | File-based routing |
+
+## Process
+
+1. **Detect** - Framework and routing pattern
+2. **Plan** - Page structure and data needs
+3. **Generate** - Page and related files
+4. **Configure** - Route configuration
+
+## Generated Files
+
+### Next.js App Router
+```
+app/[route]/
+├── page.tsx          # Page component
+├── layout.tsx        # Layout (optional)
+├── loading.tsx       # Loading state
+├── error.tsx         # Error boundary
+└── not-found.tsx     # 404 state
+```
+
+### React Router
+```
+pages/[PageName]/
+├── [PageName].tsx    # Page component
+├── [PageName].loader.ts # Data loader
+├── [PageName].test.tsx
+└── index.ts
+```
+
+## Page Patterns
+
+### Server Component (Next.js)
+```tsx
+export default async function Page({ params }: Props) {
+  const data = await fetchData(params.id);
+  return <PageContent data={data} />;
+}
+```
+
+### Client Component
+```tsx
+'use client';
+
+export default function Page() {
+  const { data } = useQuery({ ... });
+  return <PageContent data={data} />;
+}
+```
+
+### With Authentication
+```tsx
+export default async function Page() {
+  const session = await getSession();
+  if (!session) redirect('/login');
+  return <ProtectedContent />;
+}
+```
+
+## SEO Metadata
+
+```tsx
+export const metadata = {
+  title: 'Page Title',
+  description: 'Page description',
+  openGraph: { ... },
+};
+```
+
+## Output
+
+```
+✅ PAGE CREATED
+════════════════════════════════
+
+📄 /dashboard/settings
+
+FILES:
+├── app/dashboard/settings/page.tsx
+├── app/dashboard/settings/loading.tsx
+└── app/dashboard/settings/error.tsx
+
+ROUTE: /dashboard/settings
+AUTH: Required
+DATA: Server-side fetch
+
+NEXT STEPS:
+1. Add data fetching logic
+2. Implement UI components
+3. Add tests
+```

package/templates/.cursor/commands/devkit/create-storybook.md

@@ -0,0 +1,235 @@
+---
+description: Generate Storybook stories with CSF3, controls, and interaction tests
+---
+
+# Create Storybook Stories
+
+Generate Storybook stories for a component with CSF3 format.
+
+## Usage
+
+`@create-storybook [component-path]`
+
+## Ask First
+
+- Component props?
+- Variants to showcase?
+- Interaction tests needed?
+- Accessibility checks?
+- Documentation examples?
+
+## Generated Files
+
+```
+src/components/[Component]/
+└── [Component].stories.tsx
+```
+
+## Story Template (CSF3)
+
+```typescript
+// [Component].stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent, expect } from '@storybook/test';
+import { [Component] } from './[Component]';
+
+const meta: Meta<typeof [Component]> = {
+  title: 'Components/[Component]',
+  component: [Component],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '[Component description]',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'secondary'],
+      description: 'Visual variant',
+    },
+    size: {
+      control: 'radio',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+    },
+    onClick: { action: 'clicked' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof [Component]>;
+
+// Default story
+export const Default: Story = {
+  args: {
+    children: '[Component] Text',
+  },
+};
+
+// Variants
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Secondary',
+  },
+};
+
+// Sizes
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex gap-4 items-center">
+      <[Component] size="sm">Small</[Component]>
+      <[Component] size="md">Medium</[Component]>
+      <[Component] size="lg">Large</[Component]>
+    </div>
+  ),
+};
+
+// States
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: 'Disabled',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    children: 'Loading',
+  },
+};
+
+// Interaction test
+export const WithInteraction: Story = {
+  args: {
+    children: 'Click me',
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    
+    // Verify initial state
+    await expect(button).toBeEnabled();
+    
+    // Click interaction
+    await userEvent.click(button);
+    
+    // Verify action was called
+    await expect(args.onClick).toHaveBeenCalled();
+  },
+};
+
+// Accessibility test
+export const AccessibilityTest: Story = {
+  args: {
+    children: 'Accessible Button',
+    'aria-label': 'Accessible action',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    
+    // Check accessibility attributes
+    await expect(button).toHaveAccessibleName();
+    
+    // Keyboard navigation
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    
+    // Enter key activation
+    await userEvent.keyboard('{Enter}');
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="grid gap-4">
+      <div className="flex gap-2">
+        <[Component] variant="default">Default</[Component]>
+        <[Component] variant="primary">Primary</[Component]>
+        <[Component] variant="secondary">Secondary</[Component]>
+      </div>
+      <div className="flex gap-2">
+        <[Component] size="sm">Small</[Component]>
+        <[Component] size="md">Medium</[Component]>
+        <[Component] size="lg">Large</[Component]>
+      </div>
+      <div className="flex gap-2">
+        <[Component] disabled>Disabled</[Component]>
+        <[Component] isLoading>Loading</[Component]>
+      </div>
+    </div>
+  ),
+};
+```
+
+## Story Categories
+
+### Visual States
+- Default
+- Hover (use parameters)
+- Focus (use parameters)
+- Active (use parameters)
+- Disabled
+- Loading
+
+### Sizes
+- Small
+- Medium
+- Large
+
+### Variants
+- Primary
+- Secondary
+- Outline
+- Ghost
+
+### Interactive
+- Click handlers
+- Form inputs
+- Keyboard navigation
+
+## Output
+
+```
+════════════════════════════════════════
+✅ STORYBOOK STORIES CREATED
+════════════════════════════════════════
+
+COMPONENT: [Component]
+
+FILE CREATED:
+  📄 components/[Component]/[Component].stories.tsx
+
+STORIES:
+  • Default
+  • Primary
+  • Secondary
+  • Sizes
+  • Disabled
+  • Loading
+  • WithInteraction
+  • AccessibilityTest
+  • AllVariants
+
+RUN: pnpm storybook
+════════════════════════════════════════
+```
+