create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/streamdown/references/plugins.md

@@ -0,0 +1,239 @@
+# Streamdown Plugins Reference
+
+## Table of Contents
+
+- [Plugin Overview](#plugin-overview)
+- [@streamdown/code](#streamdowncode)
+- [@streamdown/mermaid](#streamdownmermaid)
+- [@streamdown/math](#streamdownmath)
+- [@streamdown/cjk](#streamdowncjk)
+- [Built-in Remark Plugins](#built-in-remark-plugins)
+- [Built-in Rehype Plugins](#built-in-rehype-plugins)
+- [Customizing Built-in Plugins](#customizing-built-in-plugins)
+
+## Plugin Overview
+
+Each plugin is a standalone package. Install only what's needed:
+
+```bash
+npm install @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cjk
+```
+
+```tsx
+import { code } from '@streamdown/code';
+import { mermaid } from '@streamdown/mermaid';
+import { math } from '@streamdown/math';
+import { cjk } from '@streamdown/cjk';
+import 'katex/dist/katex.min.css'; // Required for math
+
+<Streamdown plugins={{ code, mermaid, math, cjk }}>
+  {markdown}
+</Streamdown>
+```
+
+## @streamdown/code
+
+Syntax highlighting via Shiki. Supports 200+ languages (lazy-loaded on demand).
+
+**Install:**
+```bash
+npm install @streamdown/code
+```
+
+**Default usage:**
+```tsx
+import { code } from '@streamdown/code';
+
+<Streamdown plugins={{ code }}>{markdown}</Streamdown>
+```
+
+**Custom themes:**
+```tsx
+import { createCodePlugin } from '@streamdown/code';
+
+const code = createCodePlugin({
+  themes: ['github-light', 'github-dark'], // [light, dark]
+});
+```
+
+Theme is also configurable via the `shikiTheme` prop on Streamdown:
+```tsx
+<Streamdown plugins={{ code }} shikiTheme={['one-light', 'one-dark-pro']}>
+  {markdown}
+</Streamdown>
+```
+
+**Features:**
+- Copy button on hover (disabled during streaming)
+- Download button with correct file extension
+- 200+ languages: js, ts, python, go, java, rust, c, cpp, ruby, php, swift, kotlin, etc.
+- Token caching for performance
+- Lazy language loading
+
+**Streaming behavior:** Unterminated code blocks are gracefully handled by remend. Copy/download buttons disabled when `isAnimating={true}`.
+
+**Common issue — Shiki external package warning:**
+If using Next.js and seeing warnings, install shiki explicitly and add to `next.config.js`:
+```js
+transpilePackages: ['shiki'],
+```
+
+## @streamdown/mermaid
+
+Interactive Mermaid diagrams.
+
+**Install:**
+```bash
+npm install @streamdown/mermaid
+```
+
+**Default usage:**
+```tsx
+import { mermaid } from '@streamdown/mermaid';
+
+<Streamdown plugins={{ mermaid }}>{markdown}</Streamdown>
+```
+
+**Custom config:**
+```tsx
+import { createMermaidPlugin } from '@streamdown/mermaid';
+
+const mermaid = createMermaidPlugin({
+  config: {
+    theme: 'dark', // 'default' | 'dark' | 'forest' | 'neutral' | 'base'
+    fontFamily: 'monospace',
+  },
+});
+```
+
+**Mermaid options on Streamdown:**
+```tsx
+<Streamdown
+  plugins={{ mermaid }}
+  mermaid={{
+    config: { theme: 'neutral' },
+    errorComponent: ({ error, chart, retry }) => (
+      <div>
+        <p>Failed to render: {error}</p>
+        <button onClick={retry}>Retry</button>
+      </div>
+    ),
+  }}
+>
+  {markdown}
+</Streamdown>
+```
+
+**Supported diagram types:** Flowcharts, sequence, state, class, pie, Gantt, ER, git graphs.
+
+**Interactive controls:** Fullscreen, download SVG, copy source, pan/zoom. Customize via `controls` prop:
+```tsx
+<Streamdown
+  plugins={{ mermaid }}
+  controls={{
+    mermaid: { download: true, copy: true, fullscreen: true, panZoom: false },
+  }}
+>
+```
+
+**Streaming behavior:** Diagrams render as code blocks until the mermaid block is complete.
+
+## @streamdown/math
+
+LaTeX math via KaTeX.
+
+**Install:**
+```bash
+npm install @streamdown/math
+```
+
+**Usage (CSS import required):**
+```tsx
+import { math } from '@streamdown/math';
+import 'katex/dist/katex.min.css';
+
+<Streamdown plugins={{ math }}>{markdown}</Streamdown>
+```
+
+**Custom config:**
+```tsx
+import { createMathPlugin } from '@streamdown/math';
+
+const math = createMathPlugin({
+  singleDollarTextMath: true, // Enable $...$ syntax (default: false)
+  errorColor: '#ff0000',
+});
+```
+
+**Syntax:**
+- Inline: `$$E = mc^2$$` (same line)
+- Block: `$$\nE = mc^2\n$$` (separate lines)
+- Default uses double `$$` only (not single `$`) to avoid conflicts with currency
+
+**Streaming behavior:** Incomplete `$$` blocks are auto-closed by remend.
+
+## @streamdown/cjk
+
+Chinese, Japanese, Korean text support.
+
+**Install:**
+```bash
+npm install @streamdown/cjk
+```
+
+**Usage:**
+```tsx
+import { cjk } from '@streamdown/cjk';
+
+<Streamdown plugins={{ cjk }}>{markdown}</Streamdown>
+```
+
+**What it fixes:**
+- Emphasis markers adjacent to ideographic punctuation (bold, italic, strikethrough)
+- Autolinks swallowing trailing CJK punctuation
+
+**Supported punctuation:** `。．，、？！：；（）【】「」『』〈〉《》`
+
+## Built-in Remark Plugins
+
+**remark-gfm** — GitHub Flavored Markdown:
+- Tables (with alignment)
+- Task lists (`- [ ]`, `- [x]`)
+- Strikethrough (`~~text~~`)
+- Autolinks
+- Footnotes (`[^1]`)
+
+## Built-in Rehype Plugins
+
+1. **rehype-raw** — Preserves raw HTML in Markdown
+2. **rehype-sanitize** — XSS protection
+3. **rehype-harden** — URL/protocol restrictions:
+   ```tsx
+   {
+     allowedImagePrefixes: ['*'],
+     allowedLinkPrefixes: ['*'],
+     allowedProtocols: ['*'],
+     defaultOrigin: undefined,
+     allowDataImages: true,
+   }
+   ```
+
+## Customizing Built-in Plugins
+
+```tsx
+import { defaultRemarkPlugins, defaultRehypePlugins } from 'streamdown';
+
+// Add custom plugins alongside defaults
+<Streamdown
+  remarkPlugins={[...Object.values(defaultRemarkPlugins), myCustomPlugin]}
+  rehypePlugins={[...Object.values(defaultRehypePlugins), anotherPlugin]}
+>
+  {markdown}
+</Streamdown>
+```
+
+**Disable HTML entirely** by omitting rehype-raw:
+```tsx
+const { raw, ...rest } = defaultRehypePlugins;
+<Streamdown rehypePlugins={Object.values(rest)}>{markdown}</Streamdown>
+```

package/dist/templates/claude-config/app/.agents/skills/streamdown/references/security.md

@@ -0,0 +1,192 @@
+# Streamdown Security Reference
+
+## Table of Contents
+
+- [Default Security Posture](#default-security-posture)
+- [Restricting Protocols](#restricting-protocols)
+- [Restricting Links](#restricting-links)
+- [Restricting Images](#restricting-images)
+- [Link Safety Modal](#link-safety-modal)
+- [Custom HTML Tags](#custom-html-tags)
+- [Disabling HTML](#disabling-html)
+- [Production Config Example](#production-config-example)
+
+## Default Security Posture
+
+Streamdown is permissive by default (all prefixes, protocols, and data images allowed). Security is provided by:
+
+1. **rehype-sanitize** — XSS prevention
+2. **rehype-harden** — URL/protocol restriction (all allowed by default)
+3. **Link safety modal** — Confirmation before opening external links (enabled by default)
+
+## Restricting Protocols
+
+```tsx
+<Streamdown
+  rehypePlugins={[
+    rehypeRaw,
+    [rehypeSanitize, {}],
+    [harden, {
+      allowedProtocols: ['https', 'mailto'],
+      allowedLinkPrefixes: ['*'],
+      allowedImagePrefixes: ['*'],
+      allowDataImages: true,
+    }],
+  ]}
+>
+```
+
+## Restricting Links
+
+Only allow specific domains:
+
+```tsx
+[harden, {
+  allowedLinkPrefixes: [
+    'https://example.com',
+    'https://docs.example.com',
+  ],
+  allowedProtocols: ['https'],
+}]
+```
+
+## Restricting Images
+
+```tsx
+[harden, {
+  allowedImagePrefixes: [
+    'https://images.example.com',
+    'https://cdn.example.com',
+  ],
+  allowDataImages: false, // Disable data: URLs
+}]
+```
+
+## Link Safety Modal
+
+**Default:** Enabled. Shows confirmation before opening links.
+
+**Disable:**
+```tsx
+<Streamdown linkSafety={{ enabled: false }}>{markdown}</Streamdown>
+```
+
+**Safelist trusted domains:**
+```tsx
+<Streamdown
+  linkSafety={{
+    enabled: true,
+    onLinkCheck: async (url) => {
+      const trusted = ['example.com', 'docs.example.com'];
+      const hostname = new URL(url).hostname;
+      return trusted.some((d) => hostname.endsWith(d));
+    },
+  }}
+>
+```
+
+**Custom modal:**
+```tsx
+<Streamdown
+  linkSafety={{
+    enabled: true,
+    renderModal: ({ url, isOpen, onClose, onConfirm }) => (
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent>
+          <p>Open {url}?</p>
+          <Button onClick={onConfirm}>Continue</Button>
+          <Button onClick={onClose}>Cancel</Button>
+        </DialogContent>
+      </Dialog>
+    ),
+  }}
+>
+```
+
+## Custom HTML Tags
+
+Whitelist specific tags and attributes for AI-generated custom elements:
+
+```tsx
+<Streamdown
+  allowedTags={{
+    source: ["id"],
+    mention: ["user_id", "type"],
+    widget: ["data*"], // Wildcard: all data-* attributes
+  }}
+  components={{
+    source: (props) => <Badge>{props.id}</Badge>,
+    mention: (props) => <UserMention userId={props.user_id} />,
+  }}
+>
+```
+
+**Important:** `allowedTags` only works with default rehype plugins. Custom `rehypePlugins` require custom sanitization.
+
+## URL Transform
+
+Use the `urlTransform` prop for custom URL rewriting. The default `defaultUrlTransform` is a passthrough — URL security is handled by `rehype-sanitize` and `rehype-harden`.
+
+```tsx
+import { Streamdown, defaultUrlTransform } from 'streamdown';
+
+// Proxy images through your CDN
+<Streamdown
+  urlTransform={(url, key, node) => {
+    if (key === 'src') {
+      return `https://your-cdn.com/proxy?url=${encodeURIComponent(url)}`;
+    }
+    return defaultUrlTransform(url, key, node);
+  }}
+>
+  {markdown}
+</Streamdown>
+```
+
+## Skipping HTML
+
+Completely ignore raw HTML in Markdown with `skipHtml`:
+
+```tsx
+<Streamdown skipHtml>{markdown}</Streamdown>
+```
+
+## Disabling HTML
+
+Remove `rehype-raw` to block all raw HTML:
+
+```tsx
+import { defaultRehypePlugins } from 'streamdown';
+
+const { raw, ...rest } = defaultRehypePlugins;
+
+<Streamdown rehypePlugins={Object.values(rest)}>{markdown}</Streamdown>
+```
+
+## Production Config Example
+
+Strict config for AI-generated content:
+
+```tsx
+<Streamdown
+  rehypePlugins={[
+    rehypeRaw,
+    [rehypeSanitize, {}],
+    [harden, {
+      allowedProtocols: ['https', 'mailto'],
+      allowedLinkPrefixes: ['https://your-domain.com'],
+      allowedImagePrefixes: ['https://your-cdn.com'],
+      allowDataImages: false,
+    }],
+  ]}
+  linkSafety={{
+    enabled: true,
+    onLinkCheck: async (url) => {
+      const trusted = ['your-domain.com'];
+      return trusted.some((d) => new URL(url).hostname.endsWith(d));
+    },
+  }}
+>
+  {aiContent}
+</Streamdown>
+```

package/dist/templates/claude-config/app/.agents/skills/streamdown/references/styling.md

@@ -0,0 +1,166 @@
+# Streamdown Styling Reference
+
+## Table of Contents
+
+- [CSS Variables](#css-variables)
+- [Data Attribute Selectors](#data-attribute-selectors)
+- [Custom Components](#custom-components)
+- [Scoped Styling](#scoped-styling)
+- [Theme Examples](#theme-examples)
+- [Styling Priority](#styling-priority)
+
+## CSS Variables
+
+Streamdown uses shadcn/ui CSS variables. Override in `globals.css`:
+
+```css
+@layer base {
+  :root {
+    --primary: 222.2 47.4% 11.2%;        /* Links, accents */
+    --primary-foreground: 210 40% 98%;    /* Text on primary */
+    --muted: 210 40% 96.1%;              /* Code blocks, table headers */
+    --muted-foreground: 215.4 16.3% 46.9%; /* Blockquote text */
+    --border: 214.3 31.8% 91.4%;         /* Tables, rules, code blocks */
+    --ring: 222.2 84% 4.9%;              /* Focus rings */
+    --radius: 0.5rem;                     /* Border radius */
+  }
+
+  .dark {
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --border: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+```
+
+## Data Attribute Selectors
+
+Target specific elements via `[data-streamdown="..."]`:
+
+```css
+/* Headings */
+[data-streamdown="heading-1"] { }
+[data-streamdown="heading-2"] { }
+[data-streamdown="heading-3"] { }
+[data-streamdown="heading-4"] { }
+[data-streamdown="heading-5"] { }
+[data-streamdown="heading-6"] { }
+
+/* Text */
+[data-streamdown="strong"] { }
+[data-streamdown="link"] { }
+[data-streamdown="inline-code"] { }
+
+/* Lists */
+[data-streamdown="ordered-list"] { }
+[data-streamdown="unordered-list"] { }
+[data-streamdown="list-item"] { }
+
+/* Blocks */
+[data-streamdown="blockquote"] { }
+[data-streamdown="horizontal-rule"] { }
+
+/* Code */
+[data-streamdown="code-block"] { }
+[data-streamdown="mermaid-block"] { }
+
+/* Tables */
+[data-streamdown="table-wrapper"] { }
+[data-streamdown="table"] { }
+[data-streamdown="table-header"] { }
+[data-streamdown="table-body"] { }
+[data-streamdown="table-row"] { }
+[data-streamdown="table-header-cell"] { }
+[data-streamdown="table-cell"] { }
+
+/* Other */
+[data-streamdown="superscript"] { }
+[data-streamdown="subscript"] { }
+```
+
+## Custom Components
+
+Override any Markdown element via the `components` prop:
+
+```tsx
+<Streamdown
+  components={{
+    h1: ({ children, ...props }) => (
+      <h1 className="text-4xl font-bold" {...props}>{children}</h1>
+    ),
+    a: ({ children, href, ...props }) => (
+      <a href={href} className="text-blue-500 hover:underline" {...props}>
+        {children}
+      </a>
+    ),
+    code: ({ children, className, ...props }) => {
+      const isInline = !className;
+      if (isInline) {
+        return <code className="bg-gray-100 rounded px-1" {...props}>{children}</code>;
+      }
+      return <code className={className} {...props}>{children}</code>;
+    },
+  }}
+>
+  {markdown}
+</Streamdown>
+```
+
+**Available elements:** h1-h6, p, strong, em, ul, ol, li, a, code, pre, blockquote, table, thead, tbody, tr, th, td, img, hr, sup, sub, section
+
+## Scoped Styling
+
+Use `className` prop for instance-specific styles:
+
+```tsx
+<Streamdown className="docs-content">{markdown}</Streamdown>
+```
+
+```css
+.docs-content [data-streamdown="heading-1"] {
+  font-family: 'Inter', sans-serif;
+}
+.docs-content [data-streamdown="code-block"] {
+  font-family: 'Fira Code', monospace;
+}
+```
+
+## Theme Examples
+
+**Minimal Gray:**
+```css
+:root {
+  --primary: 0 0% 20%;
+  --muted: 0 0% 96%;
+  --border: 0 0% 90%;
+  --radius: 0.25rem;
+}
+```
+
+**Vibrant Blue:**
+```css
+:root {
+  --primary: 217 91% 60%;
+  --muted: 214 100% 97%;
+  --border: 214 32% 91%;
+  --radius: 0.75rem;
+}
+```
+
+**No Borders:**
+```css
+:root {
+  --border: transparent;
+  --muted: 0 0% 98%;
+  --radius: 0rem;
+}
+```
+
+## Styling Priority
+
+1. **Custom Components** — Complete control over rendering
+2. **CSS via `data-streamdown` selectors** — Element-specific styling
+3. **CSS Variables** — Global theme tokens

package/dist/templates/claude-config/app/.agents/skills/tdd/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: tdd
+description: Test-driven development with red-green-refactor loop. Use when user wants to build features or fix bugs using TDD, mentions "red-green-refactor", wants integration tests, or asks for test-first development.
+---
+
+# Test-Driven Development
+
+## Philosophy
+
+**Core principle**: Tests should verify behavior through public interfaces, not implementation details. Code can change entirely; tests shouldn't.
+
+**Good tests** are integration-style: they exercise real code paths through public APIs. They describe _what_ the system does, not _how_ it does it. A good test reads like a specification - "user can checkout with valid cart" tells you exactly what capability exists. These tests survive refactors because they don't care about internal structure.
+
+**Bad tests** are coupled to implementation. They mock internal collaborators, test private methods, or verify through external means (like querying a database directly instead of using the interface). The warning sign: your test breaks when you refactor, but behavior hasn't changed. If you rename an internal function and tests fail, those tests were testing implementation, not behavior.
+
+See [tests.md](tests.md) for examples and [mocking.md](mocking.md) for mocking guidelines.
+
+## Anti-Pattern: Horizontal Slices
+
+**DO NOT write all tests first, then all implementation.** This is "horizontal slicing" - treating RED as "write all tests" and GREEN as "write all code."
+
+This produces **crap tests**:
+
+- Tests written in bulk test _imagined_ behavior, not _actual_ behavior
+- You end up testing the _shape_ of things (data structures, function signatures) rather than user-facing behavior
+- Tests become insensitive to real changes - they pass when behavior breaks, fail when behavior is fine
+- You outrun your headlights, committing to test structure before understanding the implementation
+
+**Correct approach**: Vertical slices via tracer bullets. One test → one implementation → repeat. Each test responds to what you learned from the previous cycle. Because you just wrote the code, you know exactly what behavior matters and how to verify it.
+
+```
+WRONG (horizontal):
+  RED:   test1, test2, test3, test4, test5
+  GREEN: impl1, impl2, impl3, impl4, impl5
+
+RIGHT (vertical):
+  RED→GREEN: test1→impl1
+  RED→GREEN: test2→impl2
+  RED→GREEN: test3→impl3
+  ...
+```
+
+## Workflow
+
+### 1. Planning
+
+Before writing any code:
+
+- [ ] Confirm with user what interface changes are needed
+- [ ] Confirm with user which behaviors to test (prioritize)
+- [ ] Identify opportunities for [deep modules](deep-modules.md) (small interface, deep implementation)
+- [ ] Design interfaces for [testability](interface-design.md)
+- [ ] List the behaviors to test (not implementation steps)
+- [ ] Get user approval on the plan
+
+Ask: "What should the public interface look like? Which behaviors are most important to test?"
+
+**You can't test everything.** Confirm with the user exactly which behaviors matter most. Focus testing effort on critical paths and complex logic, not every possible edge case.
+
+### 2. Tracer Bullet
+
+Write ONE test that confirms ONE thing about the system:
+
+```
+RED:   Write test for first behavior → test fails
+GREEN: Write minimal code to pass → test passes
+```
+
+This is your tracer bullet - proves the path works end-to-end.
+
+### 3. Incremental Loop
+
+For each remaining behavior:
+
+```
+RED:   Write next test → fails
+GREEN: Minimal code to pass → passes
+```
+
+Rules:
+
+- One test at a time
+- Only enough code to pass current test
+- Don't anticipate future tests
+- Keep tests focused on observable behavior
+
+### 4. Refactor
+
+After all tests pass, look for [refactor candidates](refactoring.md):
+
+- [ ] Extract duplication
+- [ ] Deepen modules (move complexity behind simple interfaces)
+- [ ] Apply SOLID principles where natural
+- [ ] Consider what new code reveals about existing code
+- [ ] Run tests after each refactor step
+
+**Never refactor while RED.** Get to GREEN first.
+
+## Checklist Per Cycle
+
+```
+[ ] Test describes behavior, not implementation
+[ ] Test uses public interface only
+[ ] Test would survive internal refactor
+[ ] Code is minimal for this test
+[ ] No speculative features added
+```