create-edhor-stack 0.1.0

package/templates/base/.claude/skills/add-api-endpoint.md

@@ -0,0 +1,137 @@
+---
+name: add-api-endpoint
+description: Create a new API endpoint with Zod validation
+---
+
+# Add API Endpoint
+
+Creates a type-safe API endpoint with Zod schema validation.
+
+## Usage
+
+```
+/add-api-endpoint users
+/add-api-endpoint "projects/[id]"
+```
+
+## Process
+
+### 1. Define Schema
+
+```typescript
+// src/api/schemas.ts (or add to existing)
+import { z } from 'zod';
+
+export const UserSchema = z.object({
+  id: z.string(),
+  email: z.string().email(),
+  name: z.string(),
+  createdAt: z.string().datetime(),
+});
+
+export type User = z.infer<typeof UserSchema>;
+
+export const UsersResponseSchema = z.object({
+  users: z.array(UserSchema),
+  total: z.number(),
+  nextCursor: z.string().nullable(),
+});
+
+export type UsersResponse = z.infer<typeof UsersResponseSchema>;
+```
+
+### 2. Create Query Options
+
+```typescript
+// src/api/queries.ts (or src/lib/queries.ts for web)
+import { queryOptions } from '@tanstack/react-query';
+import { fetchValidated } from './client';
+import { UserSchema, UsersResponseSchema } from './schemas';
+
+export const usersQueryOptions = (cursor?: string) =>
+  queryOptions({
+    queryKey: ['users', { cursor }],
+    queryFn: () =>
+      fetchValidated(
+        `/api/users${cursor ? `?cursor=${cursor}` : ''}`,
+        UsersResponseSchema
+      ),
+  });
+
+export const userQueryOptions = (id: string) =>
+  queryOptions({
+    queryKey: ['users', id],
+    queryFn: () => fetchValidated(`/api/users/${id}`, UserSchema),
+  });
+```
+
+### 3. Create Server Function (Web)
+
+```typescript
+// src/routes/api/users.ts
+import { createServerFn } from '@tanstack/start';
+import { z } from 'zod';
+import { db } from '@/lib/db';
+import { users } from '@/lib/schema';
+
+export const getUsers = createServerFn('GET', async () => {
+  return await db.select().from(users);
+});
+
+const CreateUserSchema = z.object({
+  email: z.string().email(),
+  name: z.string().min(1),
+});
+
+export const createUser = createServerFn('POST', async (input: unknown) => {
+  const data = CreateUserSchema.parse(input);
+  const [user] = await db.insert(users).values(data).returning();
+  return user;
+});
+```
+
+### 4. Use in Component
+
+```tsx
+// Web
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { usersQueryOptions } from '@/lib/queries';
+import { createUser } from '@/routes/api/users';
+
+function UsersPage() {
+  const { data, isLoading } = useQuery(usersQueryOptions());
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: createUser,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+    },
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+  return <UserList users={data.users} />;
+}
+```
+
+```tsx
+// Mobile
+import { useQuery } from '@tanstack/react-query';
+import { usersQueryOptions } from '@/api/queries';
+
+function UsersScreen() {
+  const { data, isLoading } = useQuery(usersQueryOptions());
+
+  if (isLoading) return <LoadingSpinner />;
+  return <UserList users={data.users} />;
+}
+```
+
+## Conventions
+
+- Schema names end with `Schema`
+- Types derived from schemas with `z.infer`
+- Query options follow pattern: `[resource]QueryOptions`
+- Always validate responses with `fetchValidated`
+- Use cursor-based pagination for lists
+- Include `total` count for paginated responses

package/templates/base/.claude/skills/add-component.md

@@ -0,0 +1,79 @@
+---
+name: add-component
+description: Create a new React component following project conventions
+---
+
+# Add Component
+
+Creates a new React component with proper structure and patterns.
+
+## Usage
+
+```
+/add-component Button
+/add-component UserProfile --web
+/add-component ArticleCard --mobile
+```
+
+## Process
+
+1. **Determine location**:
+   - `--web`: `apps/web/src/components/`
+   - `--mobile`: `apps/mobile/src/components/`
+   - `--ui`: `packages/ui/src/components/`
+   - Default: Ask user
+
+2. **Create component file**:
+
+```tsx
+// components/[name].tsx
+import type { ComponentProps } from 'react';
+
+interface [Name]Props {
+  // Props here
+}
+
+export function [Name]({ ...props }: [Name]Props) {
+  return (
+    <div>
+      {/* Component content */}
+    </div>
+  );
+}
+```
+
+3. **Add to exports** (if packages/ui):
+
+```tsx
+// components/index.ts
+export { [Name] } from './[name]';
+```
+
+4. **For mobile components**, use React Native primitives:
+
+```tsx
+import { View, Text, StyleSheet } from 'react-native';
+
+export function [Name]() {
+  return (
+    <View style={styles.container}>
+      <Text>Content</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    // styles
+  },
+});
+```
+
+## Conventions
+
+- PascalCase component names
+- kebab-case file names
+- Props interface named `[Component]Props`
+- Functional components only (no classes)
+- Use `cn()` for conditional Tailwind classes (web)
+- Use StyleSheet for styles (mobile)

package/templates/base/.claude/skills/add-route.md

