Quartz 4

SKILL

2 min read

Workflow

When triggered, always:

  1. Read DESIGN.md in this skill directory for the full token system.

  2. Identify surface type from the request:

    • Static page (invest.reri.co marketing) → direct HTML/CSS generation
    • Email template → inline-CSS-safe HTML, system font fallback for email clients
    • React component (app.reri.co) → 21st.dev compound workflow (see Step 4)
    • Investor deck slide → editorial-print-style HTML

  3. Component priorities (default lineup):

    • Hero block: serif headline + sans subhead + investor CTA
    • Property card grid: 4:3 image + title + price (mono) + KPI strip (cap rate, equity, ROI)
    • Deal grid: paginated, filterable, sortable
    • Investor CTA section: prominent button + supporting trust indicators
    • Email-safe layouts: table-based, inline styles, no flexbox

  4. For React surfaces — use 21st.dev Magic MCP compound workflow:

    • Step 0: Read DESIGN.md §2 → extract primary, surface, accent, text-primary, text-secondary, border tokens.
    • Step 1: Compose token string → "primary=#hex surface=#hex accent=#hex text=#hex border=#hex"
    • Step 2: /ui "<component description> — respect tokens: {token string}"
    • Step 3: ui-expert-mcp analyze_ui on the generated TSX file → audit issues
    • Step 4: Playwright MCP screenshot at 375px + 1280px → confirm responsive + token match

  5. Investor-grade quality gates (run before delivering):

    • Serif headline present (PT Serif, Fraunces, or Charter — NEVER Inter as display)
    • Mono font on all numeric data: prices, cap rates, ROI %, dates
    • All numbers use font-feature-settings: 'tnum' for tabular alignment
    • Generous whitespace — minimum 64px section gaps, 24px+ padding
    • Investor CTA contrast ratio ≥ 4.5:1 (AA accessibility)
    • No purple gradients (anti-slop)
    • No system shadow 0 4px 6px rgba(0,0,0,.1) (anti-slop)

  6. Email template constraints (when surface = email):

    • System font stack only — Georgia, 'Times New Roman', serif for display, system-ui, sans-serif for body
    • All CSS inline (no <style> block)
    • Tables for layout (Outlook compat)
    • Max width 600px
    • No position, no flexbox, no grid
    • Single CTA, prominent

Trigger Examples

  • “Build a property listing page for invest.reri.co” → static HTML, full editorial layout
  • “RERI investor deal card React component” → 21st.dev compound workflow with reri-brand tokens
  • “Email template for new property alerts” → inline-CSS table-based email
  • “Investor deck slide showing portfolio performance” → editorial print-style HTML

Reference Materials

  • DESIGN.md (this directory) — full 9-section token system
  • openclaw-dcc DESIGN.md — sister skill, different aesthetic (warm professional vs investor editorial)
  • VoltAgent/awesome-claude-design Stripe.md — for “investor-grade polish” patterns
  • rohitg00 editorial family DESIGN.md files — for serif typography choices

Graph View