@askrjs/cli 0.0.2

package/templates/ssr/src/styles.css

@@ -0,0 +1,148 @@
+@import '@askrjs/themes/default';
+
+/* Layout */
+body {
+  margin: 0;
+  background: var(--ak-color-bg);
+  color: var(--ak-color-fg);
+  font-family: var(--ak-font-family);
+}
+
+header {
+  border-bottom: 1px solid var(--ak-color-border);
+  padding: var(--ak-space-md) var(--ak-space-xl);
+}
+
+header nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: var(--ak-layout-content-max-width);
+  margin: 0 auto;
+}
+
+header nav a {
+  color: var(--ak-color-fg);
+  text-decoration: none;
+  font-size: var(--ak-font-size-md);
+}
+
+header nav a:hover {
+  color: var(--ak-color-primary);
+}
+
+main {
+  max-width: var(--ak-layout-content-max-width);
+  margin: 0 auto;
+  padding: var(--ak-space-xl);
+}
+
+/* Utility */
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: var(--ak-space-lg);
+}
+
+.section {
+  margin-bottom: var(--ak-space-xl);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-muted {
+  color: var(--ak-color-muted);
+}
+
+h1,
+h2,
+h3 {
+  color: var(--ak-color-fg);
+  margin: 0 0 var(--ak-space-md);
+}
+
+p {
+  line-height: 1.6;
+  margin: 0 0 var(--ak-space-md);
+}
+
+code {
+  background: var(--ak-color-surface-muted);
+  padding: 0.15em 0.4em;
+  border-radius: var(--ak-radius-sm);
+  font-size: 0.9em;
+}
+
+/* Feature grid */
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--ak-space-lg);
+  margin: var(--ak-space-xl) 0;
+}
+
+.feature-card {
+  background: var(--ak-color-surface);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  padding: var(--ak-space-lg);
+}
+
+/* Counter */
+.counter {
+  background: var(--ak-color-surface);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  padding: var(--ak-space-xl);
+  text-align: center;
+}
+
+.counter-value {
+  font-size: 4rem;
+  font-weight: 800;
+  color: var(--ak-color-primary);
+  margin: var(--ak-space-lg) 0;
+  line-height: 1;
+}
+
+.counter-controls {
+  display: flex;
+  justify-content: center;
+  gap: var(--ak-space-md);
+  margin-top: var(--ak-space-lg);
+}
+
+/* Component showcase */
+.showcase-section {
+  background: var(--ak-color-surface);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  padding: var(--ak-space-lg);
+  margin-bottom: var(--ak-space-lg);
+}
+
+.showcase-section h3 {
+  margin-bottom: var(--ak-space-md);
+}
+
+/* Hero buttons */
+.hero-actions {
+  display: flex;
+  gap: var(--ak-space-md);
+  justify-content: center;
+  margin: var(--ak-space-xl) 0;
+}
+
+/* Responsive */
+@media (max-width: 48rem) {
+  .features {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}

package/templates/ssr/src/vite-server.d.ts

@@ -0,0 +1,7 @@
+declare module 'virtual:askr-server' {
+  import type { ServerApp } from '@askrjs/server';
+
+  const app: ServerApp;
+  export { app };
+  export default app;
+}

package/templates/ssr/tests/app.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vite-plus/test';
+
+describe('App Component', () => {
+  it('renders layout with navigation', () => {
+    const app = (
+      <div>
+        <header>
+          <nav>
+            <strong>Askr</strong>
+            <div>
+              <a href="/example">Example</a>
+              <a href="/about">About</a>
+            </div>
+          </nav>
+        </header>
+        <main>
+          <p>Content goes here</p>
+        </main>
+      </div>
+    );
+
+    expect(app).toBeDefined();
+  });
+});

package/templates/ssr/tests/components/counter.test.tsx

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { renderToString } from '@askrjs/askr/ssr';
+import Counter from '../../src/components/counter';
+
+describe('Counter', () => {
+  it('renders its initial state during SSR', () => {
+    const html = renderToString(() => <Counter />);
+
+    expect(html).toContain('counter-value');
+    expect(html).toContain('>0<');
+    expect(html).toContain('>even<');
+  });
+});

package/templates/ssr/tests/resources.test.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vite-plus/test';
+import { fetchUser } from '../src/resources/user';
+
+describe('SSR Resources', () => {
+  it('creates a resource for fetching user data', () => {
+    // Resources are called during component render
+    // Here we just verify the function is defined
+    expect(fetchUser).toBeDefined();
+    expect(typeof fetchUser).toBe('function');
+  });
+});

package/templates/ssr/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "@askrjs/askr",
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "exclude": ["dist"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/ssr/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "vitest.config.ts"]
+}

