Workspace · Add Project
Import an MDX File
Drop a .mdx file — frontmatter is validated, sections
are parsed, and the project saves directly to the database.
No fixed section anchors: every <section id="...">
block becomes a sidebar link automatically.
!
Supabase not configured.
Copy
.env.example to .env, fill
PUBLIC_SUPABASE_URL + PUBLIC_SUPABASE_ANON_KEY,
then restart the dev server. See docs/SUPABASE.md.
Drag & Drop
Import MDX → Save
Drop a .md or .mdx file with frontmatter
+ one or more <section id="..."> blocks. Parsing runs
client-side; once validation passes, click
Save to database.
Drop your
.mdx file hereor click to browse
i
How it works: the parser pulls every
<section id="X">...</section> block from the MDX
body. Each becomes a row in the project’s
sections JSONB column. The detail page builds its
sidebar from whatever ids you used — no fixed schema.
AI-assisted
Prompt for LLM
Paste this into Claude / ChatGPT / Gemini with your app description. Model returns an MDX file you can drop above.
############################################################
# RULE 0 — DELIVERY FORMAT (HIGHEST PRIORITY, READ FIRST)
############################################################
This task is NOT a chat reply. You MUST deliver the output as a
downloadable .mdx file named "<slug>.mdx" (where <slug> equals the
frontmatter slug). Pick the FIRST capability your environment supports:
1) Claude.ai (this app):
Create an Artifact with:
- type = "text/markdown"
- identifier = "<slug>-mdx"
- title = "<slug>.mdx"
Put the entire MDX file inside the Artifact. NOTHING ELSE.
2) ChatGPT / GPT (Canvas, textdoc):
Open a Canvas / text document named "<slug>.mdx" and place the
entire MDX file content inside it.
3) Gemini (Canvas):
Open a Canvas document named "<slug>.mdx" and place the entire
MDX file content inside it.
4) Fallback (no artifact / canvas capability):
Reply with EXACTLY ONE fenced ```mdx ... ``` block and nothing
else. No greeting, no explanation, no closing remark.
FAILURE MODES — DO NOT DO ANY OF THESE:
✗ Do NOT preface with "Here is the file" / "Sure" / "Below is".
✗ Do NOT append commentary after the file.
✗ Do NOT split the file across multiple messages or code blocks.
✗ Do NOT use plain inline text — must be Artifact / Canvas / fenced block.
✗ Do NOT use a generic filename like "project.mdx" — use the slug.
The Artifact / Canvas / fenced block MUST start with "---" (frontmatter
open) and end with the closing of the last <section>. The file MUST be
ready to drop into a content folder unmodified.
############################################################
You are documenting an Android app for the Grow Solutions Docs Hub.
Match the structure of the reference project "Color Message" EXACTLY.
############################################################
============================================================
# FRONTMATTER (YAML between two "---" lines, in this order):
============================================================
name: "App Name"
slug: "lowercase-hyphen"
iconText: "AB" # 1-4 chars
iconGradient: ["#hex1", "#hex2"]
pkg: "com.example.app"
platform: "Android"
minSdk: 24
version: "v0.1.0"
owner: "Grow Solutions"
status: "active" # active | wip | archived
tagline: "One sentence subhead — what this doc covers."
description: "One short blurb for the dashboard card."
tags: ["Android", "Kotlin", "v0.1.0", "minSdk 24"]
badges: ["Runtime Permissions", "Onboarding", "Paywall"]
updated: 2026-05-20
order: 0
============================================================
# BODY STRUCTURE — 7 sections in this exact order, matching color-message:
============================================================
[0] INTRO — <section> (NO id attribute)
Contains:
<div class="section-card">
<div class="section-header">
<div>
<div class="eyebrow">Purpose</div>
<h2>Document Scope</h2>
<p class="section-description">2-3 sentences describing what this doc covers + key constraints.</p>
</div>
</div>
<div class="grid two">
<div class="mini-card"><h4>For Developers</h4><p>...</p></div>
<div class="mini-card"><h4>For Product Teams</h4><p>...</p></div>
</div>
<div class="callout danger"> or <div class="callout warning"> <!-- if relevant policy lock / banned APIs -->
<div class="icon">!</div>
<div><strong>Policy lock:</strong> ...</div>
</div>
</div>
[1] PERMISSIONS — <section id="permissions">
eyebrow: "Section 01" ; h2: "Permissions Declared in Manifest"
Body: <div class="table-wrap"><table> with thead columns:
Permission | Type | Runtime? | Purpose / Usage | When To Ask | User-Facing Reason
Use <span class="pill manifest">, <span class="pill runtime">Yes</span>,
<span class="pill optional">, <span class="pill special"> per row.
Wrap permission name in <code>FOO_BAR</code>.
End with 1-2 <div class="callout warning"> or <div class="callout danger"> for policy locks.
[2] RUNTIME — <section id="runtime">
eyebrow: "Section 02" ; h2: "Runtime Permission Strategy"
Body:
<div class="flow-grid"> with 3-4 <div class="flow-step">
<div class="flow-label">STEP N</div>
<div class="flow-title">Title</div>
<p>...</p>
</div>
<h3>Permission Outcomes</h3>
<div class="grid two"> with 4 <div class="mini-card"> — Granted / Denied once / Permanently denied / Optional
<h3>Decision Logic</h3>
<div class="logic-box">pseudo-code</div>
[3] ONBOARDING — <section id="onboarding">
eyebrow: "Section 03" ; h2: "Complete Onboarding Flow"
Body:
<div class="timeline"> with N <div class="timeline-item">
<div class="timeline-number">N</div>
<div class="timeline-content">
<h4>Screen Name</h4>
<p>...</p>
</div>
</div>
<h3>Onboarding Scenarios</h3>
<div class="table-wrap"><table> columns: Scenario | Condition | App Behavior | Next Screen
<h3>Saved Preference Keys</h3>
<div class="logic-box">keys</div>
[4] HOME — <section id="home">
eyebrow: "Section 04" ; h2: "Home Screen Logic"
Body:
<h3>Home Entry Decision</h3>
<div class="logic-box">pseudo-code</div>
<h3>Home Screen States</h3>
<div class="status-list"> with 6-9 <div class="status-row">
<div class="status-name">State name</div>
<div>Description</div>
</div>
<h3>Navigation From Home</h3>
<div class="grid three"> of <div class="mini-card">
[5] FEATURES — <section id="features">
eyebrow: "Section 05" ; h2: "Features"
Body: <div class="grid"> with 10-17 <article class="feature-card">
<div class="feature-head">
<h3>Feature Name</h3>
<p class="section-description">One-line summary.</p>
<a class="pill">Tag</a>
</div>
<div class="feature-body">
<div class="feature-detail-grid">
<div class="detail"><div class="detail-title">Purpose</div><p>...</p></div>
<div class="detail"><div class="detail-title">User Flow</div><p>...</p></div>
<div class="detail"><div class="detail-title">Permissions</div><p>...</p></div>
<div class="detail"><div class="detail-title">Behavior</div><p>...</p></div>
<div class="detail"><div class="detail-title">Edge Cases</div><p>...</p></div>
<div class="detail"><div class="detail-title">Error Handling</div><p>...</p></div>
</div>
</div>
</article>
[6] EDGE CASES — <section id="edge-cases">
eyebrow: "Section 06" ; h2: "Global Edge Cases"
Body: <div class="table-wrap"><table> columns: Edge Case | Expected Handling | User Message
============================================================
# WRITING RULES
============================================================
- Concise, technical, builder tone.
- Wrap identifiers in <code>...</code> (permissions, classes, methods, package ids).
- Use — for em dash, → for arrow, & inside attributes.
- DO NOT add JSX imports, MDX components, or <Fragment>. Static HTML only inside MDX body.
- DO NOT add markdown headings (#, ##) outside section-card. Use <h2>, <h3>, <h4>.
- Eyebrow numbering MUST be "Section 01", "Section 02", ... "Section 06".
- Section IDs MUST be exactly: permissions / runtime / onboarding / home / features / edge-cases.
- Multi-line code MUST use {\`...\`} JSX expression to wrap backticks.
App description:
<<<
PASTE 1-2 paragraphs describing the app, audience, key features, key permissions,
target SDK, package id, owner, current version, status.
>>>
############################################################
# FINAL REMINDER — DELIVERY
############################################################
Re-read RULE 0. Your response MUST be an Artifact (Claude), a Canvas
(ChatGPT/Gemini), or a single fenced ```mdx block (fallback only).
The file name MUST be "<slug>.mdx" where <slug> is the frontmatter slug.
NO chat text. NO preamble. NO summary.
Begin now. First character of the file is "-" (the opening "---").