Skip to content

mylokaye/form-studio

v1.2.0-alpha.1

Restyle an existing Dynamics 365 Customer Insights - Journeys form export while preserving its generated fields and submission contract.

GitHub

Form Studio plugin

Style Dynamics forms

A Codex skill for restyling HTML exported from Dynamics 365 Customer Insights - Journeys and returning the complete HTML to paste back into the same form.

Release candidate: 1.2.0-alpha.1 — locally checked. The regression fixtures, browser checks, and local package checks are not proof of acceptance or submission processing in a Dynamics tenant.

User workflow

  1. Create and configure your form in Dynamics, including fields, validation, consent, and CAPTCHA.
  2. Copy the complete HTML from its HTML editor and supply it to the skill with your desired appearance.
  3. The skill preserves the original and applies scoped CSS to its existing div-based form, then compares the result against your export and checks the rendered appearance.
  4. Receive the full styled HTML and paste it into the same Dynamics form. Keep your original as a backup.
  5. Save, run Check content, inspect the saved HTML and published result, and verify a real test submission.

The skill keeps its existing invocation name, $d365-customer-insights-forms. It now focuses on this styling workflow. New field definitions, Form Capture, embedding integrations, and changes to business logic are outside the default scope.

What is preserved

The supplied form owns its fields and behavior: generated IDs/classes, mapped and unmapped controls, target metadata, label associations, required/validation settings, choices/defaults, hidden values, consent, CAPTCHA, original stylesheets, and scripts. New styling uses scoped CSS and div containers. Table-based form layouts require re-exporting from Dynamics with its table-less layout enabled.

The source-comparison checker detects changed elements, attributes, copy, choices, scripts, original stylesheets, and order. It rejects duplicate attributes and flags common unscoped new CSS. Existing source issues are reported separately from styling regressions. Known native choice-group headings with intact option labels produce accessibility warnings; genuinely broken targets remain errors. Browser checks must still verify geometry, cascade, accessibility, and validation presentation.

Every output uses the shared Form Studio spacing preset: 8px between labels and controls, 24px between fields and desktop columns, 10px between choices, and 12px between consent blocks. It handles direct exported columns and the .innerSection wrappers Dynamics can add when saving. A requested design can override these form-scoped tokens.

Repository structure

SKILL.md                       Active workflow and constraints
agents/openai.yaml             Discovery/UI metadata
assets/                        Plugin imagery and reusable spacing CSS
references/
  html-contract.md             Preserve generated HTML and behavior
  styling.md                   Scoped CSS, fonts, mobile, accessibility
  validation-and-handoff.md    Comparison and Dynamics acceptance
  javascript.md                Optional, requested script investigation
scripts/
  validate_form.py             Native preflight and source comparison
  apply_style.py               Minimal CSS insertion and immutable backup
  check_render.mjs             Browser checks with scripts and network blocked
  build_plugin.py              Allowlisted plugin package builder
  build-site.mjs               Existing preview-site build
tests/test_validate_form.py    Structural/preservation regressions
examples/
  preview.html                 Separate local submission-safe harness
  restyle/original.html        Sanitized baseline fixture
  restyle/styled.html          Same contract with scoped styling
docs/background/               Former broad reference material
docs/archive/                  Historical examples and old demo

Only the four focused references are routed by the active skill. Background material and archival examples remain for maintainers; they are not instructions or deployment templates. The ZIP builder includes the runtime skill, its two Python helpers, the focused references, spacing CSS, and icons. It excludes examples, historical documents, build output, and hosting configuration.

Local verification

Install the locked browser dependency for repository checks with npm ci and npx playwright install chromium, then run npm run verify. That command runs the Python regressions, paired-fixture comparison, preview build, isolated Chromium checks, and package build. The package is saved under dist/plugin/ and is not uploaded or installed automatically. Python 3.10+, Node.js 20+, and the downloaded Chromium browser are needed for the full repository check. The installed skill's core helpers require Python 3.10+; browser verification requires an available browser tool.

For an individual native export, save its original HTML, create form-scoped style.css, then run python3 scripts/apply_style.py original.html style.css a-new-run-directory. This produces a byte-identical original backup, full styled HTML, and evidence hashes without overwriting a previous run. Run python3 scripts/validate_form.py a-new-run-directory/styled.html --mode native --original a-new-run-directory/original.html --json and node scripts/check_render.mjs a-new-run-directory/original.html a-new-run-directory/styled.html a-new-run-directory/render-report.json when using the repository. The browser check disables scripts and blocks outgoing requests before loading either document.

To view the synthetic example, start python3 -m http.server 8000 --bind 127.0.0.1 and open the local preview below.

Open the local preview after starting the server. The preview contains both synthetic examples in sandboxed frames and intercepts demo submissions in its parent page. The fixture HTML has no simulated-success or submission-interception script. Never put a user's private export in this public demo.

The paired fixtures cover mapped/unmapped text, email, phone, textarea, select, radio, multi-select, number, date, hidden values, and consent. They use synthetic IDs and consent configuration derived from inspected markup conventions; they are not current tenant exports or usable production templates. They intentionally omit operational CAPTCHA, which is reported as an existing source warning. The styled sample demonstrates mobile overrides for generated fixed inline widths and loads the project's Manrope font from Google, with system/generic fallbacks.

The preview build continues to serve /, /index.html, and the legacy /test.html route, plus the two example documents. Building does not deploy or change existing hosting configuration.

The --original JSON report has introduced findings in findings/summary, original preflight results in original_findings, and remaining original issues in source_findings/source_summary. Exit status is nonzero for introduced or remaining source errors; --strict also fails on warnings. The older preflight --mode capture API remains available for compatibility, but is not used by this skill's styling workflow.

Proof boundaries

Local comparison cannot validate Dataverse schema, matching rules, compliance relationships, bot protection, external-hosting permissions, HTML sanitization, or actual submission processing. It does not interpret JavaScript or prove that CSS preserves all runtime behavior. Keep the original generated markup and test the result after Dynamics saves and publishes it.

Report local checks, platform acceptance, published rendering, and submission verification separately. Saving changes to an already live form republishes it; use a copy/non-production form for acceptance testing where possible.

Release and support

The ZIP is a local skills-only plugin candidate for Codex. It includes a synchronized .codex-plugin/plugin.json compatibility manifest and does not include an MCP server or hosted application. The release check extracts the ZIP, runs both Python helpers, and installs/discovers/removes it through a temporary Codex CLI marketplace. A complete conversational invocation and other hosts remain separate checks; do not advertise an untested host. The preview-site hosting project is independent of the plugin package.

Keep each user's original export and evidence report in a separate private workspace directory. Do not commit or publish those files, prefill tokens, consent identifiers from a tenant, form submissions, or customer values. This skill does not transmit form data to a service of its own. External fonts and resources already present in supplied HTML may contact their providers when the final form is published; the repository browser checker blocks them while testing. Backups are retained by the user until deleted from their workspace.

For a failed styling attempt, use the untouched original.html to restore the same form. For a saved live form, follow the tenant's ordinary editing and publishing process and verify the restored version and a test submission. Report problems in the repository issues with synthetic HTML and the checker finding codes, never customer or tenant exports. Release criteria and known limitations are in the release checklist.

Sources: form customization and validation, div layouts and troubleshooting, unmapped fields.