package/templates/ssr/tsconfig.server.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist/server",
+    "noEmit": false,
+    "types": ["node"]
+  },
+  "include": ["server.ts", "src/vite-server.d.ts"]
+}

package/templates/ssr/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite-plus';
+import { askr } from '@askrjs/vite';
+import { askrServer } from '@askrjs/vite/server';
+
+export default defineConfig({
+  plugins: [askr(), askrServer({ entry: './src/entry-server.tsx' })],
+  lint: {
+    ignorePatterns: ['dist/**', 'node_modules/**', 'coverage/**'],
+  },
+  fmt: {
+    semi: true,
+    singleQuote: true,
+    trailingComma: 'es5',
+    printWidth: 80,
+    tabWidth: 2,
+  },
+  server: {
+    port: 5173,
+    open: true,
+  },
+  build: {
+    manifest: true,
+    sourcemap: true,
+  },
+});

package/templates/ssr/vitest.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite-plus';
+import { askr } from '@askrjs/vite';
+
+export default defineConfig({
+  plugins: [askr()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+    },
+  },
+});

package/templates/startkit/AGENTS.md

@@ -0,0 +1,77 @@
+# {{appName}}
+
+Client-side SPA built with Askr, askr-ui, and askr-themes.
+
+## Agent Workflow
+
+- Read `package.json`, `src/main.tsx`, `src/router.tsx`, the nearest route file, and the nearest feature folder before editing.
+- Use Askr skills in this order when scope is unclear: `askr-app-builder`, `askr-mental-model`, `askr-project-structure`, then the specialized skill for the touched surface.
+- Prefer the smallest change that matches the existing route, feature, shell, and style conventions.
+- Validate with the narrowest relevant executable check first, then widen only if needed.
+
+## Commands
+
+```bash
+npm run dev        # Vite dev server with HMR (port 5173)
+npm run build      # Production build to dist/
+npm run preview    # Serve production build locally
+npm test           # Vitest (jsdom)
+npm run typecheck  # tsc --noEmit
+npm run lint       # ESLint
+npm run fmt        # Prettier
+```
+
+## Architecture
+
+- **Framework:** Askr - actor-backed, fine-grained reactive UI. No virtual DOM.
+- **Components:** askr-ui headless components (Button, Accordion, Toggle, Input, etc.). Props use `onPress` (not `onClick`), `asChild` for polymorphism, `data-slot` attributes for styling hooks.
+- **Styling:** askr-themes CSS via `[data-slot]` selectors. Keep `src/styles.css` as a thin entrypoint and organize styles in `src/styles/*` using layers (reset/tokens/theme/layout/components).
+- **Routing:** `createRouteRegistry()` composes `group()` and `route()` declarations in `src/router.tsx`. Use `currentRoute()` inside components and navigate with `<Link href="...">`.
+- **State:** Prefer `const [value, setValue] = state(initial)`. Read with `value()`, update with `setValue(...)`. `derive()` for computed values. `resource()` for async data.
+- **Data flow:** Keep sample data in `src/lib/mock-data.ts`, not inline in pages. Read async data with `resource()` and keep mock mutations in the same lib boundary.
+- **Preferences:** Keep persistent appearance/session helpers in the lib boundary and initialize at app bootstrap.
+- **Vite plugin:** `askr()` from `@askrjs/vite` handles JSX transform - no manual esbuild config needed.
+
+## Do Not Invent By Default
+
+- React hooks, React Router patterns, or `useEffect`-style data loading.
+- Generic query-client or global-store abstractions when `resource()`, `createQuery()`, or `createMutation()` already fit.
+- App-local `Button`, `Card`, `Panel`, `Sidebar`, `Navbar`, `EmptyState`, `HStack`, or `VStack` clones before checking `@askrjs/ui` and `@askrjs/themes`.
+- Route-local API clients or DTO mapping inside page components.
+
+## File Structure
+
+```
+src/
+  main.tsx           # Entry: createSPA + navigate
+  app.tsx            # Root layout with nav
+  router.tsx         # Route registration
+  styles.css         # Style entrypoint
+  styles/            # reset/tokens/theme/layout/components layers
+  components/        # App-level reusable components
+  layouts/           # app and auth route layouts
+  features/          # feature-scoped UI modules
+  pages/             # Route page components
+  lib/               # Mock data + formatting helpers
+tests/               # Vitest tests
+```
+
+## Conventions
+
+- TypeScript strict mode, ESM-only
+- JSX import source: `@askrjs/askr`
+- Use askr-ui components instead of raw HTML for interactive elements
+- Prefer composed components from `src/components/*` for app surfaces like panels, headers, tables, and empty states
+- Style with tokens; avoid hardcoded non-theme colors in component classes
+- Keep spacing on a strict rhythm: 4/8/16/24/32/48
+- Keep typography to a small semantic scale (title/section/body/muted)
+- Prefer subtle borders over heavy shadows or decorative effects
+- Ensure consistent hover/focus-visible/disabled/empty/error treatment across components
+- Prettier + ESLint enforced
+
+## Validation
+
+- Run the narrowest relevant test first.
+- Run `npm run typecheck` for type-sensitive changes.
+- Run `npm run build` when app boot, routing, or packaging changes.
+- Confirm loading, empty, error, stale, and pending states remain truthful for user-visible flows.

