@litfamily/litclaude 1.0.10 → 1.0.13

package/plugins/litclaude/skills/lit-diagram-drawer/references/type-beeswarm.md

@@ -0,0 +1,49 @@
+# Beeswarm
+
+**Catalog ID:** beeswarm
+
+## Purpose and selection
+
+Use a beeswarm when each observation should remain visible and the distribution's shape or tail is more important than a single summary. Each dot is one item on one shared value axis; the perpendicular spread only packs marks apart. Use a histogram for a broad distribution, a scatter plot for two variables, and a ridgeline for comparing several groups. A handful of values is better shown as a table; a crowd above roughly 300 items should be binned. If the task is analysis of measured scientific data, route it to the dedicated scientific-visualization skill.
+
+## Content schema
+
+Supply a stable item ID, one finite numeric value, unit, and a declared linear domain. Include 20–300 items. Mark at most one focal observation; name no more than six points in total. State the domain, sample count, omitted count if any, and explicitly say that the swarm offset carries no value. Do not supply a second visual variable through dot size, color, or vertical ordering.
+
+## Deterministic layout recipe
+
+Use a 1000 × 500 viewBox with plot x=80..960 and the horizontal value axis at y=420. Place 4–6 ticks at equal value intervals, bind each printed label to its numeric tick, and draw vertical guides only. Use one fixed radius for every dot. Map each value to x with the same linear formula; sort by value then stable ID and assign the first free vertical slot alternating above and below a centerline, with slot pitch at least two radii plus a gap. This produces a repeatable packing while leaving every x-position exact.
+
+Check collisions after packing. If the band becomes too tall, split, use a histogram, or reduce the item set with an explicit omission note; never shift an item along the value axis to avoid a collision. Put any outlier label outside the cloud with a leader and a stable item binding. Store positions on each mark directly; don't move dots, bound labels, ticks, or their parent groups with SVG transforms or CSS positioning after verification.
+
+## Encoding rules
+
+Horizontal position is the only quantitative encoding. Vertical position is packing only; every dot has the same size and non-focal fill. Use one accent dot at most, with a label that names the observation. Preserve a data-to-mark binding for each circle and a data-to-text binding for every visible label and tick. Omitted observations must be counted in a note.
+
+## Korean behavior
+
+Use Korean for the title, axis explanation, and summary; keep IDs and exact service names intact. Use Pretendard for prose and a mono face for IDs and ticks. Apply Korean locale formatting to visible values, but retain unrounded machine values in data bindings. Give the axis unit once and keep each tick concise. The legend must explicitly state that the swarm thickness is not a scale.
+
+## Light, dark, and full variants
+
+Light uses one consistent ink fill for ordinary points, a clear stroke, and neutral gridlines. Dark uses a separately tested neutral point ramp and visible axis marks. Full may add the sample summary and a short note outside the plot; the point set, domain, radius, and packing algorithm stay unchanged in all variants.
+
+## Accessibility
+
+Provide a concise description of the distribution, sample count, axis bounds, and the fact that vertical spread is non-quantitative. Supply a downloadable or adjacent table when item-level access is required. Ensure no mark is distinguished by color alone. See [Accessibility](accessibility.md).
+
+## Verifier gates
+
+Run scripts/verify-diagram.mjs for clipping, contrast, accessibility, and visible text. Run scripts/verify-type.mjs --type=beeswarm for one-value binding, shared scale, constant radius/fill, collision-free packing, point limits, label bindings, and tick fidelity. See [Verifier guide](verifier-guide.md).
+
+## Anti-patterns
+
+- Nudging a dot along the value axis to relieve crowding, or shifting a verified mark with CSS.
+- Overprinting dots so density is encoded by darkness.
+- Sorting the perpendicular dodge by a second quantity.
+- Dropping or averaging observations without disclosure.
+- Letting size or opacity imply another variable.
+
+## Shared references
+
+[Style guide](style-guide.md) · [Output specification](output-spec.md) · [Korean typography](korean-typography.md) · [Accessibility](accessibility.md) · [Verifier guide](verifier-guide.md) · [PPTX and DOCX](office-pptx-docx.md)

