# Timequity Vibe Coder Edge Stack
> Edge Stack
- Skill: `tomevault-io/timequity-vibe-coder-edge-stack` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/timequity-vibe-coder-edge-stack`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/timequity-vibe-coder-edge-stack/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/timequity-vibe-coder-edge-stack
---
# Edge Stack
Ultra-fast edge-native web development: **Hono + htmx + UnoCSS + D1**
## Stack Overview
| Layer | Tool | Why |
|-------|------|-----|
| Framework | Hono | Ultra-fast, TypeScript, JSX support |
| Interactivity | htmx | Server-rendered, 14kb, no build step |
| Styling | UnoCSS | Tailwind-compatible, instant builds |
| Database | Cloudflare D1 | SQLite on edge, free tier |
| Deploy | CF Workers/Pages | Global edge, zero cold start |
## Quick Start
```bash
# Create project
pnpm create hono@latest my-app
# Select: cloudflare-workers
cd my-app
pnpm add htmx.org
```
### wrangler.toml
```toml
name = "my-app"
compatibility_date = "2024-01-01"
main = "src/index.ts"
[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
```
### Basic App
```typescript
import { Hono } from 'hono'
import { html } from 'hono/html'
type Bindings = { DB: D1Database }
const app = new Hono<{ Bindings: Bindings }>()
// Layout with htmx
const Layout = ({ children }: { children: any }) => html`
${children}
`
// Page with htmx interactivity
app.get('/', (c) => {
return c.html(
My App
)
})
// API returns HTML fragment
app.get('/api/items', async (c) => {
const { results } = await c.env.DB
.prepare('SELECT * FROM items')
.all()
return c.html(
{results.map((item: any) => (
- {item.name}
))}
)
})
export default app
```
## Commands
```bash
# Development
pnpm dev
# Create D1 database
wrangler d1 create my-db
# Run migration
wrangler d1 execute my-db --file=./schema.sql
# Deploy
wrangler deploy
```
## When to Use
**Good for:**
- Landing pages, marketing sites
- CRUD apps, admin panels
- Marketplaces, directories
- Forms, surveys
- Rapid prototyping
**Not ideal for:**
- Heavy client-side interactivity (use SPA)
- Real-time collaborative editing
- Complex state management
## References
- **[hono.md](references/hono.md)** — Routing, middleware, JSX, bindings
- **[htmx-patterns.md](references/htmx-patterns.md)** — htmx with Hono patterns
- **[unocss.md](references/unocss.md)** — UnoCSS setup, custom utilities
- **[d1-database.md](references/d1-database.md)** — D1 schema, queries, migrations
- **[deployment.md](references/deployment.md)** — wrangler.toml, CI/CD, domains
---
> Source: [timequity/vibe-coder](https://github.com/timequity/vibe-coder) — distributed by [TomeVault](https://tomevault.io).