package/templates/startkit/README.md

@@ -0,0 +1,192 @@
+# {{appName}} starter kit
+
+A production-ready Askr starter built to feel like a real product from day one.
+
+It ships with opinionated defaults for routing boundaries, layout composition,
+state handling, and interface polish so you can focus on product behavior instead
+of project plumbing.
+
+Stack:
+
+- `@askrjs/askr`
+- `@askrjs/auth`
+- `@askrjs/ui`
+- `@askrjs/themes` (default)
+- Lucide icons via `@askrjs/lucide`
+- plain CSS with layers and design tokens
+
+## Quick start
+
+```bash
+npm install
+npm run dev
+```
+
+Then run quality checks before your first commit:
+
+```bash
+npm run check
+npm run fmt:check
+```
+
+## Command reference
+
+```bash
+npm run dev         # Local dev server with HMR
+npm run build       # Production build
+npm run preview     # Preview production build
+npm run typecheck   # TypeScript checks
+npm run lint        # ESLint across project files
+npm test            # Vitest suite
+npm run fmt         # Format full project with Prettier
+npm run fmt:check   # Verify formatting
+npm run check       # lint + typecheck + tests + production build
+```
+
+## Routes and layout model
+
+Routes are registered in src/router.tsx and split into explicit groups:
+
+- Public routes: / (landing)
+- Auth routes: /login (centered auth layout)
+- Protected routes: /dashboard, /accounts, /settings (app shell layout)
+- Fallback route: /\* (not found)
+
+The root app wrapper in `src/pages/_layout.tsx` owns cross-cutting UI such as toast.
+
+## Project structure
+
+```text
+src/
+  main.tsx
+  router.tsx
+
+  routes/
+    index.ts
+    auth.ts
+    auth-config.ts
+    public.ts
+    workspace/
+      index.ts
+      accounts.ts
+
+  pages/
+    _layout.tsx
+    home.tsx
+    not-found.tsx
+    auth/
+      _layout.tsx
+      login.tsx
+    workspace/
+      _layout.tsx
+      dashboard.tsx
+      settings.tsx
+      accounts/
+        index.tsx
+
+  components/
+    app-sidebar.tsx
+    app-header.tsx
+    stat-card.tsx
+    data-table.tsx
+    empty-state.tsx
+    page-header.tsx
+
+  features/
+    accounts/
+      account-table.tsx
+      account-filters.tsx
+
+  lib/
+    mock-data.ts
+    format.ts
+    routes.ts
+
+  styles.css
+  styles/
+    reset.css
+    tokens.css
+    theme.css
+    layout.css
+    components.css
+```
+
+## How routing works
+
+`src/router.tsx` creates one registry with `createRouteRegistry()`. The files in
+`src/routes` compose its `group()` and `route()` declarations:
+
+- A shared root wrapper for providers
+- Auth layout only for /login
+- App layout only for protected routes
+- Function-based auth requirements redirect unauthenticated users from protected routes to /login
+
+This keeps route ownership clear and avoids one mega-layout for every page type.
+
+## How layouts work
+
+- App layout (`src/pages/workspace/_layout.tsx`): sidebar + sticky header + content area.
+- Auth layout (`src/pages/auth/_layout.tsx`): minimal centered shell for forms.
+
+Use app layout for authenticated product surfaces and auth layout for onboarding/login flows.
+
+## How to add a page
+
+1. Create a new page file in the matching branch under `src/pages`.
+2. Register it in the matching file under `src/routes`.
+3. Place the route in the correct layout group (public, auth, protected).
+4. If protected, use the existing function requirements such as `requireUser()`,
+   `requireRole()`, or `requirePermission()` at the narrowest owning route or group.
+
+## First-hour customization checklist
+
+1. Update brand name, colors, and typography tokens in src/styles/tokens.css.
+2. Replace mock user/session data in src/lib/mock-data.ts.
+3. Swap dashboard/account samples for domain-specific features.
+4. Wire login and route auth logic to your real auth provider.
+5. Replace placeholders in landing and settings copy with product language.
+6. Add one end-to-end happy-path test for your primary workflow.
+
+## How to add a component
+
+1. Put shared UI in `src/components`.
+2. Put domain-specific pieces in `src/features/<feature-name>`.
+3. Keep component APIs prop-driven and small.
+4. Prefer composing `@askrjs/ui` and `@askrjs/themes/components` before inventing new abstractions.
+
+## Styling organization
+
+The CSS architecture is intentionally layered:
+
+- reset.css: baseline resets
+- tokens.css: design tokens (colors, spacing, type scale, radius)
+- theme.css: global typography and high-level theme values
+- layout.css: page/shell structure and responsive behavior
+- components.css: component and slot-level styling
+
+Guidelines:
+
+- Use token variables for spacing and colors.
+- Keep a calm neutral palette and one accent color.
+- Prefer subtle borders over heavy shadows.
+- Keep radius and motion restrained.
+
+## UX patterns included
+
+- Loading states (skeletons)
+- Empty states
+- Error states
+- Disabled actions
+- Form validation examples
+- Toast example
+- Modal example
+
+## Notes
+
+Data is intentionally mock-only and deterministic.
+
+When integrating backend services:
+
+1. Keep API calls and data transforms in src/lib.
+2. Preserve AbortController signal forwarding in async operations.
+3. Keep route guards and layout boundaries explicit in src/router.tsx.

