Skip to content

Sharpen Why section with research-backed positioning#193

Merged
adnaan merged 12 commits intomainfrom
claude/add-readme-demo-video-L7kjo
Mar 19, 2026
Merged

Sharpen Why section with research-backed positioning#193
adnaan merged 12 commits intomainfrom
claude/add-readme-demo-video-L7kjo

Conversation

@adnaan
Copy link
Contributor

@adnaan adnaan commented Mar 19, 2026

No description provided.

claude added 11 commits March 19, 2026 22:55
Addresses HN feedback about too much friction — adds a visual "show then
ask" demo at the top of the README. The animated SVG shows the core
workflow: write markdown with frontmatter, run tinkerdown serve, get a
live interactive app with data persistence.

https://claude.ai/code/session_01NhTvt3NdnN6vmUpwimuM81
Gives readers the motivation and value prop before jumping into
install instructions — addresses the core problem, what makes
Tinkerdown different, and who it's for.

https://claude.ai/code/session_01NhTvt3NdnN6vmUpwimuM81
Reworked from docs/archive research: adds progressive complexity tiers,
git-native/self-hosted angle, LLM determinism advantage over React,
throwaway tools use case, and "build a UI for your scripts" pitch.

https://claude.ai/code/session_01NhTvt3NdnN6vmUpwimuM81
Reframes the section around the core value prop: Tinkerdown is a markdown
format designed for LLMs to generate working UIs on the fly. Leads with
the AI angle, follows with single-file simplicity and progressive power.

https://claude.ai/code/session_01NhTvt3NdnN6vmUpwimuM81
Addresses key HN thread points: runtime vs MDX (compile-time),
freezeable/reusable views, Kubernetes dashboard use case, and
sharpens the on-the-fly UI pitch.

https://claude.ai/code/session_01NhTvt3NdnN6vmUpwimuM81
Rewrites all bullet points to avoid borrowed phrasing. Tightens
the language and uses more concrete, specific examples throughout.

https://claude.ai/code/session_01NhTvt3NdnN6vmUpwimuM81
The previous intro described the workflow but didn't explain why
markdown over React. Now directly addresses the maintenance and
dependency burden that LLM-generated React still carries.

https://claude.ai/code/session_01NhTvt3NdnN6vmUpwimuM81
Rewritten based on web research into vibe coding pain points, AI app
builder failures, and the disposable software trend. Leads with the
concrete problems of AI-generated React (context drift, dependency
hell, debugging someone else's code), then positions Tinkerdown's
declarative format as the fix: constrained enough for reliable AI
generation, small enough for humans to fully understand.

https://claude.ai/code/session_01NhTvt3NdnN6vmUpwimuM81
Copilot AI review requested due to automatic review settings March 19, 2026 23:21
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the project’s top-level documentation to better communicate Tinkerdown’s positioning (“Why Tinkerdown?”) and adds an animated demo asset to visually explain the markdown-to-app workflow.

Changes:

  • Add a new animated SVG demo asset under docs/assets/.
  • Embed the demo image near the top of the README.
  • Introduce a new “Why Tinkerdown?” section with expanded product positioning in the README.

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.

File Description
docs/assets/demo.svg Adds an animated demo SVG illustrating authoring markdown and seeing a live app UI.
README.md Embeds the demo SVG and adds a new “Why Tinkerdown?” positioning section.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@claude
Copy link

claude bot commented Mar 19, 2026

PR Review

This is a clean documentation PR. The "Why Tinkerdown?" copy is sharp and well-targeted. A few things to note:

Bug: Invalid SVG attribute on circle element

In docs/assets/demo.svg, the live-update indicator circle has a stray y="260" attribute (around line 215):

The current code is:

<circle cx="546" y="260" cy="260" r="5" fill="#28a745">

y is not a valid attribute for <circle> elements (only cx, cy, r are valid). Most renderers silently ignore it, but it is invalid SVG and could cause issues with strict parsers or validators. Should be:

<circle cx="546" cy="260" r="5" fill="#28a745">

Minor: SMIL begin vs CSS animation-delay inconsistency

The file mixes CSS animations (via animation-delay) for most elements and SMIL begin= on two <animate> elements inside browser-step4. The SMIL begin="7s" is a hardcoded absolute time independent of the CSS-driven reveal of its parent group (.browser-step4 fades in at 6.5s). Currently fine since 7s > 6.5s, but fragile if animation timings shift later.

Minor: Clip paths do not match window corner radius

The clip rects use rx="0" while the window frames use rx="10". Visually harmless since background rects cover the corners, but worth aligning for correctness.

Content feedback

The positioning against AI app builders and context-window drift is well-framed for the target audience. The six bullet points cover the key differentiators concisely.

One small suggestion: the image alt text could be more descriptive for screen readers:

alt="Tinkerdown demo: write a markdown file with YAML data sources, get an interactive app in the browser"

Summary: The y="260" bug on the circle element is worth fixing before merge. Everything else is minor polish.

- Remove invalid `y` attribute from circle element (only cx/cy/r valid)
- Match clip path rx="10" to window frame border radius
- Add timing comment to SMIL animation for maintainability
- Improve alt text with descriptive content for accessibility

https://claude.ai/code/session_01NhTvt3NdnN6vmUpwimuM81
@adnaan adnaan merged commit 9d95a4b into main Mar 19, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants