mobile-app-echarts-visual
Skill1 starsChanged 3 months agoMITView on GitHub
Mobile-readable **product ECharts** (card price/volume, portfolio history, set charts) without desktop regressions — grid gutters, axisLabel floors, legend placement, adaptive height, touch tooltips, dual-viewport proof. Use when card or portfolio charts are clipped, tiny, sparse, legend-jammed, "mobile echarts", or /mobile-app-echarts-visual. Prefer mobile-blog-chart-visual for blog SVG. Prefer design-system chart tokens + tufte for honesty.
In this repository47 other files it gives its agents.
- data-apache-lakehouseSkill
- data-apiSkill
- dataSkill
- data-duckdbSkill
- data-identity-resolutionSkill
- data-pipeline-operationsSkill
- data-pokemon-tcg-foundationsSkill
- data-product-evalSkill
- data-reelsSkill
- data-semantic-qualitySkill
- data-table-lifecycleSkill
- html-designSkill
- ebay-listingSkill
- flutter-pro-ux-reviewSkill
- flutterSkill
- browser-testing-with-devtoolsSkill
- browser-verifySkill
- design-systemSkill
- frontend-designSkill
- mobile-blog-chart-visualSkill
- mobile-chart-visualSkill
- mobile-product-uxSkill
- mockup-implementSkill
- product-designSkill
- product-ui-craftSkill
- prototypeSkill
- react-performanceSkill
- ui-exploreSkill
- visual-verifySkill
- web-qualitySkill
- high-retention-insight-reels-instagramSkill
- instagramSkill
- instagram-virality-insightsSkill
- marketing-cashvertisingSkill
- marketing-contagiousSkill
- marketing-going-viralSkill
- marketingSkill
- marketing-offersSkill
- marketing-storybrandSkill
- quality-checkSkill
- elements-of-styleSkill
- style-clarity-graceSkill
- writer-styleSkill
- writing-docsSkill
- writing-proseSkill
- writingSkill
- writing-technicalSkill
The file
We split this skill into the rules it gives an agent
7 rules. About 0 are common, 4 are distinctive, and 3 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈4
Distinctive · estimate
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 46
Prefer containLabel: true on card/portfolio series charts unless a fixed grid is proven.
- Distinctive: line 56
Do not use blog SVG viewBox math here — ECharts sizes in CSS pixels after layout.
- Very specific: line 60
Use resolveAdaptiveChartHeight (or equivalent):
- Distinctive: line 66
Leave room for sticky chrome (card: app + command + tabs + bottom nav).
- Very specific: line 78
Always go through chartTheme / marketplace color maps — no one-off hex in options.
- Distinctive: line 86
No subtitle line under the page title restating the axis.
- Distinctive: line 106
Run card ECharts mobile e2e + manual 390 screenshot.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Mobile app ECharts visual
Job: Product charts (canvas ECharts) stay legible at ~390×844 and coherent at desktop widths. Mobile is primary for SilphCo; desktop must not gain poster labels or empty plots from mobile-only hacks.
Scope: frontend/src/charts/**, card-detail price/volume, portfolio valuation
history, set volume charts. Not blog SVG — use mobile-blog-chart-visual.
Sources
| Source | What we take |
| Nadieh Bremer — Mobile vs desktop dataviz | Non-linear type; stack/simplify on small screens; different chart when needed |
| Tableau mobile dashboard design | Simple views, fewer filters, high-level marks |
| Create with Swift — humanist mobile dataviz | No hover-only UX; high contrast; color-independent cues |
| Apache ECharts docs (grid / axisLabel / containLabel) | grid + containLabel + resize rebuild — not CSS font hacks on canvas |
Silph chartTheme + adaptiveChartHeight | Token colors; mobile height ≥ desktop for dense series |
Core rules (ECharts)
Grid (gutters)
At mobile container width (~350–370 CSS px after padding):
| Region | Floor (CSS px) | Notes |
grid.left | ≥ 44 | Room for y labels (or use containLabel: true) |
grid.right | ≥ 12 (more if right-side series labels) | |
grid.top | ≥ 28 if legend/title; else ≥ 12 | Prefer no chart title if page already has one |
grid.bottom | ≥ 36 | x labels + dataZoom |
Prefer containLabel: true on card/portfolio series charts unless a fixed grid is proven.
Type floors (CSS px, ECharts fontSize)
| Role | Mobile min | Desktop soft max |
| axisLabel | 11 | 14 |
| legend | 11 | 13 |
| tooltip | 12 | 14 |
Do not use blog SVG viewBox math here — ECharts sizes in CSS pixels after layout.
Height
Use resolveAdaptiveChartHeight (or equivalent):
- Sparse series: compact (~180)
- Mobile dense: ≥ 280
- Desktop dense: ~260
Leave room for sticky chrome (card: app + command + tabs + bottom nav). Chart viewport ≈ remaining space after chrome — do not force a 400px chart under a 160px sticky stack without scroll.
Interaction
- Touch: use project
touchTooltip/ axisPointer patterns — no hover-only insight. - DataZoom: show a mobile hint once if pinch/pan is required.
- Legend: bottom or scrollable; never overflow the container width.
Color
- Always go through
chartTheme/ marketplace color maps — no one-off hex in options. - Dark + light modes both pass contrast against
chartSurface. - Color-independent series cues (line type / marker) for critical series when possible.
Title hygiene
- Page/section heading owns the title.
- No ECharts
titletext that duplicates the section heading (wastes top grid). - No subtitle line under the page title restating the axis.
Verification (product)
| # | Check | Pass |
| E1 | axisLabel fontSize ≥ 11 at 390 | |
| E2 | grid gutters / containLabel — labels fully inside chart DOM box | |
| E3 | No horizontal document overflow | |
| E4 | Canvas width ≥ ~300 on 390 viewport for primary chart | |
| E5 | Legend not clipped | |
| E6 | Dual viewport 390 + 1280 — no desktop poster fonts | |
| E7 | e2e: card-echarts-mobile-geometry (or successor) green |
Workflow
- Identify option builder (e.g. PriceOverTime, DailyVolume, portfolio history).
- Set
grid+axisLabel+ legend for mobile first. - Wire
adaptiveChartHeight(isMobile). - Confirm theme tokens.
- Run card ECharts mobile e2e + manual 390 screenshot.
- Desktop smoke: same option path at ≥1280.
Anti-patterns
- Copying blog SVG floor math into ECharts options.
grid.left: '2%'with long grade labels → clip.- Desktop-only legend on the right → mobile overflow.
- Functional e2e green with unreadable axis (must geometry-probe).
- Fixing clip with
overflow:hiddenon the chart shell.
Hand off
| Need | Skill |
| Blog SVG | mobile-blog-chart-visual |
| Tokens | design-system |
| Sticky chrome | product-chrome-craft |
| Viz honesty | tufte |
| e2e proof | browser-verify |
Done criteria
- E1–E7 for touched product charts
- No title/subtitle duplicate under section heading
- Live card mobile screenshot: labels inside canvas box
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.