package/templates/startkit/gitignore.template

@@ -0,0 +1,16 @@
+node_modules/
+dist/
+build/
+.env.local
+.env.*.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+.DS_Store
+Thumbs.db
+.vscode/
+.idea/
+*.swp
+*.swo
+*~

package/templates/startkit/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{appName}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/startkit/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "{{appName}}",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev",
+    "build": "vp build",
+    "preview": "vp preview",
+    "test": "vp test run",
+    "test:watch": "vp test --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "vp lint .",
+    "lint:fix": "npm run lint -- --fix",
+    "fmt": "vp fmt .",
+    "fmt:check": "vp fmt --check .",
+    "check": "npm run lint && npm run typecheck && npm test && npm run build"
+  },
+  "dependencies": {
+    "@askrjs/askr": ">=0.0.53 <0.1.0",
+    "@askrjs/auth": ">=0.0.1 <0.1.0",
+    "@askrjs/lucide": ">=0.0.3 <0.1.0",
+    "@askrjs/themes": ">=0.0.12 <0.1.0",
+    "@askrjs/ui": ">=0.0.13 <0.1.0"
+  },
+  "devDependencies": {
+    "@askrjs/vite": ">=0.0.6 <0.1.0",
+    "@types/node": "^26.0.0",
+    "jsdom": "^29.1.1",
+    "typescript": "^6.0.3",
+    "vite-plus": "^0.2.4"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}