Softr Vibe Coding Block — Claude Skill

Turn Claude into a Softr Vibe Coding expert — generate production-ready React blocks (TSX/JSX) with polished UI, correct data fetching, and all 14 Softr data sources supported out of the box.

UNOFFICIAL — This is a community-maintained Claude skill. It is not affiliated with, endorsed by, or officially supported by Softr. Use as-is.

---

TL;DR

This Claude skill teaches Claude Code how to generate complete, polished Softr Vibe Coding blocks as .tsx / .jsx files (the current platform compiles TypeScript with modern syntax — verified live August 2026). It includes:

• Complete Vibe Coding API reference — useRecords, q.select(), mutations, uploads, metrics, charts, editable settings, useProxyFetch for REST APIs
• Editable settings deep-dive — full hook catalog including verified-undocumented capabilities (useLongTextSetting, the navigation array-schema type), settings-first design doctrine so clients edit copy/images/links in Content → Settings without re-prompting
• Static marketing blocks — heroes, landing headers, pricing tables, footers: editorial baseline, full-bleed layouts, full-viewport sizing, block-owned fixed headers with scroll-condensing treatment
• Brand pipeline via dembrandt — no DESIGN.md in the project? The skill generates one on the spot with dembrandt (real-browser design-token extraction over MCP: colors, typography, spacing, components from any site you have permission to analyze), writes it to the project root, and builds every block on those tokens — or keeps the default Softr style if you skip it
• All 14 Softr data sources — Airtable, Softr Database, Google Sheets, HubSpot, Notion, Coda, monday.com, SmartSuite, ClickUp, Xano, Supabase, BigQuery, SQL Database, and REST API — each with field mapping, rate limits, and gotchas
• Helper blocks & cross-block patterns — Invisible helper blocks for multi-table access via window globals + CustomEvent, useWindowData hook, breadcrumb navigation, saved views architecture
• Advanced integrations — Shadow DOM CSS isolation for third-party libraries (Leaflet, Mapbox, TinyMCE, Quill, FullCalendar)
• Native shell styling — re-skin Softr’s native top bar, footer, nav, dropdowns, and page background via global Custom Code CSS (stable selectors vs. hashed classes, floating “island” header/footer, the dropdown grid fix, the multi-layer page-background stacking, restyle-vs-replace), plus the app frame for apps with Softr’s sidebar navigation: the bars’ colour as one frame around a paper content sheet, with blocks full-bleed, transparent and laid out by their own width — distinct from blocks