package/plugins/litclaude/skills/lit-diagram-drawer/references/type-bubble.md

@@ -0,0 +1,49 @@
+# Bubble Chart
+
+**Catalog ID:** bubble
+
+## Purpose and selection
+
+Choose bubbles only when each item has three meaningful numeric values and the combined reading matters: x-position, y-position, and magnitude by area. If size is merely decorative, use the ordinary scatter type. If the third value is a category, facet or label it instead. Do not use bubbles when magnitudes span orders of magnitude and small marks would disappear. If the task is analysis of measured scientific data, route it to the dedicated scientific-visualization skill.
+
+## Content schema
+
+Each item has a stable name, finite x and y values, and a strictly positive size value. Supply explicit units and bounds for both axes, tick values, and one area-scale constant. Include 5–15 items. Declare at most one focal item and no more than three visible point labels. Count any omitted items in the source note.
+
+## Deterministic layout recipe
+
+Use a 1000 × 500 viewBox with plot bounds x=80..960 and y=40..420. Draw equal-interval ticks on each linear axis and bind each tick to its value. Compute center coordinates independently from the shared x and y scales. Compute radius as one constant multiplied by the square root of the size value so circle area, not radius, tracks magnitude. Round once, then use the same rounded values in the visible label and geometry binding.
+
+Paint circles largest to smallest so smaller values remain visible. Add a same-radius paper underlay immediately before each mark to keep gridlines from showing through translucent fill. Keep point labels outside the bubble when possible and connect them to their mark with a short leader. Put verified geometry directly on each mark's coordinates; do not position marks or bound labels with transforms or CSS geometry, since that can make the rendered position disagree with the checked value. Never reposition a center to avoid overlap; disclose unavoidable occlusion or change the chart.
+
+## Encoding rules
+
+Position encodes x and y; area encodes the third measure. Use a neutral fill ramp to balance ink mass, not as a fourth data channel. One accent identifies the editorially focal item. Keep stroke contrast strong enough to define each circle edge. Bind each rendered mark to its name, x, y, and size; bind each text label and tick to the mark or value it describes. State scale bounds and whether the axes include zero.
+
+## Korean behavior
+
+Use Pretendard for names and Korean explanations, with mono for numeric ticks and IDs. Put units in axis titles and format labels with Korean locale conventions. Keep underlying values exact in bindings even if display labels round. Avoid rotating Korean axis titles; wrap or use a concise horizontal axis caption. Explain in Korean that area, rather than diameter, represents magnitude.
+
+## Light, dark, and full variants
+
+Light uses paper underlays, quiet gridlines, and stroked neutral bubbles. Dark has a dark paper underlay and recalculated neutral/accent strokes; don't reuse light-mode alpha values blindly. Full adds title, key interpretation, and source text around the same plot. Maintain the same scales, point order, and geometry in every variant.
+
+## Accessibility
+
+Describe the two positional measures, area measure, bounds, and focal item in the accessible description. Provide a data table for exact values. Do not rely on hue or area alone to identify a focal point; label it. Keep all axis and point labels legible at presentation size. See [Accessibility](accessibility.md).
+
+## Verifier gates
+
+Run scripts/verify-diagram.mjs for shared contrast, clipping, overlap, and accessibility checks. Run scripts/verify-type.mjs --type=bubble for shared scales, area-proportional radii, positive sizes, draw order, and mark/label/tick bindings. See [Verifier guide](verifier-guide.md).
+
+## Anti-patterns
+
+- Making radius directly proportional to the third value.
+- Moving centers to make the layout look cleaner or using CSS transforms to move a bound mark after verification.
+- Assigning a unique hue to each item.
+- Hiding values behind larger bubbles or quietly omitting an extreme.
+- Using a logarithmic or truncated axis without stating it plainly.
+
+## Shared references
+
+[Style guide](style-guide.md) · [Output specification](output-spec.md) · [Korean typography](korean-typography.md) · [Accessibility](accessibility.md) · [Verifier guide](verifier-guide.md) · [PPTX and DOCX](office-pptx-docx.md)