@@ -0,0 +1,134 @@
+---
+name: add-route
+description: Add a new route to the web or mobile app
+---
+
+# Add Route
+
+Creates a new route with proper file-based routing structure.
+
+## Usage
+
+```
+/add-route dashboard
+/add-route settings --web
+/add-route profile --mobile
+/add-route "users/[id]" --web  # Dynamic route
+```
+
+## Web Routes (TanStack Start)
+
+Location: `apps/web/src/routes/`
+
+### Static Route
+
+```tsx
+// routes/dashboard.tsx
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/dashboard')({
+  component: DashboardPage,
+});
+
+function DashboardPage() {
+  return (
+    <main className="container py-8">
+      <h1 className="text-3xl font-bold">Dashboard</h1>
+    </main>
+  );
+}
+```
+
+### Dynamic Route
+
+```tsx
+// routes/users/$id.tsx
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/users/$id')({
+  component: UserPage,
+});
+
+function UserPage() {
+  const { id } = Route.useParams();
+  return <div>User {id}</div>;
+}
+```
+
+### With Loader
+
+```tsx
+// routes/projects.tsx
+import { createFileRoute } from '@tanstack/react-router';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { projectsQueryOptions } from '@/lib/queries';
+
+export const Route = createFileRoute('/projects')({
+  loader: ({ context }) =>
+    context.queryClient.ensureQueryData(projectsQueryOptions),
+  component: ProjectsPage,
+});
+
+function ProjectsPage() {
+  const { data } = useSuspenseQuery(projectsQueryOptions);
+  return <ProjectList projects={data} />;
+}
+```
+
+## Mobile Routes (Expo Router)
+
+Location: `apps/mobile/app/`
+
+### Static Route
+
+```tsx
+// app/settings.tsx
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function SettingsScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Settings</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 16 },
+  title: { fontSize: 24, fontWeight: 'bold' },
+});
+```
+
+### Dynamic Route
+
+```tsx
+// app/article/[slug].tsx
+import { useLocalSearchParams } from 'expo-router';
+import { View, Text } from 'react-native';
+
+export default function ArticleScreen() {
+  const { slug } = useLocalSearchParams<{ slug: string }>();
+  return (
+    <View>
+      <Text>Article: {slug}</Text>
+    </View>
+  );
+}
+```
+
+### Tab Route
+
+```tsx
+// app/(tabs)/home.tsx
+export default function HomeTab() {
+  return <HomeScreen />;
+}
+```
+
+## Conventions
+
+- File name = route path
+- `$param` for TanStack Router dynamic segments
+- `[param]` for Expo Router dynamic segments
+- `(group)` folders for layout groups (don't affect URL)
+- `_layout.tsx` for nested layouts

package/templates/base/.claude/skills/add-store.md

@@ -0,0 +1,158 @@
+---
+name: add-store
+description: Create a new Zustand store with persistence (mobile)
+---
+
+# Add Store
+
+Creates a new Zustand store with AsyncStorage persistence for the mobile app.
+
+## Usage
+
+```
+/add-store notifications
+/add-store cart
+/add-store preferences
+```
+
+## Process
+
+### 1. Create Store
+
+```typescript
+// src/lib/store.ts (add to existing file)
+
+// ============================================================================
+// NOTIFICATIONS STORE
+// ============================================================================
+
+interface NotificationsState {
+  enabled: boolean;
+  sound: boolean;
+  vibration: boolean;
+  setEnabled: (enabled: boolean) => void;
+  setSound: (sound: boolean) => void;
+  setVibration: (vibration: boolean) => void;
+  reset: () => void;
+}
+
+const notificationsInitialState = {
+  enabled: true,
+  sound: true,
+  vibration: true,
+};
+
+export const useNotificationsStore = create<NotificationsState>()(
+  persist(
+    (set) => ({
+      ...notificationsInitialState,
+      setEnabled: (enabled) => set({ enabled }),
+      setSound: (sound) => set({ sound }),
+      setVibration: (vibration) => set({ vibration }),
+      reset: () => set(notificationsInitialState),
+    }),
+    {
+      name: 'notifications-storage',
+      storage: createJSONStorage(() => AsyncStorage),
+    }
+  )
+);
+```
+
+### 2. Use with Selectors
+
+```tsx
+// Always use selectors to prevent unnecessary re-renders
+function NotificationToggle() {
+  // Good - only re-renders when 'enabled' changes
+  const enabled = useNotificationsStore((state) => state.enabled);
+  const setEnabled = useNotificationsStore((state) => state.setEnabled);
+
+  return (
+    <Switch value={enabled} onValueChange={setEnabled} />
+  );
+}
+```
+
+### 3. Multiple Selectors
+
+```tsx
+// For multiple values, use shallow comparison
+import { useShallow } from 'zustand/react/shallow';
+
+function NotificationSettings() {
+  const { sound, vibration, setSound, setVibration } = useNotificationsStore(
+    useShallow((state) => ({
+      sound: state.sound,
+      vibration: state.vibration,
+      setSound: state.setSound,
+      setVibration: state.setVibration,
+    }))
+  );
+
+  return (
+    <View>
+      <Switch value={sound} onValueChange={setSound} />
+      <Switch value={vibration} onValueChange={setVibration} />
+    </View>
+  );
+}
+```
+
+## Store Patterns
+
+### Computed Values
+
+```typescript
+interface CartState {
+  items: CartItem[];
+  // Computed via selector, not stored
+}
+
+// Use selector for computed values
+const totalPrice = useCartStore((state) =>
+  state.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+);
+```
+
+### Async Actions
+
+```typescript
+interface UserState {
+  user: User | null;
+  loading: boolean;
+  fetchUser: (id: string) => Promise<void>;
+}
+
+export const useUserStore = create<UserState>()(
+  persist(
+    (set) => ({
+      user: null,
+      loading: false,
+      fetchUser: async (id) => {
+        set({ loading: true });
+        try {
+          const user = await fetchUser(id);
+          set({ user, loading: false });
+        } catch {
+          set({ loading: false });
+        }
+      },
+    }),
+    {
+      name: 'user-storage',
+      storage: createJSONStorage(() => AsyncStorage),
+      partialize: (state) => ({ user: state.user }), // Only persist user, not loading
+    }
+  )
+);
+```
+
+## Conventions
+
+- One store per domain (app, search, notifications, etc.)
+- Separate concerns - don't put everything in one store
+- Always use selectors
+- Use `partialize` to exclude transient state from persistence
+- Include reset function for clearing state
+- Name storage keys descriptively: `[domain]-storage`

package/templates/base/.husky/pre-commit

@@ -0,0 +1 @@
+bunx lint-staged

package/templates/base/.lintstagedrc

@@ -0,0 +1,4 @@
+{
+  "*.{ts,tsx,js,jsx}": ["biome check --write"],
+  "*.{json,md}": ["biome format --write"]
+}

package/templates/base/.node-version

@@ -0,0 +1 @@
+22

package/templates/base/AGENTS.md

@@ -0,0 +1,135 @@
+# AGENTS.md
+
+Guide for using AI agents effectively in this codebase.
+
+## Quick Reference
+
+| Task | Agent Type | Skill |
+|------|------------|-------|
+| Explore codebase | `Explore` | - |
+| Plan implementation | `Plan` | `superpowers:writing-plans` |
+| Execute plan | `general-purpose` | `superpowers:executing-plans` |
+| Debug issues | `general-purpose` | `superpowers:systematic-debugging` |
+| Code review | `code-reviewer` | `superpowers:requesting-code-review` |
+| Create component | `general-purpose` | Project: `add-component` |
+| Add route | `general-purpose` | Project: `add-route` |
+| Add API endpoint | `general-purpose` | Project: `add-api-endpoint` |
+
+## Workflows
+
+### Feature Development
+
+```
+1. Brainstorm → superpowers:brainstorming
+2. Write Plan → superpowers:writing-plans
+3. Execute   → superpowers:subagent-driven-development
+4. Review    → superpowers:requesting-code-review
+5. Finish    → superpowers:finishing-a-development-branch
+```
+
+### Bug Fixing
+
+```
+1. Debug    → superpowers:systematic-debugging
+2. Fix      → TDD approach (test first)
+3. Verify   → superpowers:verification-before-completion
+4. Review   → superpowers:requesting-code-review
+```
+
+### Exploration
+
+Use the `Explore` agent for:
+- Understanding unfamiliar parts of the codebase
+- Finding where functionality is implemented
+- Mapping dependencies between modules
+
+```
+Task tool with subagent_type=Explore:
+"How does authentication work in this app?"
+"Where are API routes defined?"
+"What components use the useAppStore hook?"
+```
+
+## Project Skills
+
+Custom skills in `.claude/skills/`:
+
+### `add-component`
+
+Creates a new React component with proper structure:
+- Component file with TypeScript
+- Exports from index
+- Follows project patterns
+
+### `add-route`
+
+Adds a new route to the web or mobile app:
+- Creates route file with proper exports
+- Sets up loader if needed
+- Follows file-based routing conventions
+
+### `add-api-endpoint`
+
+Creates a new API endpoint:
+- Zod schema for request/response
+- Query options factory
+- fetchValidated integration
+
+## Best Practices
+
+### Do
+
+- **Use skills** when they exist for the task
+- **Use Explore agent** for codebase questions
+- **Plan first** for multi-file changes
+- **TDD** for all new functionality
+- **Small commits** after each logical change
+- **Run checks** before claiming completion
+
+### Don't
+
+- Don't skip planning for complex features
+- Don't write code without reading existing patterns
+- Don't commit without running `bun check`
+- Don't claim "done" without verification
+
+## Parallel Agents
+
+For independent tasks, dispatch multiple agents in parallel:
+
+```
+Good candidates for parallelization:
+- Independent component creation
+- Separate test files
+- Unrelated bug fixes
+- Documentation updates
+
+Not parallelizable:
+- Sequential dependencies
+- Shared file modifications
+- Database migrations
+```
+
+## Agent Communication
+
+When working with multiple agents:
+
+1. **Context handoff**: Provide full task description, don't reference "above"
+2. **Clear boundaries**: Each agent owns specific files
+3. **Verification**: Each agent verifies their own work
+4. **Review**: Use code-reviewer agent after implementation
+
+## Customization
+
+### Adding New Skills
+
+1. Create skill file in `.claude/skills/`
+2. Follow the skill template format
+3. Document in this file
+
+### Adjusting Rules
+
+Edit `.claude/settings.json` to:
+- Add custom instructions
+- Configure tool permissions
+- Set project-specific behaviors