shuakami

@shuakami source repo

24 skills
0 followers
12 hours ago last updated

▌
Paperchart · shuakami bundle
Generate clean, calm chart PNGs in the spirit of Anthropic and OpenAI blog posts. Trigger when the user asks to produce a chart, model comparison table, diagram or infographic for a technical blog post, release notes, a research write-up or a slide deck and wants a single restrained palette, minimal chrome, heavy inline labelling, and PNG output rendered from React at native resolution. The primary surface is a shell CLI named `paperchart` that takes a JSON file and writes a PNG. Thirty-two primitives covering charts (line, area, scatter, heatmap, calendar heatmap, histogram, cdf, box-plot, ranking, dumbbell, slope, waterfall, small-multiples, timeline, funnel, sankey, treemap, radar, table, stacked-bar, grouped-bar, critical-path, pack-layout, latency, bytes, recall) and Mermaid-style structural diagrams (flowchart, architecture, sequence, state-diagram, er-diagram, delivery). Six themes, layout + style overrides per chart.

0
installs
▌
Paperchart Radar · shuakami
Render a radar / spider chart with N axes and two-to-four series polygons. Use for model-capability profiles, product-feature comparisons, and any multi-axis before/after story where each axis has a shared 0-100 (or 0-`max`) scale.

0
installs
▌
Paperchart Slope · shuakami
Render a two-point slope chart connecting a before and after value for each series. Use when showing movement over a single interval - a performance optimisation (baseline to rebuilt), a policy change (pre and post), or any paired comparison where the reader should instantly see which series improved the most.

0
installs
▌
Paperchart Table · shuakami
Render a model / product / tier comparison table in the spirit of Anthropic and OpenAI release posts. Columns are the subjects being compared (models, vendors, tiers); rows are metrics. One focal column gets a tinted panel background; per-row winner is auto-bolded; cells can carry a secondary caption ("no tools" / "with tools" / "Pro").

0
installs
▌
Paperchart Funnel · shuakami
Render a conversion funnel with stage bars whose widths are proportional to count, drop-off annotations between stages, and a final accented bar for the terminal stage. Use for acquisition / activation funnels, feature adoption funnels, and search-result click-through analysis.

0
installs
▌
Paperchart Sankey · shuakami
Render a two-column Sankey diagram. Source nodes on the left, target nodes on the right, flows drawn as smooth ribbons whose thickness encodes value. Use for traffic-source attribution, token-budget allocation, error-origin routing, and any allocation story where inputs split into outputs.

0
installs
▌
Paperchart Treemap · shuakami
Render a two-level squarified treemap (Bruls et al.). Top-level items carve the plot into rectangles whose area is proportional to `value`; per-item children further subdivide. Use for bundle-size composition, token-budget breakdowns, market-share stacks, and any hierarchical-proportion story.

0
installs
▌
Paperchart Box Plot · shuakami
Render a horizontal box-and-whisker plot for 2-8 rows. Each row shows min / q1 / median / q3 / max plus optional outlier dots. Supports linear or log x-axis. Use for latency-distribution comparisons across services, model-inference time distributions, or any five-number-summary side-by-side.

0
installs
▌
Paperchart Sequence · shuakami
Render a sequence diagram (Mermaid `sequenceDiagram` equivalent). Actor boxes along the top, dashed lifelines descending, messages drawn as horizontal arrows in time order. Supports notes spanning one or more actors, reply arrows (dashed + open head), async arrows (open head, solid line), self-calls (right-hand loop), and an accent color for a single emphasized message.

0
installs
▌
Paperchart Timeline · shuakami
Render a horizontal timeline with swim-lanes for teams or workstreams, phase bars along a continuous time axis, and optional milestone markers. Use for roadmaps, release histories, migration plans, and any narrative that places events on a shared clock.

0
installs
▌
Paperchart Flowchart · shuakami
Render a flowchart (Mermaid `flowchart TD` / `LR` equivalent). A directed graph of labeled nodes with decision diamonds, stadium terminals, cylinder stores, and orthogonal edges. The layout is a layered DAG computed from the longest forward path; back-edges (cycles / retries) are detected and drawn as loop-back arrows so the forward flow stays clean.

0
installs
▌
Paperchart Er Diagram · shuakami
Render an entity-relationship diagram (Mermaid `erDiagram` equivalent). Each entity is a table-style box with a header (name + caption) and a list of typed fields with PK / FK markers. Relationships are drawn as bézier curves with crow's-foot cardinality markers at each end ("1", "0..1", "M", "1..M", "0..M"). Good for database schema diagrams in technical posts.

0
installs
▌
Paperchart Bytes Chart · shuakami
Render a stacked horizontal bar chart that splits a byte payload into a first-load block and a deferred block, separated by an explicit visible gap. Use when comparing delivery sizes across two or more options and you want to make it obvious that some bytes are on the critical path and others are not.

0
installs
▌
Paperchart Grouped Bar · shuakami
Render vertical bars arranged in groups for side-by-side categorical comparison. Use when each category has two or three values that deserve equal visual weight, for example "theoretical feasibility versus observed traffic", "model A versus model B across benchmarks", or "before versus after versus projection". Not for part-to-whole data.

0
installs
▌
Paperchart Pack Layout · shuakami
Render a three-panel byte-layout diagram for a binary file format. Panel one shows the proportional byte share of each section, panel two shows a bit-level header breakdown with labelled bits, and panel three shows a full left-to-right entry layout. Use when a technical blog post needs to explain how a custom binary format is packed on disk or in memory.

0
installs
▌
Paperchart Stacked Bar · shuakami
Render a horizontal stacked bar chart showing how each category decomposes into parts that sum to 100 percent (or a fixed total). Use for composition questions like "what fraction of jobs in each industry are fully automated versus assistive", "usage breakdown by product surface", or "revenue by segment" where there are three to five segments per row.

0
installs
▌
Paperchart Architecture · shuakami
Render a system-architecture diagram. Services are grouped into labeled panels (client, edge, backend, data, observability, …); each panel stacks its services vertically. Connections draw smooth cubic bézier curves between services and can be marked accent, dashed, or bidirectional. Use for architecture posts, design documents, onboarding diagrams.

0
installs
▌
Paperchart Recall Chart · shuakami
Render a per-row dot plot with two or three overlapping dots per row, used to prove that two or more engines, queries or models return exactly the same set of results. Use when a blog post needs a compact visual for set-equality or Jaccard = 1.00 parity across variants.

0
installs
▌
Paperchart Critical Path · shuakami
Render a Gantt-style horizontal timeline for a network or load waterfall, with named milestone markers (DOMContentLoaded, user interaction, etc.) and two-colour bars that separate critical-path resources from deferred ones. Use when a technical blog post needs to explain a first-load network waterfall or an asset loading strategy.

0
installs
▌
Paperchart Latency Chart · shuakami
Render a grouped horizontal bar chart on a log-scaled x axis for latency percentiles (p50 / p95 / p99) across several options. Use when comparing query, request or function latencies across two or more variants where values span multiple orders of magnitude and you want the chart to read at a glance in a technical blog post.

0
installs
▌
Paperchart State Diagram · shuakami
Render a state diagram (Mermaid `stateDiagram-v2` equivalent). Rounded-rect states laid out in layers by longest-path from the start pseudostate; back-edges (retry / reset transitions) drawn as loop-back arrows. Supports start (●) and end (⊙) pseudostates, labeled transitions, dashed transitions (error paths), and an accent state/transition.

0
installs
▌
Paperchart Delivery Panels · shuakami
Render a three-up side-by-side panel comparison for architecture options or delivery variants. Each panel has a heading, a subtitle, a list of assets with their sizes, and a totals strip at the bottom. Exactly one panel is accented so the reader understands which option is recommended or which one the post will focus on.

0
installs
▌
Paperchart Small Multiples · shuakami
Render a grid of identical-shape sparklines, one per subject, for scanning trends across many subjects at once. Use when the reader should compare the shape of a time series across nine to twelve subjects and individual panels do not need axis ticks. Ideal for adoption curves, coverage by occupation, or per-region metrics.

0
installs
▌
Paperchart Calendar Heatmap · shuakami
Render a GitHub-style calendar heatmap. A grid with 7 rows (weekdays) and 53 columns (ISO weeks). Each cell is one day, shaded by `value` using four-bucket opacity steps of the accent colour. Use for daily-activity grids, deployment-frequency maps, error-incidence calendars.

0
installs

24 published skills