Formsmd Builder

Name: Formsmd Builder
Author: eng0ai

eng0ai/eng0-template-skills

46 installs
15 repo stars
Updated June 16, 2026
eng0ai/eng0-template-skills

Helps with ai & agent building tasks.

About

formsmd-builder is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.

formsmd-builder
AI & Agent Building
AI-coding skill

Formsmd Builder by the numbers

46 all-time installs (skills.sh)
Ranked #7,619 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Jul 30, 2026 (Skillselion catalog sync)

npx skills add https://github.com/eng0ai/eng0-template-skills --skill formsmd-builder

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/eng0ai/eng0-template-skills/formsmd-builder.svg)](https://skillselion.com/skills/eng0ai/eng0-template-skills/formsmd-builder)

Installs	46
repo stars	★ 15
Last updated	June 16, 2026
Repository	eng0ai/eng0-template-skills ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

Forms.md Builder

Build production-ready, Typeform-style forms using the Forms.md library.

Quick Start

1. Create an HTML file with Forms.md boilerplate 2. Write form content in the DSL (Markdown-like syntax) 3. Add Typeform-style CSS theme for polish

Boilerplate Template

<!DOCTYPE html>
<html lang="en" class="fmd-root" data-fmd-color-scheme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{TITLE}}</title>
  <link rel="stylesheet" href="https://unpkg.com/formsmd/dist/css/formsmd.min.css">
  <style>
    /* Typeform-style overrides - see references/typeform-theme.md */
    .fmd-root {
      --fmd-form-question-font-size: 28px;
      --fmd-slide-transition-duration: 400ms;
      --fmd-border-radius: 24px;
      --fmd-spacer: 24px;
      --fmd-main-container-width: 640px;
    }
    .fmd-root .fmd-form-control {
      border: none;
      border-bottom: 2px solid rgba(0,0,0,0.2);
      border-radius: 0;
      background: transparent;
      font-size: 1.25em;
      padding: 12px 0;
    }
    .fmd-root .fmd-form-control:focus {
      border-bottom-color: rgb(var(--fmd-accent-rgb));
      box-shadow: none;
    }
    .fmd-root .fmd-btn {
      padding: 16px 32px;
      font-size: 18px;
      font-weight: 600;
    }
    .fmd-root .fmd-form-check-label {
      padding: 16px 20px;
      border: 2px solid rgba(0,0,0,0.1);
      border-radius: 12px;
      margin-bottom: 12px;
    }
    .fmd-root .fmd-form-check-input:checked + .fmd-form-check-label {
      border-color: rgb(var(--fmd-accent-rgb));
      background: rgba(var(--fmd-accent-rgb), 0.08);
    }
  </style>
</head>
<body class="fmd-body">
  <script src="https://unpkg.com/formsmd/dist/js/formsmd.bundle.min.js"></script>
  <script>
    const template = `
{{FORM_CONTENT}}
`;
    const form = new Formsmd(template, document, {
      isFullPage: true
    });
    form.init();
  </script>
</body>
</html>

Form Content DSL

Settings block (top):

#! title = Survey Title
#! post-url = /api/submit
#! accent = #6366f1
#! rounded = pill
#! button-alignment = center

Slides separated by ---:

# Welcome!
Ready to get started?

---
-> start -> Let's go!

name* = TextInput(
    | question = What's your name?
    | placeholder = Enter your name
)

---

role* = ChoiceInput(
    | question = What's your role?
    | choices = Developer, Designer, Manager, Other
)

---
-> role == "Other"

roleOther* = TextInput(
    | question = Tell us about your role
)

---

email* = EmailInput(
    | question = Your email?
    | description = We'll send you the results
)

---
-> end

Key Syntax