package/plugins/litclaude/skills/lit-diagram-drawer/references/type-bump.md

@@ -0,0 +1,49 @@
+# Bump Chart
+
+**Catalog ID:** bump
+
+## Purpose and selection
+
+Use a bump chart to show how the relative rank of several series changes across ordered snapshots. It communicates rank, not magnitude. Use a slopegraph for exactly two snapshots when the values still matter; use a line chart when magnitude or rate over time is the claim. A ranked list is clearer for one snapshot. If the task is analysis of measured scientific data, route it to the dedicated scientific-visualization skill.
+
+## Content schema
+
+Supply 4–8 named series, 3–6 ordered snapshot labels, and one integer rank for every series at every snapshot. Each snapshot must contain exactly one instance of each rank from 1 through N. Record the measure used to rank and its tie-break rule. All snapshots must use the same measure definition. Mark at most one editorially focal series.
+
+## Deterministic layout recipe
+
+Use a fixed 4px-aligned plot grid. Set each snapshot as an evenly spaced vertical axis. Set rank rows to a constant 56px vertical pitch in the canonical 1000 × 500 frame, with rank 1 at y=88 and rank r at y=88 + 56 × (r−1). Draw straight segments between adjacent snapshots and a small dot at every vertex. Do not smooth. Put snapshot captions under their axis.
+
+Put series names and rank labels in gutters beyond the first and last axes. Align each endpoint label to the row belonging to that series and the column for the endpoint it names. Sort or order series by first-snapshot rank, then keep that order stable. Draw paths before dots and labels. If rank rows or gutters do not fit, reduce series count or widen the canvas rather than moving rank points.
+
+## Encoding rules
+
+Vertical position encodes ordinal rank only. Every rank row has equal distance; horizontal position encodes snapshot order. Stroke tone may carry a restrained ordering cue, but legend language must describe the tone neutrally and remain true in both themes. Accent one focal series and use weight or point size as a redundant cue. Bind each path to its rank sequence and each endpoint label to series, side, and rank.
+
+## Korean behavior
+
+Use Korean snapshot captions and rank labels where appropriate, such as 1위, while preserving rank values as integers. State the ranking measure and tie-break in a Korean source note. Use Pretendard for series names and mono for snapshot codes and rank data. Give gutters enough width for Korean labels; wrap names at word boundaries without allowing them to drift into the plot.
+
+## Light, dark, and full variants
+
+Light uses a neutral stroke ramp, restrained grid-free field, and one focal accent. Dark recalculates the neutral ramp and axis contrast while preserving the same ranking geometry. Full adds title, ranking-method note, and takeaway outside the plot. Do not let the full frame introduce a second series ordering or different data.
+
+## Accessibility
+
+Describe the ranking measure and the major rank changes in text. Keep series identity available through endpoint labels and a data table; color is supplemental. Ensure first and last endpoint labels are programmatically associated with the correct series and snapshot. See [Accessibility](accessibility.md).
+
+## Verifier gates
+
+Run scripts/verify-diagram.mjs for layout, clipping, contrast, and accessibility. Run scripts/verify-type.mjs --type=bump for complete rank permutations, exact rank-row positions, straight adjacent-snapshot segments, snapshot captions, and endpoint label bindings. See [Verifier guide](verifier-guide.md).
+
+## Anti-patterns
+
+- Showing magnitude on a rank axis or labeling rank as though it were a value.
+- Comparing snapshots built from different ranking definitions.
+- Smoothing between observations or filling a genuine missing interval.
+- Giving two series the same rank when the declared tie-break requires unique order.
+- Moving a vertex off its rank row to solve a label collision.
+
+## Shared references
+
+[Style guide](style-guide.md) · [Output specification](output-spec.md) · [Korean typography](korean-typography.md) · [Accessibility](accessibility.md) · [Verifier guide](verifier-guide.md) · [PPTX and DOCX](office-pptx-docx.md)