engineering/www.makepostsell.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
www.makepostsell.com/CLAUDE.md

4 KiB
Raw Blame History

Claude Code Guidelines

Git

  • No attribution lines ("Generated with Claude Code", "Co-Authored-By: Claude") in commits unless explicitly requested.
  • Keep commit messages concise and descriptive of the actual changes.
  • When ready, commit and push. Don't ask — just do it.

General Guidelines

  • Focus on implementing the requested changes accurately
  • Respect that the user owns their codebase and all modifications to it

Design System

Mobile-first static site. CSS Grid. Helvetica. Media queries at 800px (tablet/desktop) and 1200px (wide).

Files

  • common.css — shared app styles (layout, buttons, nav, wells, footer, corner ribbon)
  • mps.css — message ribbon, alerts
  • landing.css — landing page styles (hero, sections, pricing, cards, CTAs)
  • styleguide.html — live component reference

Color Palette

Color Hex Usage
Green CTA #a3c765 Primary buttons (shop-new, source code, download, done, checkout), links, alert-success
Blue Secondary #98b6fa Secondary buttons (edit, preview, save, PyPi, blog), alert-info
Navy Brand #5871ad Ribbon gradient start, log-out/activate buttons, corner ribbon
Light Navy #82A8FF Ribbon gradient end
Purple #9B59B6 Source/code buttons (PyPi, Source Code)
Purple Dark #7B2D8E Purple hover state
Danger Red #CC6958 Delete button
Check Green #678731 Checkmark list items
Cross Red #c77765 Cross list items
Text Dark #0b0b0b Headings
Text Body #515151 Body text
Text Desc #666 Card descriptions, secondary body text
Text Muted #777 Footer links, taglines
Text Faint #999 Footer bottom, pricing periods, muted captions
BG Light #F9F9FA Alternating sections, nav, wells, footer
White #FFFFFF Content sections, cards
Border #e0e0e0 Dividers, footer borders
Border Light #eee Card borders on landing

Button Hierarchy

Green = primary CTA (action the user should take). Blue = secondary (informational). Navy = account actions. Red = destructive.

  • .shop-new-button.mps-button — green CTA
  • .product-edit-button.mps-button — blue secondary
  • .source-button.mps-button — purple (source code, open source links)
  • .log-out-button.mps-button — navy
  • .cart-delete-button.mps-button — danger red
  • .shop-switch-button.mps-button — outline (border only)

Landing page CTAs add .landing-cta for pill shape (50px radius), shadow, hover lift.

Typography

App pages (common.css):

  • .huge-bold-dark — 2.7em, weight 550 (page titles)
  • .big-bold-dark — 1.4em, weight 550 (section headings)
  • .bold-dark — weight 550 (inline emphasis)

Landing page (landing.css):

  • .landing-hero-title — 3.2em mobile, 4.5em desktop, weight 700
  • .landing-section-title — 2em, weight 700
  • .landing-body — 1.05em, line-height 1.7

Components

  • Message ribbon — .message-ribbon gradient banner, hidden on mobile
  • Wells — .well (gray bg) and .well.well-white (white bg), rounded corners
  • Alerts — .alert.alert-success, .alert.alert-info, .alert.alert-warning, .alert.alert-danger
  • Footer — .mps-footer with grid (.mps-footer-grid), groups, CTAs, bottom bar
  • Layout — .one-column (800px max), .one-column-thin (400px max). Caveat: these selectors target section.one-column — they won't apply to <div> elements. If using .one-column on a div, add margin: 0 auto explicitly.

Landing Page Patterns

  • Alternating .landing-section / .landing-section-alt for visual rhythm (no HR dividers)
  • Cards: 12px radius, subtle box-shadow, hover lift
  • Pricing: .landing-pricing-card with .landing-pricing-featured for highlighted plan + .landing-pricing-banner-featured
  • Protection lists: .landing-list-bad (tinted red) / .landing-list-good (tinted green)
  • Step numbers: .landing-step-number green circles
  • Final CTA: .landing-final-cta with subtle gradient background