Element	Syntax
Required field	`name*` (asterisk)
Slide separator	`---`
Logic jump	`-> condition`
Start slide	`-> start`
End slide	`-> end`
Progress	`\

References

Full DSL syntax: See references/syntax.md
Typeform theme CSS: See references/typeform-theme.md

Common Patterns

Conditional slide (show based on previous answer)

---
-> previousField == "specific_value"

Conditional field within slide

::: [{$ triggerField $}]
{% if triggerField == "Other" %}
otherField = TextInput(| question = Please specify)
{% endif %}
:::

Rating + Follow-up

rating* = RatingInput(
    | question = How was your experience?
    | outof = 5
)

---
-> rating <= 2

feedback = TextInput(
    | question = What could we improve?
    | multiline
)

Output

Generate a single .html file containing:

Forms.md CSS (CDN or inline)
Forms.md JS (CDN or inline)
Typeform-style theme CSS
Form template in the DSL

The form works client-side only - just open the HTML file or deploy to any static host.

Collecting Form Submissions

To collect and store form responses, set up the backend using the Forms API.

Complete Workflow

1. Create form backend - Call the Forms API to create storage 2. Build the HTML form - Use the submitUrl in the form's post-url 3. Deploy the form - Host the HTML file anywhere 4. View results - Use the resultsUrl to see submissions

Step 1: Create Form Backend

POST https://api.rebyte.ai/api/forms/create
Content-Type: application/json

{
  "taskId": "current-task-attempt-id",
  "title": "My Survey",
  "fields": ["name", "email", "rating", "feedback"]
}

Response:

{
  "formId": "abc123",
  "taskId": "current-task-attempt-id",
  "submitUrl": "https://api.rebyte.ai/api/forms/submit/TASK_ID/FORM_ID",
  "resultsUrl": "https://api.rebyte.ai/api/forms/results/TASK_ID/FORM_ID"
}

Step 2: Configure Form HTML

Use the submitUrl from the response in the form's settings:

#! post-url = https://api.rebyte.ai/api/forms/submit/TASK_ID/FORM_ID

Step 3: Provide URLs to User

After creating and deploying the form, give the user:

Distribution URL: Where the HTML form is hosted (for respondents)
Results URL: The resultsUrl from Step 1 (for viewing submissions)

Viewing Results

JSON: GET https://api.rebyte.ai/api/forms/results/TASK_ID/FORM_ID
CSV: GET https://api.rebyte.ai/api/forms/results/TASK_ID/FORM_ID/csv

For full API documentation, see relay/docs/data-proxy/forms-api.md.

Forms.md DSL Syntax Reference

Settings (Top of File)

#! title = My Survey
#! post-url = /api/submit
#! accent = #6366f1
#! color-scheme = light
#! localization = en
#! page = form-slides

Setting	Values	Description
`title`	string	Page title
`post-url`	URL	Form submission endpoint
`accent`	hex/rgb/name	Primary color
`accent-foreground`	hex/rgb/name	Text on accent background
`background-color`	hex/rgb/name	Page background
`color`	hex/rgb/name	Text color
`color-scheme`	`light`/`dark`	Default theme
`localization`	`en`/`es`/`fr`/`de`/`ja`/`zh`/`ar`/`bn`/`pt`	Language
`page`	`form-slides`/`slides`/`single`	Layout mode
`rounded`	`none`/`pill`	Button/input rounding
`font-family`	CSS font stack	Custom font
`font-import-url`	URL	Google Fonts import

Slide Controls

---                          # New slide separator
-> condition                 # Logic jump (show if true)
-> start                     # Start slide
-> start -> Let's begin!     # Start slide with custom button
-> end                       # End slide
-> end -> https://example.com  # End slide with redirect
|> 50%                       # Progress indicator
|> 2/5                       # Progress as fraction
=| center                    # Button alignment: start/center/end/stretch
<< disable                   # Disable back button
>> post                      # Submit data at this slide

Form Fields

Syntax Pattern

fieldName* = FieldType(
    | question = Your question here
    | description = Optional help text
    | placeholder = Placeholder text
    | fieldSize = sm
    | labelStyle = classic
)

* after name = required field. | is parameter delimiter.

Field Types

TextInput

name* = TextInput(
    | question = What's your name?
    | placeholder = John Doe
    | multiline
    | maxlength = 100
    | pattern = [A-Za-z]+
    | value = Default
)

EmailInput

email* = EmailInput(
    | question = Your email?
    | placeholder = you@example.com
)

NumberInput

age = NumberInput(
    | question = Your age?
    | min = 18
    | max = 100
    | step = 1
    | unit = $
    | unitEnd = USD
)

ChoiceInput (radio/checkbox)

role* = ChoiceInput(
    | question = Your role?
    | choices = Developer, Designer, Manager, Other
    | multiple
    | horizontal
    | checked = Developer
)

SelectBox

country = SelectBox(
    | question = Country?
    | placeholder = Select one
    | options = USA, Canada, UK, Germany
    | selected = USA
)

RatingInput

rating* = RatingInput(
    | question = How would you rate us?
    | outof = 5
    | icon = star
)

OpinionScale

nps = OpinionScale(
    | question = How likely to recommend?
    | startAt = 0
    | outof = 10
    | labelStart = Not likely
    | labelEnd = Very likely
)

DateInput / TimeInput / DatetimeInput

birthday = DateInput(
    | question = Birthday?
    | min = 1900-01-01
    | max = 2024-12-31
)

FileInput

resume = FileInput(
    | question = Upload resume
    | sizeLimit = 10
    | imageOnly
)

TelInput

phone = TelInput(
    | question = Phone number?
    | country = US
    | availableCountries = US, CA, UK
)

PictureChoice

pet = PictureChoice(
    | question = Pick your favorite
    | choices = Dog && https://img.com/dog.jpg, Cat && https://img.com/cat.jpg
    | multiple
    | supersize
    | hideLabels
)

Conditional Logic

Logic Jumps (Skip slides)

---
-> age >= 18
# Adult Questions
...

---
-> age < 18
# Minor Questions
...

Conditional Display (Within slide)

::: [{$ fieldName $}]
{% if fieldName == "Other" %}
otherField = TextInput(| question = Please specify)
{% endif %}
:::

Content Elements

Standard Markdown works: # Heading, **bold**, *italic*, [link](url), ![image](url), lists, code blocks.

Custom Div with Data Binding

::: [.my-class {$ name email $}]
Hello {{ name }}, we'll contact you at {{ email }}.
:::

Typeform-Style Theme

CSS Theme Override

Add this CSS after the Forms.md stylesheet to achieve a Typeform-like appearance:

/* Typeform-Style Theme for Forms.md */

.fmd-root {
  /* Typography - Large, bold questions */
  --fmd-form-question-font-size: 28px;
  --fmd-form-question-font-size-xs: 22px;
  --fmd-font-size-base: 18px;
  --fmd-heading-font-weight: 500;

  /* Smoother, slower transitions */
  --fmd-slide-transition-duration: 400ms;

  /* Pill-shaped buttons */
  --fmd-border-radius: 24px;
  --fmd-border-radius-lg: 32px;
  --fmd-action-border-radius: 24px;

  /* Generous spacing */
  --fmd-spacer: 24px;
  --fmd-content-padding-x: 48px;
  --fmd-content-padding-top: 64px;
  --fmd-form-field-padding-y: 16px;

  /* Narrower content for focus */
  --fmd-main-container-width: 640px;
}

/* Minimal, underline-style inputs */
.fmd-root .fmd-form-control {
  border: none;
  border-bottom: 2px solid rgba(var(--fmd-body-color-rgb), 0.3);
  border-radius: 0;
  background: transparent;
  font-size: 1.25em;
  padding: 12px 0;
  transition: border-color 0.2s ease;
}

.fmd-root .fmd-form-control:focus {
  border-bottom-color: rgb(var(--fmd-accent-rgb));
  box-shadow: none;
  outline: none;
}

/* Larger, more prominent buttons */
.fmd-root .fmd-btn {
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 600;
  min-width: 140px;
}

/* Choice inputs - card style */
.fmd-root .fmd-form-check-label {
  padding: 16px 20px;
  border: 2px solid rgba(var(--fmd-body-color-rgb), 0.15);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.fmd-root .fmd-form-check-input:checked + .fmd-form-check-label {
  border-color: rgb(var(--fmd-accent-rgb));
  background: rgba(var(--fmd-accent-rgb), 0.08);
}

.fmd-root .fmd-form-check-label:hover {
  border-color: rgba(var(--fmd-accent-rgb), 0.5);
}

/* Hide default radio/checkbox */
.fmd-root .fmd-form-check-input {
  position: absolute;
  opacity: 0;
}

/* Progress bar - thin and elegant */
.fmd-root .fmd-page-progress-container {
  height: 3px;
}

/* Subtle question descriptions */
.fmd-root .fmd-form-description {
  font-size: 16px;
  opacity: 0.7;
  margin-top: 8px;
}

/* Center everything vertically */
.fmd-root .fmd-slide {
  min-height: 70vh;
  display: flex;
  align-items: center;
}

/* Keyboard hint styling */
.fmd-root .fmd-btn::after {
  content: " ↵";
  opacity: 0.5;
  font-size: 0.8em;
}

Recommended Settings

Use these #! settings for the most Typeform-like experience:

#! rounded = pill
#! button-alignment = center
#! page-progress = show
#! slide-controls = hide
#! color-scheme = light
#! font-import-url = url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap')
#! font-family = 'Inter', system-ui, sans-serif

Color Schemes

Light (Default)

#! background-color = #ffffff
#! color = #191919
#! accent = #0066ff
#! accent-foreground = #ffffff

Dark

#! color-scheme = dark
#! background-color = #1a1a2e
#! color = #eaeaea
#! accent = #6c63ff
#! accent-foreground = #ffffff

Vibrant

#! background-color = #6366f1
#! color = #ffffff
#! accent = #ffffff
#! accent-foreground = #6366f1

Animation Enhancements (Optional)

For extra polish, add to the theme CSS:

/* Fade-in animation for slides */
.fmd-root .fmd-slide-active {
  animation: typeform-slide-in 0.5s ease-out;
}

@keyframes typeform-slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth focus transitions */
.fmd-root .fmd-form-field {
  transition: transform 0.3s ease;
}

.fmd-root .fmd-form-field:focus-within {
  transform: scale(1.01);
}