69 lines
No EOL
3 KiB
Markdown
69 lines
No EOL
3 KiB
Markdown
# 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) |