SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsresume-canvas

resume-canvas

Frontend & websites

View repository

Updated 10-15 17:33

About this skill

Resume Canvas Fine-Tuner (resume-canvas)

Dedicated to local visual fine-tuning, editing protocol validation, and the save-and-re-verify loop for an already-generated standalone visual HTML resume.

Positioning and Collaboration Entry Points

  • Role Positioning: The "final minor touch-ups" tool after AI generates a visual resume. Provides a WYSIWYG local web interface for users to quickly correct typos and fine-tune font size, font weight, color, alignment, line height, paragraph spacing, and page margins.
  • Responsibility Boundaries：
    • Allowed: Editing the plain text of existing fields, adjusting restricted layout styles.
    • Prohibited: Not for experience interviews and generation, fabricating facts from nothing, JD matching analysis, structural rearrangement, inserting arbitrary HTML, or image editing.
    • Mode Restrictions: Only applicable to the 6 built-in visual templates (modern-minimal、classic-business、creative-bold、japanese-minimal、minimal-blue-business、tech-dark）。ATS-safe mode does not use Canvas(the single-column plain text structure neither requires nor is connected to the editing protocol).
  • Upstream Sources：
    • resume-builder: After generating the master visual HTML and completing initial PDF rendering verification, if the user needs to fine-tune layout or text, route to this skill.
    • jd-tailorer: After generating the job-customized visual HTML and completing initial PDF rendering verification, if the user needs to fine-tune, route to this skill.
    • resume-workflow: The full orchestration workflow calls this skill as needed during the delivery stage.

Core Workflow

Before the first validation run or re-verification after saving, read Rendering Environment and Command Paths. The Canvas CLI can be started independently, while PDF/screenshot re-verification after saving requires the full runtime; use the absolute paths of the actual scripts and private artifacts.

Step 1: Validate the Editing Protocol Contract

Before starting Canvas or delivering the visual HTML, you must ensure the target HTML conforms to the editing field protocol:

  1. Protocol Root Marker： <html> The root node must declare:
    • data-resume-editor-template="<模板标识>"(such as modern-minimal , etc.)
    • data-resume-editor-version="1"
    • data-resume-layout="full-page"
  2. Field Independence Requirements：
    • The total number of fields must be greater than 0;
    • Must use unique, lowercase, semantic data-resume-editor-id(for example profile-name、experience-1-title、experience-1-bullet-1、skill-1 , etc.);
    • Independent Editability Principle：data-resume-editor-id Can only be marked on specific leaf text elements;
    • Placing edit IDs on containers is prohibited: Placing IDs on <html>、<body>、<main>、.page、.resume、header、footer、section、ul、ol、figure or containers containing multiple sections/composite content is prohibited, and a whole-page fallback ID is strictly forbidden. Composite contact information with links requires splitting the text into independent fields.
  3. Run Static Validation (Gate Command)： 
    npx -p @chasen-liao/resume-skills@latest resume-skills validate "<最终_visual.html路径>"
    • Repeatedly execute until "validation passed" is output;
    • If errors occur (missing protocol version, missing template name, container ID present, duplicate ID, etc.), you must fix them in the HTML against the reported node; starting Canvas when validation has not passed is strictly prohibited.

Step 2: Start the Local Editor

After validation passes, call the CLI to start the local service:

npx -p @chasen-liao/resume-skills@latest resume-skills editor "<最终_visual.html路径>" --manifest "<交付目录/自定义文件名.resume-manifest.json>"

CLI Parameters and Run Mode Description

  • --manifest <path>: Explicitly associate the validation manifest file. When the user saves in Canvas, the manifest is automatically invalidated to ensure the authenticity of the artifact.
  • --json: NDJSON streaming output of machine-readable events (server_started、error、update_available、validation_passed). Suitable for Agent backend integration or automated pipelines, with scripts processing line by line JSON.parse。
  • --no-open: Prohibit automatically launching the system default browser. Suitable for GUI-less environments, remote SSH containers, or developers who open the web page manually themselves.
  • --port <number>: Explicitly specify the service port (strict mode: if the port is occupied, an error is reported directly; if unspecified, it defaults to trying 8848 and incrementing up to 8853, and if still occupied, a random port is used).

Environment Degradation and Exception Handling

If the current execution environment lacks Node.js (< 20) or cannot execute the npx command:

  • Must explicitly report that it was not started: It is strictly prohibited to falsely claim to the user that "the editor has been opened in the background";
  • Provide the complete command: Output to the user the complete command containing their actual HTML path, and prompt the user to manually execute the launch in their local terminal: 
    npx -p @chasen-liao/resume-skills@latest resume-skills editor "<实际生成的_visual.html绝对路径>"

Step 3: Interactive Collaboration and Live Preview

  1. Interface Interaction Guide：
    • Middle canvas: A single-selected field can be edited directly by typing (plain text); double-clicking also allows editing; supports Tab/ arrow keys to switch field focus,Ctrl/Cmd+Enter to confirm,Esc to undo.
    • Right panel: After selecting a specific field, you can adjust font size, font weight, color, line height, and space after paragraph; you can adjust page margins and the global theme color.
    • Left status: Displays in real time the A4 page vertical overflow and height usage indicators.
  2. Live Preview Hot Reload：
    • The editor maintains a persistent connection with the local service via SSE;
    • when the Agent modifies and re-saves the HTML in the background based on user feedback, the front-end canvas automatically triggers a hot reload to refresh with the latest content, and the user does not need to manually refresh the page.

Step 4: Save and Re-verify Closed Loop (Mandatory Key Defense Line)

After the user finishes modifications in the editor and clicks "Save Changes":

  1. State change：
    • The editor atomically writes the modifications back to the source HTML, and automatically sets the associated *.resume-manifest.json status to invalid (invalidated）；
    • The old PDF no longer matches the current latest HTML content.
  2. Must return to the Agent workflow to execute the re-verification closed loop：
    • Fact verification: Check whether the modifications in the HTML involve key experience, dates, positions, data, or skills. If any unconfirmed new facts are found, they must be verified with the user and must not be delivered directly;
    • Re-render and verify the PDF: The rendering and verification script must be re-executed to generate a valid new PDF and manifest: 
      powershell -NoProfile -ExecutionPolicy Bypass -File skills/resume-builder/scripts/render_resume.ps1 -HTML "<最终_visual.html路径>" -OutputPdf "<交付目录/自定义文件名.pdf>"
    • Full-page screenshot visual review: The AI must open the full-page screenshot generated by re-rendering, and according to full-page screenshot visual review , check the bottom whitespace, top-bottom balance, gaps between sections, and the distribution of each column in the two-column layout. When there is an obvious bottom gap or imbalanced whitespace, it must not be delivered even if the automatic validation passes; adjust within the layout options supported by Canvas, then re-render, verify, and view the new screenshot. If structural rearrangement is needed, return to resume-builder or jd-tailorer processing, without expanding the Canvas editing boundary.
    • The fine-tuning loop is only considered complete after confirming that the PDF has exactly 1 page, the effective utilization rate is ≥ 98%, the manifest is in a valid state, and AI has actually viewed the image to confirm the whitespace is even. If the screenshot cannot be viewed, it must be stated that the visual review was not completed.

Collaboration Exit and Downstream Routing

  • After fine-tuning is complete and re-verified: deliver the final visual HTML, PDF, and manifest.
  • Distinguish subsequent flow between master version and customized version：
    • If the fine-tuned resume is the master version: after fine-tuning and re-verification pass, it becomes the latest master version; if subsequent applications target new positions, use the master version facts as the baselineRoute to jd-tailorer。
    • If the fine-tuned resume is a position-customized version: it serves only as an independent deliverable for the current specific company/position (saved under the tailored/<公司名>-<岗位>/ directory),it is strictly forbidden to directly use an already customized version as a new master version to derive other positions; applying to other positions must return to the single master version facts.
    • Version Archiving: whether master version or customized version, after the fine-tuned final draft is finalized and re-verification passes, update the corresponding version's version-notes.md and recommend that the user complete a semantic commit in a local private Git repository; do not automatically execute the Git commit.