Claude Code Guidelines

Git Commit Messages

When creating git commits, it is inappropriate to claim credit or co-authorship for work that was requested by the user. The user is the author of their own code changes.

Do not add attribution lines like "Generated with Claude Code" or "Co-Authored-By: Claude" to commit messages unless explicitly requested by the user.

General Guidelines

Focus on implementing the requested changes accurately
Keep commit messages concise and descriptive of the actual changes made
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
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 (bold-dark, big-bold-dark, huge-bold-dark)
Text Body	`#515151`	Body text
Text Muted	`#777`	Footer links, taglines
Text Faint	`#999`	Footer bottom
BG Light	`#F9F9FA`	Page background, nav, wells, footer
White	`#FFFFFF`	Content sections, well-white
Border	`#e0e0e0`	Dividers, footer borders

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)

Typography Classes

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

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)

3 KiB Raw Blame History