skills.rest
astrolabe-apps
astrolabe-appsOFFICIAL
Explore all skills by this author →
GitHub

appforms-bootstrap

Generate TypeScript schemas from C# types for AppForms.

1|5|Updated Aug 6, 2023
Search Tags:#TypeScript#C##bootstrap#schema-generation#visual-editor#AppForms
One-click install
npx skills add https://github.com/astrolabe-apps/astrolabe-common --skill appforms-bootstrap
Or copy as Structured Prompt for Agent▼
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/.

Related Skills

Explore More Software Engineering Skills→
astrolabe-appsastrolabe-apps
1

react-typed-forms-schemas

Generate React forms from TypeScript interfaces or C# Astrolabe.Schemas.

Official
Intermediate
arborba100arborba100

backend

Create server-side API routes in Astro apps using TypeScript files.

Community
Intermediate
faw01faw01
18

react-email

Create and render HTML email templates with React components and Tailwind CSS.

Community
Intermediate
astrolabe-appsastrolabe-apps
1

astrolabe-schemas

A JWT-based authentication system for a React app.

Official
Intermediate