Fill-in console

The "fill-in console" is a practical tool I developed to streamline filling in external forms that can't be driven by API, such as Google Business Profile (GBP), app stores, and grant portals. This HTML console, opened locally, provides a side-by-side reference while manually entering data into these systems. It's designed to answer the question, "what do I paste here," and is a sibling to the Hero Lab pattern, which guides users on "which photo" to use.

Key Components

The fill-in console relies on five critical components to maintain its utility and accuracy:

1. Markdown-Based Content: The console's content is sourced from a markdown file, ensuring that the information is easily editable and that the HTML page is generated to reflect the latest content. This approach prevents discrepancies between the page and its source.

2. Exact Field Limits: It's crucial to measure the actual character limits for each destination field. For instance, Google truncates service descriptions at 120 characters without notice. By implementing a checker that fails upon violation, I can ensure that all entries fit within their limits, protecting against silent truncation.

3. Image Proximity: Each image is displayed beside its corresponding field, mimicking the actual form-filling process. This setup aids in associating the correct image with its field during manual entry.

4. Absolute Paths: The console provides full absolute paths for assets, complete with drive letters and <a download> buttons. This clarity is essential, as repo-relative paths can be ambiguous across different checkouts and worktrees.

5. Click-to-Select Fields: To expedite the copy-pasting process, each pasteable field uses user-select: all, allowing users to select content with a single click, thereby reducing the effort involved in dragging and selecting text.

Critical Judgment Calls

Beyond the console's structure, three critical decisions shape its effectiveness:

• Pre-Existing Content Check: Before generating new assets, I always check existing resources using .claude/registry/LOOKUP.md and the repo's CLAUDE.md. This step prevents redundant work, as seen when I discovered a pre-existing photo kit in branding/gbp-2026-09-12/ that was more suitable than what I initially generated.

• Content Policy Adherence: It's essential to understand not just the field limits but also the content policies of the destination platform. For example, Google Maps discourages screenshots in the business photo gallery but expects designed cards in the Products area. Adhering to these policies ensures content passes review.

• Compliance with Repo Policies: The console respects repository policies, such as in traviseric.com/strategy/OFFER-ARCHITECTURE.md, which prohibits publishing fabricated starting prices. Thus, the GBP console's price fields are shipped empty, and the checker enforces this rule, ensuring no false claims are made.

This fill-in console is an indispensable tool for manual data entry tasks, providing clarity and efficiency while respecting all necessary guidelines and policies.