Quartz 4

SKILL

2 min read

Workflow

When triggered, always:

  1. Read DESIGN.md in this skill directory — import the full color palette, typography stack, component stylings, and layout principles before generating any code.

  2. Identify the target tab or component from the user’s request. Default to the full 7-tab view if unspecified.

  3. 7-Tab Structure — render all tabs regardless of which is active:

    • Readiness: Score ring (SVG, gold fill, 0–100), 6-item checklist, 6 KPI tiles (Days on Market, Asking Price, ARV, MAO, Equity %, Confidence), Publish to BA gold CTA
    • Buyers: Active buyer count KPI, Campaign performance KPIs, Buyer list table (name, tier, status badge, last contact), Send to Buyers gold CTA
    • End Buyers: End buyer count, IL platform status, InvestorBase sync status, end buyer table, blast history
    • Lists: PropStream list sync status, CRMLS list status, custom list uploads, list performance KPIs
    • Blast: 4-channel coordinator (InvestorBase, CRMLS Agents, PropStream, Showing Day), per-channel status badges, history table, New Blast violet button
    • Responses: Inbound SMS/email timeline, Aurora action cards, response rate KPI, unanswered count badge
    • Showings: Scheduled showings list, date/time, showing agent, status, Calendar view toggle

  4. Animation requirements (all mandatory):

    • SVG ring: CSS stroke-dashoffset transition 1.8s cubic-bezier(.4,0,.2,1) on page load
    • Score label: native rAF counter animation 1.2s ease-out easing
    • KPI numbers: same rAF counter, triggered on tab activation
    • Chart.js bars: staggered entrance 50ms delay per bar
    • Checklist items: staggered CSS opacity + translateX entrance, 80ms delay per item
    • Tab switch: 150ms ease content fade

  5. HubSpot full-page context (default):

    • External CDN allowed: Google Fonts, Chart.js 4.4.0
    • fetch() allowed to relative paths (same origin)
    • Max width: 1400px with 24px padding

  6. HubSpot sidebar context (when user specifies “sidebar” or “350px”):

    • Switch to dcc-hubspot-sidebar skill instead
    • No external CDN (HubSpot CSP blocks it)
    • Inline all fonts as base64 data URIs or use system stack fallback

  7. Button hierarchy (always respect):

    • Gold: Publish to BA (one per view, the primary action)
    • Violet Primary: Blast, Send, Approve, Create
    • Ghost: View Details, Export, Filter
    • Secondary: Cancel, Reset, Back
    • Danger: Delete, Remove, Reject

  8. Quality gate check before delivering any output: Run through the 8 quality gates in DESIGN.md §9. If any fail, self-correct before presenting.

Graph View