Claude-Built YAML Preview Cuts Datasette News Edits
Prompt Claude to clone a GitHub repo and build a real-time YAML editor with markdown linting, link checks, and styled preview—loading news.yaml directly for instant validation.
Prompt Claude to Build Repo-Aware Editors
Clone a GitHub repo directly in Claude chat and instruct it to analyze files like news.yaml, then generate an artifact for pasting and previewing content. Simon Willison used this exact prompt: 'Clone https://github.com/simonw/datasette.io and look at the news.yaml file and how it is rendered on the homepage. Build an artifact I can paste that YAML into which previews what it will look like, and highlights any markdown errors or YAML errors.' This leverages Claude's repo cloning to create a custom UI in minutes, reducing edit friction for YAML-driven sites.
Validate and Preview News.yaml Structure
Datasette.io's news section uses a simple YAML array of entries, each with a date (YYYY-MM-DD) and body (multi-line Markdown string). Example:
- date: 2026-04-15
body: |-
[Datasette 1.0a27](https://docs.datasette.io/en/latest/changelog.html#a27-2026-04-15) changes how CSRF protection works...
The tool loads the live news.yaml (115 entries), renders a styled preview mimicking the site (date headings, linked releases, code snippets), flags errors like invalid dates via red badges, and checks markdown syntax, YAML formatting, and links in real-time. Fix issues in the dark-themed editor pane for immediate feedback.
Deploy for Repeated Use
Host the Claude-generated artifact as a standalone tool at datasette.io/tools/news-preview. It pulls the current GitHub file on load, enabling team edits without local setup. Trade-off: Relies on Claude Artifacts for rendering but delivers production-ready validation, cutting error-prone manual checks.