Skip to content

sethtipton/skills

BranchesTags

Repository files navigation

Skills

This repo contains three active Codex workspaces:

  • /Users/sethtipton/Documents/Sites/skills/capture-website-assets
  • /Users/sethtipton/Documents/Sites/skills/daily-frontend-study-guide
  • /Users/sethtipton/Documents/Sites/skills/job-watch

The automation-heavy workspaces are repo-first. Their scripts, prompts, skills, config, and versioned automation files live here and should stay aligned with the live Codex app automation files in ~/.codex/automations/.

Repo Layout

skills/
├── AGENTS.md
├── capture-website-assets/
├── daily-frontend-study-guide/
└── job-watch/

Daily Frontend Study Guide

Purpose:

  • collect fresh front-end signals
  • build a dated brief
  • generate exactly four lessons
  • validate and persist the lesson outputs
  • write a standalone dated HTML report

Scheduled behavior:

  • unattended
  • deterministic collection only
  • no Playwright, DevTools, browser fallback, or report-opening dependency

Primary docs:

Job Watch

Purpose:

  • build a candidate profile
  • fetch broadly from deterministic allowed sources
  • verify, hard-gate, score, and report jobs
  • keep dated artifacts that make unattended auditing possible

Two modes:

  • scheduled-safe deterministic workflow for the 8 AM unattended run
  • separate manual browser-assisted enrichment workflow for repair or extra coverage

Primary docs:

Live Automation Sync

Repo versions to keep current:

Live app-managed files:

Manual Testing

Daily study:

cd /Users/sethtipton/Documents/Sites/skills/daily-frontend-study-guide
npm install
npm run study-collect -- --date YYYY-MM-DD
npm run study-brief -- --date YYYY-MM-DD
npm run daily-study -- --date YYYY-MM-DD --input-markdown-file /absolute/path/to/draft.md

In the Codex app, Run now should execute the same deterministic daily-study path and write the same dated artifacts.

Daily thread command:

  • Run the daily front-end study workflow using daily-frontend-study-guide/prompts/deep.md

Job watch scheduled-safe:

cd /Users/sethtipton/Documents/Sites/skills/job-watch
npm install
JOB_WATCH_EXECUTION_POLICY=scheduled_safe npm run job-watch

In the Codex app, Run now should execute the same scheduled-safe deterministic path, not the manual browser-assisted one.

Job watch manual browser-assisted enrichment:

cd /Users/sethtipton/Documents/Sites/skills/job-watch
npm run browser:codex-profile
npm run job-import -- --input /absolute/path/to/import.json
npm run job-evaluate
npm run job-report

Before that manual enrichment run:

  • sign into LinkedIn in the dedicated browser window opened by npm run browser:codex-profile
  • keep that browser window open while Codex uses the manual browser-assisted prompt

Daily thread commands:

  • Run the job watch using job-watch/prompts/deep.md
  • Run the manual browser-assisted job-watch enrichment using job-watch/prompts/manual-browser-assist.md

Credential-dependent scheduled-safe sources:

  • USAJOBS needs USAJOBS_API_KEY plus USAJOBS_USER_AGENT or JOB_WATCH_CONTACT_EMAIL
  • Adzuna needs ADZUNA_APP_ID and ADZUNA_APP_KEY

What capture-website-assets Does

For a given URL, it will:

  • open the page in isolated headless Chromium
  • set the browser viewport before capture
  • wait for the page to settle
  • try to remove common cookie banners, popups, and chat widgets
  • scroll once to trigger lazy-loaded content
  • save a full-page screenshot as optimized WebP
  • save a top-section crop as optimized WebP
  • resize outputs to your target width

Setup

Install dependencies inside the skill folder:

cd /Users/sethtipton/Documents/Sites/skills/capture-website-assets
npm install
npx playwright install chromium

Optional: expose the skill to Codex directly from this repo with a symlink:

ln -s /Users/sethtipton/Documents/Sites/skills/capture-website-assets \
  /Users/sethtipton/.codex/skills/capture-website-assets

Basic Usage

Run from the skill directory:

cd /Users/sethtipton/Documents/Sites/skills/capture-website-assets
npm run capture -- "https://example.com"

Default behavior:

  • viewport width: 1440
  • viewport height: 1100
  • top crop height: 1000
  • output width for both images: 1200
  • output format: webp

Default output folder:

./screenshots/<slug>/

Example output names for https://example.com:

example-comhome-full.webp
example-comhome-top.webp

Control the Browser Size

Use these flags:

  • --browser-width <px>: viewport width before capture
  • --browser-height <px>: viewport height before capture
  • --theme <mode>: browser color scheme for sites that respond to prefers-color-scheme; use light, dark, or auto

Example:

npm run capture -- "https://example.com" \
  --browser-width 1440 \
  --browser-height 1100 \
  --theme dark

