Imported from dhornbein/smallplanetlaw (AGENTS.md). Install upstream with npx skills add dhornbein/smallplanetlaw. Copyright stays with the author.

AGENTS.md - Small Planet Law LLC Website

Project Overview

Small Planet Law LLC is a holistic estate planning law firm in Denver, CO that integrates environmental consciousness into both operations and client services. This Astro-based website serves conscientious families (30-70 years old, middle class to mass affluent) who care deeply about their loved ones, legacy, and environmental stewardship.

Brand Promise: Estate planning that feels human, meaningful, and good for the Earth.

Issues

• header should indicate that the blog is selected when on a single post page
• add a next a previous post navigation section at the bottom of each blog post page
• between the mobile breakpoint and ~868px the header wraps many of the links and breaks
• blog post should have a nice print style

Key Features

Core Pages (Phase 1 - Launch)

• Home: Hero section, firm differentiators, services preview, green approach, testimonials, newsletter signup
• About: Firm story, Bobbie's bio, contact form
• Services: Values/approach, planning features, green estate planning options
• Blog: Content management with categories/tags for estate planning and sustainability topics
• Contact: Contact info, forms, scheduling integration

Technical Features

• Astro static site generator with component-based architecture
• Tailwind CSS v4 for modern, utility-first styling
• Responsive design optimized for families and professionals
• Newsletter signup integration
• Contact forms throughout site
• Content collections for blog/content management
• Built-in SEO optimization for Denver estate planning market
• Scheduling system integration with cal.com
• View transitions for smooth page navigation
• Optimized image handling with Astro's built-in <Image /> component
• Pull Wordpress blog posts via REST API, on content update a webhook triggers a rebuild of the Astro site to keep blog content in sync
• Use Wordpress NPM package to manage Wordpress post styles within Astro (@wordpress/block-library)

Brand Elements

• Colors:
  • Hunter Green: #386641 (100: #0b140d, 200: #16291a, 300: #223d27, 400: #2d5234, 500: #386641, 600: #51935e, 700: #77b483, 800: #a4cdac, 900: #d2e6d6)
  • Olivine: #90ba78 (100: #1c2815, 200: #38512a, 300: #54793e, 400: #70a253, 500: #90ba78, 600: #a6c893, 700: #bdd5ae, 800: #d3e3c9, 900: #e9f1e4)
  • Outer Space: #49575b (100: #0f1112, 200: #1d2324, 300: #2c3436, 400: #3a4548, 500: #49575b, 600: #677c81, 700: #8c9da2, 800: #b2bec1, 900: #d9dee0)
  • Honeydew: #daf5e1 (100: #144922, 200: #289244, 300: #49cd6c, 400: #92e1a7, 500: #daf5e1, 600: #e2f7e8, 700: #e9f9ee, 800: #f1fbf3, 900: #f8fdf9)
  • Celadon: #B1CFA0 (50: #f1f6ee, 100: #e3eedd, 200: #c8ddbb, 300: #accc99, 400: #90bb77, 500: #74aa55, 600: #5d8844, 700: #466633, 800: #2f4422, 900: #172211, 950: #10180c)
  • Dutch White: #ede0bf (100: #433513, 200: #866a26, 300: #c79f3a, 400: #dac07d, 500: #ede0bf, 600: #f1e6cc, 700: #f4ecd9, 800: #f8f3e6, 900: #fbf9f2)
  • Redwood: #b44143 (100: #240d0d, 200: #481a1b, 300: #6c2728, 400: #903435, 500: #b44143, 600: #c76365, 700: #d58a8b, 800: #e3b1b2, 900: #f1d8d8)
• Tone: Warm, conversational, reassuring, values-driven
• Visual Style: Natural imagery, Colorado landscapes, family-focused
• Logo: Circular mark suggesting planet/continuity with leaf motif
• Typography: Lora for headings; Source Sans Pro for body text

Astro Best Practices

Project Structure

