Softr Vibe Coding

Generate custom Softr Vibe Coding blocks as complete React components (TSX/JSX). Use this skill whenever the user mentions Softr, Vibe Coding, Softr blocks, or wants to build a custom UI component for a Softr app. Also trigger when the user asks to create cards, lists, forms, dashboards, charts, detail pages, or any interactive block intended for Softr — even if they don't say "Vibe Coding" explicitly. If the user mentions Softr in the context of building a custom UI component, creating a JSX block, or vibe coding, use this skill. Do NOT use for standalone brand-token extraction with no Softr

11 stars 5 forksSoftware Development

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add leo-softr/Softr-Vibe-Coding-Block-Claude-Skill --skill softr-vibe-coding

Manual install

git clone --depth 1 https://github.com/leo-softr/Softr-Vibe-Coding-Block-Claude-Skill.git /tmp/Softr-Vibe-Coding-Block-Claude-Skill
mkdir -p ~/.claude/skills
cp -r /tmp/Softr-Vibe-Coding-Block-Claude-Skill/. ~/.claude/skills/softr-vibe-coding

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Softr Vibe Coding Block Generator

You generate complete, production-ready Softr Vibe Coding blocks as TypeScript React files. A Vibe Coding block is a single file with a default-exported React component, compiled by Softr's server and run in the browser inside a Softr app. The current platform compiles TypeScript with modern syntax — optional chaining (`?.`), nullish coalescing (`??`), arrow functions, `const`, generics — plus shadcn/ui from `@/components/ui/*`, lucide-react, sonner, and date-fns (verified live against the builder MCP's `vibe_coding_block_get_docs` and a 15-block production deployment, 2026-08-25).

> **Scope note — blocks vs. native chrome.** A block is page *content*, rendered inside a shadow DOM. Softr's global **header / top bar / sidebar / phone tab bar / nav / dropdown menus** are native chrome (configured in Studio, rendered in the main document) — you **cannot** build or replace them as a block. To restyle them, or to paint them into one app frame around the content, add CSS to Settings → Custom Code → Code inside header. See [references/native-chrome-styling.md](references/native-chrome-styling.md) (app frame: [App frame (navigation layout)](references/native-chrome-styling.md#app-frame-navigation-layout); the blocks that sit inside it: [App pages beside Softr navigation](#app-pages-beside-softr-navigation)). One nuance: on a landing page where the native header is **hidden**, a hero block CAN render its own fixed in-block header (`position: fixed

Read the full skill on GitHub

Details

Skill name: softr-vibe-coding
Repository: leo-softr/Softr-Vibe-Coding-Block-Claude-Skill
License: MIT
Repo updated: 24 October 2026

FAQ

What does the Softr Vibe Coding skill do?

How do I install the Softr Vibe Coding skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add leo-softr/Softr-Vibe-Coding-Block-Claude-Skill --skill softr-vibe-coding. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Softr Vibe Coding popular?

It lives in leo-softr/Softr-Vibe-Coding-Block-Claude-Skill, which has 11 GitHub stars and 5 forks.

Related skills

Clojure Skills

chaploud/clojure-skills

Clojure/ClojureScript/ClojureDart development skill. Activates when working with .clj, .cljs, .cljc, .cljd, .edn, .bb, .lpy files. Provides structural search and editing of S-expressions, nREPL evaluation, runtime queries via cider-nrepl, and static navigation via clojure-lsp.

Software Development

Pyxel

kitao/pyxel-skill

Build, debug, and verify games made with Pyxel, the retro game engine for Python. Use whenever a task creates, changes, tests, or reviews a Pyxel game, or asks for a retro Python game that should use Pyxel. Do not use for other engines or general Python work.

Software Development

Codex Sites Convex

convex/Codex-Sites-Convex-Backend-Skill

Build, extend, validate, and publish a ChatGPT Sites application whose durable database and backend functions run on Convex. Use when a user invokes $codex-sites-convex, selects this skill from the skill picker, asks for a ChatGPT Site backed by Convex, or asks to add Convex data, realtime queries, mutations, authentication, files, schedules, or actions to an existing ChatGPT Sites project.

Software Development

Omnigraffle

openanvil/omnigraffle-generator

Generate native OmniGraffle .graffle files programmatically. Use this skill whenever the user asks to create, build, or generate an OmniGraffle diagram, network diagram, architecture diagram, flowchart, or any visual diagram that should be saved as a .graffle file. Also trigger when the user mentions "OmniGraffle", ".graffle", "graffle file", or asks for diagrams specifically for macOS/iOS diagramming. This skill generates zipped binary plist packages that open natively in OmniGraffle 7+ without any conversion or import steps. Supports: rectangles with colored fills, text labels (RTF), named l

Software Development

Enterprise Architect

rafalr100/enterprise-architect-skill

Operate as a world-class Enterprise Architect (FAANG / top-tier consulting calibre) grounded in TOGAF, Zachman, and modern EA practice. Opens with discovery — asks the clarifying questions that materially change the architecture before producing any deliverable. Activates when the user asks for enterprise-architecture work — target architectures, reference architectures, architecture patterns, standards, principles, capability maps, technology strategy, roadmaps, trade-off analysis, architecture decision records, governance, or audience-tiered architecture presentations (C-level/board, solutio

Software DevelopmentIn 1 list

Lamarck

newdee/lamarck-skill

Lamarckian skill evolution - monitors every real skill invocation, drives governed evolution of observed skills, and evolves itself by the same rules while running. Harness-agnostic (adapters for Claude Code, Codex, Cursor, pi share one ledger); in the reference adapter a PostToolUse hook logs each invocation (stamped with the skill's genome hash for per-version regression windows) and a Stop hook queues a light evaluation loop that runs backstage in a headless CLI (or inline), never reloading this file. Per-skill dynamic rubrics (git-versioned) define what "good" means per skill; a trust ladd

Software Development

Browse the most popular Claude skills, all software development skills, or write your own with the skills generator.