Use --browser-width to control the layout breakpoint. This is the main setting for how the site renders.

Use --browser-height to control the initial visible viewport. This can affect sticky headers, lazy-loading, and how some popups appear.

Control the First Screenshot Height

There are two screenshots:

  • the full-page image: captures the entire rendered page height automatically
  • the top-section image: crops the top part of the page using --top-height

Use:

  • --top-height <px>: crop height for the top screenshot before resize

Example for a top 1000px crop:

npm run capture -- "https://example.com" \
  --browser-width 1440 \
  --browser-height 1100 \
  --theme dark \
  --top-height 1000

Example for a taller hero crop:

npm run capture -- "https://example.com" \
  --browser-width 1600 \
  --browser-height 1200 \
  --theme light \
  --top-height 1400

Control Final Output Size

Use these flags:

  • --output-width <px>: set both output images to the same width
  • --full-output-width <px>: override width for full-page only
  • --top-output-width <px>: override width for top crop only

Example, both outputs at 1200px wide:

npm run capture -- "https://example.com" \
  --browser-width 1440 \
  --top-height 1000 \
  --output-width 1200

Example, full-page at 1600px wide and top crop at 1200px wide:

npm run capture -- "https://example.com" \
  --browser-width 1600 \
  --browser-height 1200 \
  --top-height 1000 \
  --full-output-width 1600 \
  --top-output-width 1200

Control File Names and Output Folder

Use these flags:

  • --slug <value>: folder and default file-name base
  • --output-dir <path>: custom output folder
  • --full-name <name>: full-page file name stem
  • --top-name <name>: top-image file name stem

Example:

npm run capture -- "https://example.com" \
  --slug example-home \
  --output-dir ./screenshots/example-home \
  --full-name example-home-full \
  --top-name example-home-top

This will produce:

./screenshots/example-home/example-home-full.webp
./screenshots/example-home/example-home-top.webp

Example Commands

Standard desktop capture

cd /Users/sethtipton/Documents/Sites/skills/capture-website-assets

npm run capture -- "https://example.com" \
  --browser-width 1440 \
  --browser-height 1100 \
  --top-height 1000 \
  --output-width 1200 \
  --slug example-home

Larger desktop capture for more detail

npm run capture -- "https://example.com" \
  --browser-width 1600 \
  --browser-height 1200 \
  --top-height 1200 \
  --full-output-width 1600 \
  --top-output-width 1200 \
  --slug example-desktop

Case-study asset set with explicit names

npm run capture -- "https://example.com" \
  --browser-width 1440 \
  --browser-height 1100 \
  --top-height 1000 \
  --output-width 1200 \
  --full-name example-fullpage \
  --top-name example-hero \
  --output-dir ./screenshots/example-case-study

Handle Stubborn Popups or Chat Widgets

The script already removes many common selectors, but some sites need custom rules.

Use:

  • --wait-ms <ms>: extra wait time after load and cleanup
  • --config <path>: JSON file with custom selectors and blocked request patterns

Example with extra wait:

npm run capture -- "https://example.com" \
  --browser-width 1440 \
  --top-height 1000 \
  --wait-ms 1500

Example config file:

{
  "blockRequestPatterns": ["intercom", "drift"],
  "hideSelectors": [".newsletter-popup", ".sticky-chat-button"],
  "clickSelectors": [".cookie-accept", ".modal-close"],
  "waitForSelectors": ["main"],
  "waitForTimeoutMs": 1000
}

Save that as site-overrides.json, then run:

npm run capture -- "https://example.com" \
  --browser-width 1440 \
  --top-height 1000 \
  --config ./site-overrides.json

See also:

Full Flag Reference

npm run capture -- "<url>" \
  --browser-width <px> \
  --browser-height <px> \
  --theme <light|dark|auto> \
  --top-height <px> \
  --output-width <px> \
  --full-output-width <px> \
  --top-output-width <px> \
  --quality <0-100> \
  --wait-ms <ms> \
  --slug <value> \
  --output-dir <path> \
  --config <path> \
  --full-name <name> \
  --top-name <name>

Use From Codex

Because the skill is linked into ~/.codex/skills, you can prompt Codex with requests like:

Use capture-website-assets to capture https://example.com at 1440px browser width, 1100px browser height, with a 1000px top crop. Save both outputs at 1200px wide.

Or:

Use capture-website-assets to capture https://example.com. If cookie banners or chat widgets remain, create a site override config and rerun.

Recommended First Run

cd /Users/sethtipton/Documents/Sites/skills/capture-website-assets

npm run capture -- "https://example.com" \
  --browser-width 1440 \
  --browser-height 1100 \
  --top-height 1000 \
  --output-width 1200 \
  --slug example-home

About

Agent Skills

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages