← ClaudeAtlas

synapse-applicationslisted

Build a new Synapse App as an OCI image and publish it to the Datamaker registry so the workspace can install it via the App Store. Use when the user asks to create/scaffold a Synapse App, sub-app, plugin, iframe app, or embedded dashboard, or mentions synapse-app.yaml, /plugins registry, apiVersion synapse.datamaker.io/v1, or the iframe bridge. Supports React, Vue, Next.js, Nuxt 3, Gradio, Streamlit, Static HTML, Django, FastAPI (priority in that order).
datamaker-kr/synapse-claude-marketplace · ★ 1 · Web & Frontend · score 55
Install: claude install-skill datamaker-kr/synapse-claude-marketplace
# Synapse Applications A Synapse App is a containerized HTTP app the host loads in an iframe. The platform discovers it by **pulling an OCI image** whose config carries a `io.synapse.app.manifest` label - the full `synapse-app.yaml` encoded as base64 YAML. There is no `sub-apps/` directory anymore. There is no compose-file rewrite. Apps live in the registry; the workspace pulls and runs them. Default to React (Vite+TS) for greenfield. Use Next.js when the source is already Next.js or SSR/next-intl/app-router handlers are required. Priority order: React (Vite+TS), Vue 3 (Vite+TS), Next.js, Nuxt 3, Gradio, Streamlit, Static HTML, Django, FastAPI. Ask once if ambiguous. ## Source layout App source can live anywhere - a separate repo, `~/projects/<slug>/`, or a temp dir. The host's monorepo no longer holds individual app source. Minimum tree: ``` <slug>/ synapse-app.yaml # manifest, single source of truth Dockerfile <framework source> ``` Slug: `^[a-z][a-z0-9-]{1,62}$`. The slug is the app's identity inside the workspace; pick something stable. ## Workflow 1. Confirm framework (default React). 2. `mkdir <slug> && cd <slug>`. 3. Copy `templates/synapse-app.yaml.tmpl` -> `synapse-app.yaml`; fill slots. **Set `runtime.image: registry.local.datamaker.io/synapse_apps/<slug>:<version>`.** 4. Write Dockerfile + entry files from `references/<framework>.md`. 5. Inject `templates/bridge-snippet.html` into the app's HTML head. 6. Implement `/health` returning 200. 7. Build