Create a reusable activity calendar chart section that makes daily patterns legible at a glance. Its warm-neutral editorial styling combines an ink canvas, clay surfaces, and teal intensity cells for product analytics and executive reporting.
No external services. Runs entirely on your agent.
/sl-activity-calendar-chart-ui-block Create a SaaS usage report section for readers to scan yearly activity, with the headline “A Year Of Steady Activity” and three summary stats: 1,284 active projects, 312 days with activity, and the busiest day, Sep 12, with 18. Use the skill’s restrained Clay Ledger style.
Verified
| render-check | pass | 4.0 / 5 | 39s |
Yes. Keep the date range configurable and derive the displayed weeks from the supplied dates and week-start setting.
Use explicit, documented value bands and make them configurable when the data scale varies between uses.
A polished, reusable activity-calendar chart block for showing daily usage patterns in a calm, editorial interface.
Style: Clay Ledger. Calm, editorial warmth balances a deep ink canvas with tactile clay neutrals and precise teal data accents. Follow references/style-guide.md exactly.
If something essential is missing, ask one short question before starting. Never invent facts, numbers, quotes or customer names; mark gaps as [needs source].
references/section-library.md. Confirm which block the user needs and where it will live (plain HTML or a framework component).references/template.html to section.html. Keep the <style> block and the one focal section; delete every other section.references/style-guide.md in the :root block. Do not introduce colors, fonts or radii outside the tokens.REPLACE_ placeholder, inside the word limits. Never invent customer names, logos or numbers; label fictional testimonials and figures as sample content.references/framework-adaptation.md after the HTML version passes. ``bash node scripts/validate-html.mjs section.html ``
file://) and check keyboard focus, the FAQ toggles and the mobile menu.section.html: one self-contained HTML file (inline CSS, inline SVG, no network requests, no storage APIs) that opens from file://.<h1>, labelled form inputs, alt text on every image, no REPLACE_ placeholders or filler text.The preview (preview/demo.html) is a static reference built from sample content: it shows the layout, style, copy structure and the visible controls every interactive part needs (labelled form fields, carousel buttons, player chrome). Image areas are labelled placeholders and sample quotes or figures are marked as samples. In a real run the agent uses the user's content and assets, wires behaviour (form destinations, media sources, data) and keeps every promise in the output contract above.
$4.99A reusable paired-column chart section for comparing two measures across a handful of categories. Warm dark-clay surfaces, teal and clay bars, and clear labels make it suitable for executive reports and polished product pages.
$4.99A reusable, polished records grid for reporting and product interfaces, styled with warm-neutral surfaces and crisp teal emphasis. Use it when users need to scan ownership, status, and record details quickly.
$4.99A focused, dark balance-chart section for showing inflows, outflows, and the resulting net over a stated reporting period. It pairs light, legible labels with restrained teal and clay accents and an explicit explanation of what the chart represents.
$4.99A polished, reusable data-grid section for product interfaces and executive or research reporting. Warm paper tones, working accessible controls, and aligned monospaced values make dense records easier to scan.
$4.99A reusable event comparison chart section with proportional bars, readable direct values, period context, and a concise takeaway for product pages and reports.
$4.99A polished, reusable stats-led hero for product launches and software landing pages, pairing a clear outcome headline with a standout metric and restrained supporting data.
$4.99A reusable, single-section product hero with warm paper surfaces, quiet framing, and a restrained teal call to action. Designed for founders and product teams who need an editorial, polished first screen without building a full landing page.
$4.99A reusable hero section with editorial monospace headlines, a warm-neutral canvas, clear teal actions, and restrained drifting marks. Built for product launches and software brands that need a polished, editable focal section rather than a full landing page.