appforms-bootstrap

Name: appforms-bootstrap
Availability: InStock
Author: astrolabe-apps

Generate TypeScript schemas from C# types for AppForms.

1|5|Updated Aug 6, 2023

Search Tags:#TypeScript #C##bootstrap #schema-generation #visual-editor #AppForms

Ready to run

npx skills add https://github.com/astrolabe-apps/astrolabe-common --skill appforms-bootstrap

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: appforms-bootstrap
Source: https://github.com/astrolabe-apps/astrolabe-common/tree/main/skills/appforms-bootstrap
Command: npx skills add https://github.com/astrolabe-apps/astrolabe-common --skill appforms-bootstrap

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guide for bootstrapping AppForms in a C#/TypeScript project with Astrolabe.Schemas code generation, @react-typed-forms/schemas for rendering, and the visual form editor.

Core Features & Use Cases

Type-safe forms: C# types generate TypeScript schemas and form definitions.
Visual form designer: Drag-and-drop editor for building layouts.
Runtime rendering: Forms render from JSON control definitions with Tailwind styling.

Quick Start

Install NuGet packages for Astrolabe.Schemas and npm packages for React typed forms.
Choose a project structure (Rush monorepo with shared library or simple src folder) as illustrated.
Run npm run gencode to generate schemas and forms; call /api/forms/Schemas and /api/forms/Forms to produce client artifacts.
Use the editor endpoints to create and save form JSON files under ClientApp/src/formDefs/.

Frequently Asked Questions about appforms-bootstrap

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate TypeScript schemas from C# types for form definitions?▼

Generating TypeScript schemas from C# types uses Astrolabe.Schemas code generation to produce type-safe form definitions. Running npm run gencode outputs client artifacts by calling /api/forms/Schemas and /api/forms/Forms endpoints.

What is a visual form designer and how does it work with React?▼

A visual form designer provides a drag-and-drop editor for building form layouts. It integrates with @react-typed-forms libraries to save JSON control definitions, which a runtime renderer uses to render forms with Tailwind styling.

Can I use a drag-and-drop form editor in a C# and TypeScript monorepo?▼

Using a drag-and-drop form editor in a C# and TypeScript monorepo is supported by choosing a Rush monorepo with a shared library or a simple src folder structure, hosting generated client artifacts under ClientApp/src/formDefs/.

What dependencies do I need to render forms from JSON definitions with Tailwind?▼

Rendering forms from JSON definitions with Tailwind requires Astrolabe.Schemas NuGet packages for server-side code generation and @react-typed-forms/schemas npm packages for client-side runtime rendering.

How do I set up end-to-end type-safe forms from server-side C# to client-side schemas?▼

Setting up end-to-end type-safe forms involves installing Astrolabe.Schemas NuGet packages, running npm run gencode to generate TypeScript schemas from C# types, and using editor endpoints to save form JSON files under ClientApp/src/formDefs/.