www.makepostsell.com/CLAUDE.md

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)

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-badge
• 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