Define your AI logic once as skills. That's it — you now have a product. Claude Code in the side panel gives you natural language control. The web app gives you a rich GUI. Both run the same skills, both see the same data. Everyone on a Claude Code subscription. Apps built on SNA — like CoWork — running as naturally as opening a browser. That's the new paradigm.
Define your AI logic once as Skills. Claude Code in the side panel becomes the natural language interface — just describe what you want and it runs the right skill. The web app is the rich GUI interface — buttons trigger skills directly, events stream back in real time, dashboards update automatically.
Both interfaces talk to the same skills. Both see the same data in SQLite. SNA ships as one self-contained package. Clone, open Claude, and you have a fully operational AI agent with a GUI.
Every skill emits structured events as it runs. useSna() lets your UI subscribe to Claude Code's internal state in real time — milestones, permission requests, completions. Without this, Claude Code is just a CLI. With this, it becomes the backbone of a real product.
This is what makes Claude Code a production runtime, not just a terminal.
Real event feed from a running skill. Your UI sees this as it happens.
The devlog tracker is just the demo. SNA is a blank canvas — describe what you want, and Claude builds it right here.
The new craft isn't writing code. It's designing how AI thinks.
You don't even need to know the skill names. Just talk to Claude in the side panel — it reads SNA's built-in skills and figures out what to run.
Build a habit tracker — daily check-ins, streaks, stored in SQLite
habit trackerMake a meeting notes skill that extracts action items and owners
meeting notesCreate a bookmark manager with Claude-powered tagging and search
bookmark managerAdd a focus timer that logs deep work sessions by project
focus trackerWhatever incredible app you build on top of SNA — it's entirely yours. No strings attached.
Chain skills with ordering, validation, and shared data — all declarative.
Scan git repos, gather commits
Pattern recognition, anomaly detection
Generate weekly summary with insights
await sna.run("/devlog-collect");await sna.run("/devlog-analyze --week");await sna.run("/devlog-report");
Each step runs as a full Claude Code invocation. The frontend sees all events live. If a step fails, the pipeline stops — no half-baked results.
The sna-builder plugin teaches Claude Code your SDK conventions automatically. No docs to read. No rules to memorize.
SDK owns sna.db. App owns app.db. Never cross the boundary.
Always use SDK's emit.ts. Never write events directly.
Use @sna-sdk/core and @sna-sdk/react. Never import from 'sna/'.
Use SDK's hook.ts for permission requests. Never handle manually.
Clone the repo and Claude instantly knows every pattern. The architecture replicates itself through every new agent session.
It might be slow.
But exactly as you envisioned — an application anyone can build.
The abstract ideas that traditional programming could never express — now they just work. No data mapping, no schema wiring. The LLM handles it.
A new architecture for a new era.
All you need is your logic.
GUI click, user action, agent decision, programmatic call — they all land in the same place.
And then — the result flows out.
Four trigger sources. Zero extra implementation. The skill runs the same way every time.
Three moving parts. That's it.
Create a SKILL.md in .claude/skills/. Define what Claude should do — run scripts, read data, reason over it.
No cloud DB needed. The DB schema is the contract between skills — one skill writes, another reads. No JSON Schema definitions. No retry loops for malformed outputs. SQLite enforces the structure.
Ask Claude in the built-in chat panel, or trigger from code with runSkill(). Claude follows the SKILL.md, executes scripts, reasons, and responds. All within your Claude Code subscription — no extra API costs.
---name: devlog-collectdescription: Scan git repos and collect today's commitsallowed-tools: - Bash(tsx src/scripts/devlog.ts *)---# devlog-collect1. Run the collector: ```bash tsx src/scripts/devlog.ts collect --since "7 days ago" ```2. Read the output and summarize what was worked on3. Highlight the most productive repo and suggest what to focus on next
The entire SNA architecture is already embedded in CLAUDE.md — the agent prompt. Clone SNA and Claude instantly knows every pattern. Describe any AI app you want, and Claude builds it following the exact same architecture. The architecture replicates itself.
Queries, mutations, event streams — Claude Code handles them all as the runtime. A thin Hono server relays events, but the intelligence lives in Claude. The magic is Claude Code IS the runtime.
useSna() closes the loop: trigger skills from the GUI, receive events back in real time.
const { events, isRunning, agent, chat, runSkill } = useSna({ skills: ["devlog-collect"], // Claude Event Hooks (WebSocket push) onMilestone: (e) => setProgress(e.message), onPermissionNeeded: (e) => showBanner("Claude needs your ok"), onComplete: () => refreshDashboard(),});// Run a skill — opens chat panel, sends instruction to agent<button onClick={() => runSkill("devlog-collect")}>Collect</button>// Agent sessionagent.connected // SSE stream to Claude agentagent.alive // Agent process runningagent.send(msg) // Send message to Claude// Chat panelchat.isOpen // Panel open statechat.toggle() // Show / hide chat panelchat.messages // Session-scoped chat history
Call runSkill('your-skill') from any React event handler. One line to kick off an agentic Claude Code run from your GUI. Events flow back automatically.
Skills emit structured events via emit.ts → SQLite → SSE → React. isRunning(), latestBySkill, the full event log. All live.
Claude Code's PermissionRequest hooks fire to the frontend via hook.ts → SQLite → SSE. The chat panel auto-opens, the user approves from the GUI. Claude's native CLI lifecycle, surfaced as interactive web UI.
chat.isOpen, chat.toggle(), agent.send(). A rich conversational UI with markdown rendering, thinking visualization, and responsive layout — side-by-side, overlay, or fullscreen.
Your Claude Code subscription covers everything. No separate LLM API keys or per-token billing.
SQLite on disk. Your data never leaves your machine.
Full bidirectional API over a single WS connection. Instant event push — no polling.
Change models mid-conversation without restarting. One message, zero downtime.
Single request for quick tasks — spawn, run, return, cleanup. All in one call.
Run parallel agent sessions — each with independent state, events, and chat history.
Clone the sample and you're running in 3 steps.
git clone https://github.com/neuradex/sna cd sna/samples/hello-sna
npm install
npx sna up
MIT License — fork it, remix it, ship it. github.com/neuradex/sna
Claude and Claude Code are trademarks or registered trademarks of Anthropic, PBC. This project is not affiliated with, endorsed by, or sponsored by Anthropic.
skills-native-app (SNA) is an open-source template distributed under the MIT License. Use at your own discretion.