Softr Vibe Coding Block Claude Skill

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
• 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) — distinct from blocks
• UI/UX design guidelines — 26 sections covering visual hierarchy, color, typography, spacing, motion