Imported from SamGrah/LampShack (
AGENTS.md). Install upstream withnpx skills add SamGrah/LampShack. Copyright stays with the author.
AGENTS.md
Marketing site for The Lamp Shack, a one-person lamp/lighting repair business in Waterford, MI. Static Astro site deployed to Netlify at https://www.thelampshack.com. Content rarely changes; treat edits as production changes to a live small-business site.
Commands
npm install— install depsnpm run dev— dev server atlocalhost:4321(note: 4321, not Astro's old 3000)npm run build— production build todist/npm run previewis defined but does not work: the@astrojs/netlifyadapter rejectsastro preview. To eyeball a build, serve the static output instead (e.g.npx serve dist).npm run styles— compile everysrc/styles/less/*.lessto its matching.css(lessc --math=always). Run after editing any.less.npm run shots— build, then screenshot every page at mobile + desktop intoscreenshots/(see Visual verification).npm run screenshotcaptures without rebuilding.- No test or lint scripts exist.
npm run astro -- checktypechecks (@astrojs/check+typescriptare indevDependencies).
Styling: LESS is the source, CSS is generated — do NOT hand-edit CSS
This is the easiest mistake to make here:
- Astro pages/components import the compiled files in
src/styles/css/*.css. - The editable source is
src/styles/less/*.less. Each.lesshas a matching.css. - The maintainer historically compiled via the Koala GUI app (
src/styles/less/koala-config.jsonmaps/less->/css). There is now alsonpm run styles, which runslesscon everysrc/styles/less/*.lessinto the matchingsrc/styles/css/*.css. - If you edit a
.cssdirectly it will be silently overwritten next time someone recompiles. Edit the.lessfile, then runnpm run styles(ornpx lessc src/styles/less/<name>.less src/styles/css/<name>.cssfor one file). The.lessuses LESS math like16/16rem, so it must be compiled, not copied. - The committed
.cssis currently out of sync with the.lesssources (some committed CSS still contains raw, un-compiled math like388/16remand is missing rules present in the.less). Sonpm run stylesproduces a large diff that is mostly the LESS catching up, not your change. After editing a.less, review the diff and commit only your intended files/hunks; don't blindly commit the full mass recompile unless that cleanup is the goal. core-stylesanddarkare global (imported inBasePage.astro); each page imports its own page CSS (index,portfolio,reviews,contact,about).
Architecture
- Pages:
src/pages/*.astro(index,portfolio,reviews,contact). Each wrapssrc/components/BasePage.astro. BasePage.astrois the HTML shell:<head>meta/OG tags, favicons, AstroClientRouter(view transitions), plus inline Google Analytics (G-EB6NHTX4M3) and MS Clarity scripts. Edit site-wide meta/analytics here.- Components:
NavBar,Footer,ReviewQuote,Modal. - Images in
src/assets/images/are imported and served through Astro's<Image>(optimized at build).public/holds raw assets served as-is (favicons, fonts,robots.txt, logo SVGs). src/assets/andsrc/styles/css/about.cssexist for anaboutpage that currently lives inunused/about.astro(not routed). Leaveunused/alone unless asked to restore the page.
Internal links use .html extensions
Nav/footer/CTA links point to /contact.html, /portfolio.html, etc. (e.g. NavBar.astro, index.astro:23). Astro routes these pages as /contact. Keep the existing .html convention when adding links so they stay consistent; if a link 404s in dev, that's the cause. Don't "fix" them individually without checking the whole site.
Deployment
- Adapter:
@astrojs/netlify(astro.config.mjs).siteis set tohttps://www.thelampshack.com;@astrojs/sitemapgenerates the sitemap, andclientPrerender+prefetchAllare enabled. - Deploy is Netlify Git-based (push to deploy).
.netlify/is local-only state and gitignored — never commit it. tsconfig.jsonextendsastro/tsconfigs/strict.
Sitewide design system
The visual system lives in src/styles/less/core-styles.less (:root vars). Match it when adding or restyling anything; don't invent new colors/spacing. Edit the .less, then npm run styles.
- Color (CSS vars):
--primary #853A3A(maroon — the single accent),--secondary #E4A95F(gold),--headerColor #1a1a1a,--bodyTextColor #4E4B66,--bodyTextColorWhite #FAFBFC. Dark surfaces (footer, banner overlay) use#1a1a1a. Flat card surfaces use#F0F0F0. Reference vars (var(--primary)), never hardcode these hexes. - Type: Roboto (400/700/900), local-hosted from
/fonts. Scale vars:--topperFontSize,--headerFontSize,--bodyFontSize(1rem / 1.5em line-height). LESS usespx/16remmath, so it must be compiled. - Eyebrow + heading:
.cs-topperis the uppercase, letter-spaced, maroon eyebrow above a section title;.cs-titleis the weight-900 header. Every content section opens with topper → title (+ optional.cs-text). Don't leave a.cs-topperempty — give it real copy or omit it. - Section pattern:
#section { padding: var(--sectionPadding) }→.cs-container(max-width ~1280/16rem, centered) →.cs-content(flex column holding topper/title/text). Reviews, contact, portfolio, and the homepage all follow this. - Cards (flat-gray pattern): the review cards (
#reviews-607 .cs-item) and the contact hours card (.cs-info-card) are the canonical card: background#F0F0F0, no shadow, no border, no border-radius, generousclamp()padding, left-aligned content. Reuse this for any new card; don't add shadows/radius/borders to it. - Button:
.cs-button-solid— solid maroon, white text, weight 700, with a black wipe-fill on hover (&:beforewidth 0→100%). - Interior banner:
#banner-712is the interior-page hero (dark image overlay, gradient on tablet,.cs-int-title). Every non-home page starts with it. - Motifs: maroon is the one accent — spend boldness there and keep everything else quiet. The homepage hero has an angled white-triangle motif (
#hero-81pseudo-elements); it's homepage-specific, not a global device. - Dark mode is wired via
body.dark-mode(toggle in nav, styles indark.less+ per-page overrides). Mirror any new color into the dark-mode rules.
Frontend design skill
The Anthropic frontend-design skill is installed at .opencode/skills/frontend-design/ and registered via opencode.json. Load it (skill tool) before any non-trivial visual/UI work — new sections, restyling, or layout changes — to keep the site distinctive rather than templated.
Visual verification
The frontend-design skill asks you to critique your work visually. Two ways to do that here:
- Automated screenshots (no manual steps):
npm run shotsbuilds and captures every page at mobile (375×812) and desktop (1440×900) intoscreenshots/(gitignored).scripts/screenshot.mjsservesdist/via a tiny built-in Node server and drives headless Chromium through Playwright. One-time setup:npx playwright install chromium. Inspect the PNGs (Read tool) to judge layout/spacing/type. This cannot exercise JS interactions (hover, the gallery lightbox). - Interactive (for JS behavior): connect the Browser MCP tab (click the Browser MCP extension → Connect), run
npm run dev, and drivelocalhost:4321. Required for things a static screenshot can't show, e.g. opening/zooming/closing the portfolio gallery.
npm run preview does not work (the Netlify adapter rejects astro preview); use the two paths above instead.
Subagents
Two project subagents are defined in .opencode/agent/ for cost/efficiency:
recon(haiku, read-only) — codebase discovery and mechanical verification (finding selectors, dead refs, inline-style inventories, diff/grep checks). Returns compact findings; never edits or commits.harness(haiku) — runs build/screenshot commands and reports artifact paths/errors; never edits, commits, or judges visual quality.
Delegate discovery and build/screenshot runs to these; keep design decisions, code authoring, and visual judgment in the primary (stronger) model.