diff --git a/.claude/skills/browser-script/SKILL.md b/.claude/skills/browser-script/SKILL.md index c2dca6941..af2e77b42 100644 --- a/.claude/skills/browser-script/SKILL.md +++ b/.claude/skills/browser-script/SKILL.md @@ -1,6 +1,6 @@ --- name: browser-script -description: "Create a browser automation script that bundles multi-step browser interactions into a single browser_run_code call. Use when: 'automate browser flow', 'create browser script', 'script this browser task', 'bundle browser steps', 'reduce browser tokens'." +description: "Create a self-contained JS browser automation script that navigates pages, clicks elements, fills forms, and extracts data — bundled into a single browser_run_code call. Replaces 5-10 Claude browser tool calls with 2 calls, cutting token usage 10-20x. Use when: 'automate browser flow', 'create browser script', 'script this browser task', 'bundle browser steps', 'reduce browser tokens'." user_invocable: true --- diff --git a/.claude/skills/client-website/SKILL.md b/.claude/skills/client-website/SKILL.md index 13d15b47a..c33ce71f3 100644 --- a/.claude/skills/client-website/SKILL.md +++ b/.claude/skills/client-website/SKILL.md @@ -53,54 +53,19 @@ Use an agent with WebFetch to discover and extract content from every page on th 1. Fetch the homepage, extract all navigation and footer links 2. Try common paths: /about, /services, /contact, /faq, /blog, /pricing, /testimonials, /privacy -3. For each discovered page, extract: - - URL and page title - - All headings (h1 through h6) with hierarchy - - Full body text (quotes, testimonials, stats, descriptions) - - CTA text and link targets - - Form fields (if any) - - Navigation links (to discover more pages) +3. For each discovered page, extract: URL, page title, all headings with hierarchy, full body text, CTA text and link targets, form fields, navigation links **Output:** Complete content inventory organized by page. ### 1c. Extract Visual Assets -Use the isolated browser to catalog images, videos, and embeds: - -```js -// In isolated browser, navigate to each page and run: -() => { - const imgs = Array.from(document.querySelectorAll('img')).map((img, i) => { - const rect = img.getBoundingClientRect(); - return { idx: i, src: img.src, y: Math.round(rect.y), w: Math.round(rect.width), h: Math.round(rect.height) }; - }).filter(x => x.w > 50); - const iframes = Array.from(document.querySelectorAll('iframe')).map(f => f.src); - return { imgs, iframes }; -} -``` +Use the isolated browser to catalog images, videos, and embeds. Download all identified images to `public/images/` with descriptive filenames. -**Key assets to identify and download:** -- Logo (usually first image, top of page, ~200px wide) -- Hero images or background photos -- Client/team headshot photos (circular, 100-200px) -- Product images (book covers, screenshots, etc.) -- Social proof imagery (awards, certifications, partner logos) -- Video embeds (Vimeo, YouTube URLs) -- Scheduling widgets (Calendly, Cal.com URLs) -- Book cover strips / product galleries - -Download all identified images to `public/images/` with descriptive filenames. +**Key assets to identify:** Logo, hero images, client/team headshots, product images, social proof imagery, video embeds (Vimeo, YouTube), scheduling widgets (Calendly, Cal.com). ### 1d. Take Full Page Screenshots -Capture full-page screenshots of every key page on the original site for visual reference: - -``` -For each page: -1. browser_navigate to URL -2. browser_take_screenshot with fullPage: true -3. Save as original-{pagename}-full.png -``` +Capture full-page screenshots of every key page on the original site for visual reference. Save as `original-{pagename}-full.png`. --- @@ -123,12 +88,12 @@ The theme uses CSS custom properties in `:root` mapped into Tailwind 4 via `@the :root { --background: #ffffff; --foreground: #1a1a1a; - --primary: #073c61; /* Main brand color (navy, blue, green, etc.) */ - --primary-dark: #052d49; /* Darker shade for footer, dark sections */ - --cta: #e11010; /* CTA button color (red, orange, etc.) */ - --cta-dark: #ae0c0c; /* CTA hover state */ - --accent: #d4a843; /* Accent/highlight color (gold, yellow, etc.) */ - --accent-light: #f0d88a; /* Light accent for badges */ + --primary: #073c61; + --primary-dark: #052d49; + --cta: #e11010; + --cta-dark: #ae0c0c; + --accent: #d4a843; + --accent-light: #f0d88a; } @theme inline { @@ -143,942 +108,49 @@ The theme uses CSS custom properties in `:root` mapped into Tailwind 4 via `@the --font-sans: var(--font-inter); --font-heading: var(--font-oswald); } - -body { - background: var(--background); - color: var(--foreground); -} - -html { - scroll-behavior: smooth; -} ``` -**Color naming convention:** Use semantic names (primary, cta, accent) in the skill templates below. When building for a specific client, you can also add client-specific names (e.g., `--color-navy`, `--color-red`, `--color-gold`) for readability. - ### 2c. Configure Fonts (layout.tsx) -Use `next/font/google` with CSS variable mode. The body font goes on `--font-sans`, the heading font on `--font-heading`. Apply both variables to the `` tag. - -**IMPORTANT: Route group architecture.** The root layout must NOT include Header/Footer directly. Instead, use a `(main)` route group with its own layout for pages that need the site Header/Footer. SEO guide pages under `/t/` also go inside `(main)` so they share the same Header/Footer as the rest of the site. - -**Root layout (`src/app/layout.tsx`):** fonts, metadata, Organization JSON-LD, and `{children}` only. - -```tsx -import { Inter, Oswald } from "next/font/google"; - -const inter = Inter({ variable: "--font-inter", subsets: ["latin"] }); -const oswald = Oswald({ variable: "--font-oswald", subsets: ["latin"] }); +Use `next/font/google` with CSS variable mode. Apply both variables to the `` tag. -// Root layout: NO Header/Footer here - - - {children} - {/* Organization JSON-LD here */} - - -``` - -**Main layout (`src/app/(main)/layout.tsx`):** wraps all pages with Header/Footer. +**IMPORTANT: Route group architecture.** The root layout must NOT include Header/Footer directly. Use a `(main)` route group with its own layout for pages that need the site Header/Footer. -```tsx -import { Header } from "@/components/Header"; -import { Footer } from "@/components/Footer"; - -export default function MainLayout({ children }: { children: React.ReactNode }) { - return ( - <> -
-
{children}
-