src/
├── components/          # Reusable Astro/framework components
│   ├── layout/         # Header, Footer, Navigation
│   ├── ui/             # Buttons, Cards, Forms
│   └── sections/       # Hero, Testimonials, etc.
├── layouts/            # Page layouts
│   └── Layout.astro    # Base layout with SEO
├── pages/              # File-based routing
│   ├── index.astro     # Home page
│   ├── about.astro     # About page
│   ├── services.astro  # Services page
│   ├── contact.astro   # Contact page
│   └── blog/           # Blog pages
│       ├── index.astro
│       └── [slug].astro
├── content/            # Content collections
│   ├── config.ts       # Collection schemas
│   └── blog/           # Markdown/MDX blog posts
├── styles/             # Global styles
│   └── global.css      # Tailwind imports
└── assets/             # Images, icons, etc.

Content Collections

• Use Astro's Content Collections API for type-safe content management
• Define schemas in src/content/config.ts for blog posts and services
• Leverage Zod validation for content frontmatter
• Use .md or .mdx files for rich content with component support

Performance Optimization

• Zero JavaScript by default (Astro Islands architecture)
• Use client:* directives strategically for interactive components:
  • client:load - hydrate immediately
  • client:idle - hydrate when browser idle
  • client:visible - hydrate when in viewport
• Implement Astro's built-in image optimization with <Image /> and <Picture />
• Use View Transitions API for smooth navigation without full page reloads
• Leverage partial hydration to ship minimal JavaScript

SEO & Meta Tags

• Create reusable SEO component for consistent meta tags
• Use Astro's built-in <SEO> component or custom implementation
• Implement JSON-LD structured data for local business
• Add Open Graph and Twitter Card meta tags
• Generate sitemap and robots.txt automatically

Component Strategy

• Prefer .astro components for static content (zero runtime overhead)
• Use framework components (React, Vue, Svelte) only when interactivity needed
• Create layout components for consistent page structure
• Build reusable UI components for buttons, cards, forms
• Use slots for flexible component composition

Tailwind CSS v4 Best Practices

CSS-First Configuration (v4)

• Use the new @theme directive in your CSS for customization:

  @import "tailwindcss";
  
  @theme {
    --font-family-display: "Satoshi", sans-serif;
    --color-earth-green: oklch(45% 0.08 145);
    --color-neutral-warm: oklch(97% 0.01 85);
    --color-deep-slate: oklch(25% 0.02 210);
    --breakpoint-3xl: 1920px;
  }

• Use modern CSS features like oklch() for wide-gamut colors
• All theme values automatically available as CSS variables

Modern CSS Features (v4)

• Native cascade layers: Proper @layer rules for better specificity control
• Container queries: Built-in support with @min-* and @max-* variants
• Composable variants: Combine variants like group-has-focus:opacity-100
• Color-mix for opacity: Easier opacity modifiers with CSS variables
• Built-in nesting: No plugins needed for nested CSS
• Zero-config content detection: Automatic template file discovery

Component & Utility Strategy

• Embrace utility-first approach in Astro components
• Use native CSS nesting within <style> blocks in .astro files for component-specific styles
• For long or repeating groups of utility classes, define named class selectors and use @apply to group shared utility patterns
• Name elements logically and apply class names for better readability and maintainability. Use BEM conventions where appropriate
• Use arbitrary values with CSS variables: p-[calc(var(--spacing-6)-1px)]
• Create component classes only for truly repeated patterns
• Leverage Tailwind's responsive prefixes: sm:, md:, lg:, xl:, 2xl:
• Use new not-* variant for negative conditions
• Compose complex variants: group-not-has-peer-data-active:underline

Responsive Design

• Mobile-first approach using Tailwind's responsive prefixes
• Container queries for component-level responsive design
• Ensure proper color contrast for accessibility (WCAG AA minimum)
• Touch-friendly interaction areas (min 44x44px)

Development Notes

Target Audience Considerations

• Optimize for users 30-70 years old (consider font sizes, contrast)
• Ensure professional appearance for legal services
• Balance environmental messaging without being preachy
• Clear navigation and calls-to-action for conversion

SEO Strategy

• Target keywords: "Denver estate planning", "green estate planning", "holistic estate planning Colorado"
• Implement local SEO for Denver market
• Create valuable content around estate planning education
• Optimize for "People also ask" queries related to estate planning

Integration Requirements

• Newsletter signup (platform TBD)
• Contact forms with proper validation
• Scheduling system integration
• Analytics implementation
• Social media integration (minimal, professional focus)