hangtola

Hangtola: From Peak to Flop

Organize the user's provided images and text into an evidence-based, opinionated, further-editable five-tier ranking, and deliver standalone HTML.

Core Principles

Accept images, image captions, plain text, or a mix of the three as input; do not require the user to organize them into a table first.
Treat attachment order as input order, not as ranking; first keep each image paired with its description, then assign tiers by dimension.
Separate text、caption、note : the name is for identification, the short comment is for public display, and the rationale is for internal memory.
Let the AI fill in reasonable parameters based on semantics; do not mechanically leave all optional fields blank.
Ask questions only when the missing information would materially change tier assignment. When it can be determined from images, filenames, context, or research, complete it directly.

When handling multiple images, mixed input, short comments, or smart color schemes, first read references/input-contract.md。

Workflow

1. Read history

In the current working directory, look for .hangtola/：

.hangtola/
├── dimensions.json
└── boards/<slug>.json

When history on the same topic exists, reuse the confirmed dimensions and stable item names; overwrite only when the user explicitly requests a re-ranking.
When the user provides JSON exported from a webpage, treat it as the latest truth.

2. Normalize input

Build a temporary list in the order of attachments and text in the message, and assign each item a stable number. For each item, obtain:

text: a stable, identifiable item name.
image: a local image path or data: URL; when there is no image, use null。
caption: the public short comment on the image card. By default, generate one simple, clear, and interesting short sentence; text-only cards are usually left blank.
note: the basis for tier assignment and uncertainty, written only into the data, not shown in the exported image.
color: the background color of a text-only card. Choose from a controlled palette based on semantics; image cards must be null。

When the user gives "Image 1 is A, Image 2 is B" or per-image notes, strictly preserve the correspondence. When reliable identification is impossible and would affect ranking, ask only about the unidentified items in a focused way.

3. Confirm dimensions

When the user has already given ranking criteria, adopt them directly.
Otherwise, propose 3–5 dimensions and weights from 1–5 based on the topic; when history contains dimensions for the same topic, prioritize reusing them.
When the user only wants to rank by subjective feeling, allow one clearly named primary dimension without manufacturing false precision.

4. Necessary research

When the user-provided images and descriptions are sufficient, do not search just to "look diligent."
When facts would affect tier assignment, use available web search tools to verify specifications, reputation, or background.
Write the evidence summary into note, and do not stuff lengthy research into the public caption。

5. Tier assignment and ranking

For each dimension, score 0–10 and multiply by weight, using the weighted result to assist tier assignment.
Keep "Peak" scarce, usually no more than 20%; "Total Flop" must have a clear hard flaw; empty tiers are allowed.
Within the same tier, arrange from strongest to weakest. The original attachment order is used only to preserve input pairing, not to override judgment results.
In the conversation, provide a text version of the ranking and one reason for each item; confirmation may be omitted when the user explicitly requests the ranking directly.

6. Fill in presentation parameters

Image card caption should prioritize observations or judgments, avoiding vague praise. By default, no more than 14 Chinese characters or 36 Latin characters.
Text-only card color Choose by semantics; color only serves as supplementary expression and does not repeat the tier meaning. When stable semantics cannot be formed, use null。
title and footnote are left empty by default; display only when the user explicitly requests it.
Five tiers key and color are fixed,label is editable.

7. Generate HTML

First write the ranking data as JSON, then run the script included with the skill:

node <skill-directory>/scripts/render-board.mjs board.json 夯到拉-主题.html

The script will validate the schema, embed local images as data: URLs, and safely inject into assets/template.html. Do not manually concatenate base64 or replace <script>。

8. Save and deliver

Merge dimensions into .hangtola/dimensions.json, and save the update time by theme.
Save the final data to .hangtola/boards/<slug>.json. When iterating on the same ranking, keep id unchanged and refresh savedAt。
Open the HTML in a browser and confirm that images, public comments, plain-text colors, ordering within tiers, and export all work properly.
Inform the user that they can drag to fine-tune the order, tap a card to edit the name/comment/internal rationale, batch upload or paste images, and export PNG/JSON.

Data contract

{
  "id": "phones-2026",
  "title": "",
  "footnote": "",
  "savedAt": "2026-08-03T12:00:00.000Z",
  "dimensions": [{ "name": "性能", "weight": 3 }],
  "tiers": [
    {
      "key": "hang",
      "label": "夯",
      "color": "#fb2018",
      "items": [
        {
          "text": "示例条目",
          "image": "/absolute/path/to/example.jpg",
          "caption": "强得不讲武德",
          "note": "内部定档依据，不公开显示",
          "color": null
        }
      ]
    },
    { "key": "top", "label": "顶级", "color": "#ffa640", "items": [] },
    { "key": "upper", "label": "人上人", "color": "#fbf600", "items": [] },
    { "key": "npc", "label": "NPC", "color": "#fdf1c7", "items": [] },
    { "key": "la", "label": "拉完了", "color": "#ffffff", "items": [] }
  ],
  "pool": [
    { "text": "纯文字候选", "image": null, "caption": "", "note": "", "color": "#0a84ff" }
  ]
}

image Only local paths or data: URLs are allowed; external links are prohibited.pool Saves undecided items and does not enter the exported image.