AgentSkillsCN

tinkerdown

以 Markdown 格式构建单文件 Web 应用,无需 React,也无需额外的构建步骤——只需一键运行即可。

SKILL.md
--- frontmatter
name: tinkerdown
description: Build single-file web apps in markdown. No React. No build step. Just run.
triggers:
  - tinkerdown
  - single-file app
  - markdown app
  - no-build app
  - internal tool
  - admin dashboard
  - one-file app

Tinkerdown: One-File AI App Builder

Build working web apps in a single markdown file. No React. No build step. Just run.

When to Use Tinkerdown

Use Tinkerdown for:

  • Internal tools - Admin dashboards, data viewers, CRUD apps
  • Prototypes - Quick interactive demos
  • Personal utilities - Task managers, trackers, simple apps
  • Data displays - Tables, forms, dashboards connected to databases/APIs

Don't use Tinkerdown for:

  • Public-facing marketing sites (use static site generators)
  • Apps requiring complex client-side state (use React/Vue)
  • Real-time multiplayer games

Quick Start

1. Create a markdown file

Create myapp.md:

markdown
---
title: "My App"
---

# My App

\`\`\`lvt
<div>
    <h2>Add Item</h2>
    <form lvt-submit="save" lvt-persist="items">
        <input type="text" name="title" required>
        <button type="submit">Add</button>
    </form>

    <h2>Items</h2>
    {{if .Items}}
    <ul>
        {{range .Items}}
        <li>
            {{.Title}}
            <button lvt-click="Delete" lvt-data-id="{{.Id}}">Delete</button>
        </li>
        {{end}}
    </ul>
    {{else}}
    <p>No items yet.</p>
    {{end}}
</div>
\`\`\`

2. Run it

bash
tinkerdown serve myapp.md

3. Open in browser

Navigate to http://localhost:3000 - your app is running!

Key Concepts

ConceptWhat It Does
lvt-persistAuto-saves form data to SQLite. Creates table, generates CRUD.
lvt-sourceConnects to external data (PostgreSQL, REST API, CSV, JSON, scripts)
lvt-clickTriggers server action on click
lvt-submitHandles form submission
lvt-data-*Passes data with actions (e.g., lvt-data-id="123")
frontmatter sourcesDefine data sources in frontmatter - no tinkerdown.yaml needed!

Reference

See reference.md for complete API documentation:

  • File structure and frontmatter
  • All lvt-* attributes
  • Source configuration (pg, rest, csv, json, exec)
  • Template syntax (Go templates)
  • Components (datatable, dropdown)

Examples

See examples/ for complete working apps:

  1. Todo App - Basic CRUD with lvt-persist
  2. Dashboard - Data display with lvt-source
  3. Contact Form - Form handling
  4. Blog - Multi-page with partials
  5. Inventory - PostgreSQL integration
  6. Survey - Multi-step forms
  7. Booking - Date/time handling
  8. Expense Tracker - CSV import
  9. FAQ - Accordion component
  10. Status Page - Real-time updates