osborn 0.9.4 → 0.9.9

package/.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(ps:*)",
+      "Bash(osascript:*)",
+      "Bash(curl -s http://localhost:3000)"
+    ]
+  }
+}

package/.claude/skills/browser-apply/SKILL.md

@@ -0,0 +1,114 @@
+# Skill: Browser Apply — Step-by-Step Workday Application
+
+Automate Workday job applications interactively, one step at a time. Each step takes a screenshot, confirms what's on screen, fills the current page, and waits before proceeding.
+
+**This skill uses the Playwright MCP tools** (`mcp__playwright__browser_*`) for direct browser control — no scripts needed.
+
+## When to Use
+- Any Workday ATS application (`*.wd1.myworkdayjobs.com`)
+- Any multi-step JS-heavy job application form
+- When you want visible, confirmable progress at each step
+
+## Key Principle: Step-by-Step, Not One Big Script
+
+Do NOT write a monolithic automation script. Instead:
+1. Navigate to the URL
+2. Take a screenshot — confirm what's on screen
+3. Fill only the current step's fields
+4. Take another screenshot — confirm fields filled correctly
+5. Ask the user "Ready for next step?" before clicking Next
+6. Click Next, wait for page load, screenshot again
+7. Repeat for each step
+
+This approach catches rendering issues, unexpected fields, and errors before they cascade.
+
+## Step-by-Step Execution Pattern
+
+### Step 0 — Open the browser
+Use: `mcp__playwright__browser_navigate` with the applyManually URL
+
+Then: `mcp__playwright__browser_take_screenshot` — show the user what loaded
+
+### Step 1 — Create Account / Sign In
+Take a snapshot with `mcp__playwright__browser_snapshot` to see element refs.
+Fill fields using `mcp__playwright__browser_fill_form` or individual `mcp__playwright__browser_type` calls.
+Screenshot to confirm. Then ask user before clicking Create Account / Sign In.
+
+### Step 2 — Start Application
+If "Start Your Application" screen appears with Apply Manually button:
+Screenshot it. Click "Apply Manually" using `mcp__playwright__browser_click`.
+Screenshot after.
+
+### Step 3 — My Information
+Snapshot → fill each field → screenshot → ask user before clicking Next.
+
+Fields to fill:
+- First Name, Last Name, Phone
+- Address, City, State (dropdown), Zip
+- Work authorization: Yes
+- Sponsorship: No
+
+### Step 4 — My Experience
+Snapshot → click Add for each job entry → fill title/company/dates/description → save each → screenshot.
+Then add education entries.
+Ask user before clicking Next.
+
+### Step 5 — Application Questions
+Snapshot to see all questions. Fill each one. **Always confirm salary expectation with user before filling** — never guess. Screenshot. Ask before Next.
+
+### Step 6 — Voluntary Disclosures
+Select "I do not wish to answer" / "Prefer not to disclose" for all. Screenshot. Ask before Next.
+
+### Step 7 — Self Identify
+Fill name and date. Select disability option. Screenshot. Ask before Next.
+
+### Step 8 — Review
+Screenshot the full review page. Confirm with user before clicking Submit.
+
+### Step 9 — Confirm submission
+Screenshot the confirmation dialog. Save it.
+
+## Candidate Data (Osborn Ojure)
+
+- Email: osbornojure@gmail.com
+- Password: Workday2026!
+- First: Osborn, Last: Ojure
+- Phone: 3127185561
+- Address: 1234 N Michigan Ave, Chicago, IL 60601
+
+Jobs:
+1. Meta API Consultant at Prehype / Audos — April 2024 to Present
+2. Full Stack Developer, Freelance — January 2016 to Present
+
+Education:
+1. A.S. Information Systems
+2. B.S. Psychology
+
+## Workday data-automation-id Selector Reference
+
+| Field | Selector |
+|---|---|
+| Email | `input[type="email"]` |
+| Password | `input[type="password"]` |
+| First name | `[data-automation-id="legalNameSection_firstName"]` |
+| Last name | `[data-automation-id="legalNameSection_lastName"]` |
+| Phone | `[data-automation-id="phone-number"]` |
+| Address | `[data-automation-id="addressSection_addressLine1"]` |
+| City | `[data-automation-id="addressSection_city"]` |
+| Zip | `[data-automation-id="addressSection_postalCode"]` |
+| Job title | `[data-automation-id="jobTitle"]` |
+| Company | `[data-automation-id="company"]` |
+| Description | `[data-automation-id="description"]` |
+| Next button | `[data-automation-id="bottom-navigation-next-btn"]` |
+| Create Account | `[data-automation-id="click_filter"][aria-label="Create Account"]` |
+
+## Critical Rules
+- headless: false always (Workday renders blank in headless)
+- Confirm salary with user before every submission — never auto-fill
+- After "You already applied to this job" error — that confirms a previous submission worked
+- Use `{ force: true }` on Workday buttons — overlay click filters block normal clicks
+- Always wait for networkidle or waitForSelector after navigation before interacting
+
+## Playwright Install Location
+Run scripts from: `/Users/newupgrade/Desktop/Developer/osborn/frontend`
+(playwright is in `node_modules` there)

package/.claude/skills/markdown-to-pdf/SKILL.md

@@ -0,0 +1,29 @@
+# Skill: Markdown to PDF
+
+Export Markdown documents as formatted PDF files.
+
+## When to use
+When the user wants to create a PDF from a Markdown file, spec, or research findings.
+
+## How to execute
+
+Option 1 — Using md-to-pdf (best quality):
+```bash
+npx --yes md-to-pdf "<MARKDOWN_PATH>"
+```
+This creates a PDF alongside the source file with the same name.
+
+Option 2 — Using pandoc (if available):
+```bash
+pandoc "<MARKDOWN_PATH>" -o "<OUTPUT_PATH>.pdf" --pdf-engine=wkhtmltopdf
+```
+
+Option 3 — Using markdown-pdf:
+```bash
+npx --yes markdown-pdf "<MARKDOWN_PATH>" -o "<OUTPUT_PATH>.pdf"
+```
+
+## Output
+- Save the PDF to the session workspace (e.g., `library/{name}.pdf`)
+- Confirm the output path and file size to the user
+- If the source is spec.md, name the output `spec-export.pdf`

package/.claude/skills/pdf-to-markdown/SKILL.md

@@ -0,0 +1,28 @@
+# Skill: PDF to Markdown
+
+Convert PDF documents to readable Markdown text.
+
+## When to use
+When the user provides a PDF file path and wants to read, search, or work with its contents.
+
+## How to execute
+
+Option 1 — Using the built-in Read tool:
+The Read tool can directly read PDF files. Use `pages` parameter for large PDFs (max 20 pages per request).
+
+Option 2 — Full extraction via CLI (for better formatting or batch processing):
+```bash
+npx --yes pdf-parse-cli "<PDF_PATH>"
+```
+
+Option 3 — Using pdftotext (if available):
+```bash
+pdftotext -layout "<PDF_PATH>" -
+```
+
+## Output
+Save the converted content to the session workspace as `library/{filename}.md` with:
+- Document title and source path at the top
+- Preserved heading structure where detectable
+- Tables converted to Markdown tables where possible
+- Page numbers as section markers

package/.claude/skills/playwright-browser/SKILL.md

@@ -0,0 +1,90 @@
+# Skill: Playwright Browser Automation
+
+Automate web browser interactions — navigate pages, click buttons, fill forms, take screenshots, and extract content.
+
+## When to use
+- Navigate to a URL and interact with it
+- Click buttons or links by their text or role
+- Fill form fields and submit data
+- Take screenshots of web pages
+- Extract text or structured data from pages
+- Automate multi-step web workflows (e.g. join a room, test a UI flow)
+
+## How to execute
+
+Uses `@playwright/cli` via npx — no global install needed. Token-efficient: uses element references (e.g. `e15`) instead of pixel coordinates.
+
+### First time only — install browser binaries
+```bash
+npx playwright install chromium
+```
+
+### Step 1 — Open a URL
+```bash
+npx @playwright/cli open https://localhost:3000
+```
+
+### Step 2 — Get page structure and element references
+```bash
+npx @playwright/cli snapshot
+```
+Returns an accessibility tree with element IDs like e1, e2, e15. Use these in subsequent commands.
+
+### Step 3 — Interact with elements
+```bash
+npx @playwright/cli click e15
+npx @playwright/cli fill e3 "some text"
+npx @playwright/cli press e3 Enter
+npx @playwright/cli select e7 "optionValue"
+npx @playwright/cli check e9
+npx @playwright/cli hover e12
+```
+
+### Take a screenshot
+```bash
+npx @playwright/cli screenshot --path=/tmp/page.png
+```
+
+### Take a screenshot at a specific viewport size (mobile check)
+```bash
+npx @playwright/cli screenshot --viewport-size=375,812 --path=/tmp/page-mobile.png
+```
+Common mobile sizes: `375,812` (iPhone 14), `390,844` (iPhone 14 Pro), `412,915` (Pixel 7), `768,1024` (iPad).
+
+### Close the browser
+```bash
+npx @playwright/cli close
+```
+
+### Named sessions (persistent state across commands)
+```bash
+npx @playwright/cli -s=myflow open https://localhost:3000
+npx @playwright/cli -s=myflow snapshot
+npx @playwright/cli -s=myflow fill e3 "abc123"
+npx @playwright/cli -s=myflow click e5
+npx @playwright/cli -s=myflow close
+```
+
+## Complete example — join Osborn voice room
+```bash
+npx @playwright/cli open http://localhost:3000
+npx @playwright/cli snapshot
+npx @playwright/cli fill e3 "abc123"
+npx @playwright/cli click e4
+npx @playwright/cli screenshot --path=/tmp/osborn-joined.png
+npx @playwright/cli close
+```
+
+## Complete example — check mobile layout
+```bash
+npx @playwright/cli open http://localhost:3000
+npx @playwright/cli screenshot --viewport-size=375,812 --path=/tmp/mobile-375.png
+npx @playwright/cli close
+```
+
+## Notes
+- Runs headless by default. Add --headed to see the browser window.
+- Install browsers first if needed: npx playwright install chromium
+- Element IDs are session-scoped — run snapshot again after page changes
+- Use `--viewport-size=WIDTH,HEIGHT` to simulate mobile screen sizes (e.g. `375,812` for iPhone 14)
+- Use `--storage-state=/tmp/state.json` to save and restore session state (cookies, localStorage) across runs

package/.claude/skills/shadcn/SKILL.md

@@ -0,0 +1,232 @@
+# Skill: shadcn/ui Components
+
+Add and configure shadcn/ui components in a Next.js or React project.
+
+## When to use
+When the user wants to add UI components (buttons, dialogs, cards, forms, tables, etc.) using shadcn/ui — the copy-paste component library built on Radix UI and Tailwind CSS.
+
+## Setup (first time only)
+
+Initialize shadcn in the project root (where package.json lives):
+```bash
+npx shadcn@latest init
+```
+
+This creates `components.json` and sets up `src/components/ui/`. Answer the prompts to match your project's style preferences.
+
+## Add a component
+
+```bash
+npx shadcn@latest add <component-name>
+```
+
+## Add multiple components at once
+```bash
+npx shadcn@latest add button card dialog input form
+```
+
+## Commonly used components
+
+| Component | Install name | Description |
+|-----------|-------------|-------------|
+| Button | `button` | Clickable button with variants |
+| Card | `card` | Container with header/content/footer |
+| Input | `input` | Text input field |
+| Label | `label` | Form label |
+| Textarea | `textarea` | Multi-line text input |
+| Select | `select` | Dropdown select |
+| Checkbox | `checkbox` | Checkbox with label |
+| Switch | `switch` | Toggle switch |
+| Dialog | `dialog` | Modal dialog |
+| Sheet | `sheet` | Slide-in panel (drawer) |
+| Popover | `popover` | Floating content panel |
+| Tooltip | `tooltip` | Hover tooltip |
+| Dropdown Menu | `dropdown-menu` | Contextual dropdown |
+| Command | `command` | Command palette / search |
+| Badge | `badge` | Small status indicator |
+| Avatar | `avatar` | User avatar with fallback |
+| Separator | `separator` | Visual divider |
+| Table | `table` | Data table |
+| Tabs | `tabs` | Tabbed interface |
+| Accordion | `accordion` | Collapsible sections |
+| Sonner | `sonner` | Toast notifications (preferred over toast) |
+| Alert | `alert` | Inline alert message |
+| Alert Dialog | `alert-dialog` | Confirmation dialog |
+| Progress | `progress` | Progress bar |
+| Skeleton | `skeleton` | Loading placeholder |
+| Scroll Area | `scroll-area` | Custom scrollbar container |
+| Calendar | `calendar` | Date picker calendar |
+| Form | `form` | React Hook Form integration |
+| Slider | `slider` | Range slider |
+| Toggle | `toggle` | Toggle button |
+| Navigation Menu | `navigation-menu` | Site navigation |
+| Breadcrumb | `breadcrumb` | Page navigation breadcrumbs |
+| Collapsible | `collapsible` | Expandable/collapsible section |
+| Context Menu | `context-menu` | Right-click context menu |
+| Menubar | `menubar` | Application menu bar |
+| Resizable | `resizable` | Resizable panel groups |
+
+## Import pattern
+
+```tsx
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+```
+
+## Example — Button variants
+
+```tsx
+<Button>Default</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline">Cancel</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>
+<Button disabled>Disabled</Button>
+```
+
+## Example — Card
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card description goes here</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card content here</p>
+  </CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>
+```
+
+## Example — Form with validation (React Hook Form + Zod)
+
+```bash
+npx shadcn@latest add form input
+npm install zod react-hook-form @hookform/resolvers
+```
+
+```tsx
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+
+const formSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+})
+
+export function LoginForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { email: "", password: "" },
+  })
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="you@example.com" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input type="password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" className="w-full">Sign in</Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+## Example — Toast notifications (Sonner)
+
+```bash
+npx shadcn@latest add sonner
+```
+
+```tsx
+// In your root layout — add the Toaster once
+import { Toaster } from "@/components/ui/sonner"
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <Toaster />
+      </body>
+    </html>
+  )
+}
+
+// Then anywhere in your app
+import { toast } from "sonner"
+
+toast("Event created")
+toast.success("Profile saved")
+toast.error("Something went wrong")
+toast.promise(saveData(), {
+  loading: "Saving...",
+  success: "Saved!",
+  error: "Failed to save",
+})
+```
+
+## The cn() utility
+
+shadcn uses `clsx` + `tailwind-merge` via a `cn()` helper for conditional classes:
+
+```tsx
+import { cn } from "@/lib/utils"
+
+<div className={cn("base-class", isActive && "active-class", className)} />
+```
+
+## Notes
+- Components are **copied into your project** (not a node_modules dependency) — edit them freely
+- Requires **Tailwind CSS** configured in the project
+- Uses **Radix UI** primitives for accessibility
+- Components land in `src/components/ui/` by default
+- Run `npx shadcn@latest diff` to see if upstream components have changed
+- Check `components.json` for path and style config
+- Use Sonner (`sonner`) instead of the legacy `toast` component for notifications

package/.claude/skills/youtube-transcript/SKILL.md

@@ -0,0 +1,24 @@
+# Skill: YouTube Transcript
+
+Fetch and save transcripts from YouTube videos.
+
+## When to use
+When the user asks to get a transcript, subtitles, captions, or summary from a YouTube video URL.
+
+## How to execute
+
+yt-dlp is installed on this system. Use this exact command:
+
+```bash
+yt-dlp --skip-download --write-auto-sub --sub-lang en --convert-subs srt -o "/tmp/yt-%(id)s" "<VIDEO_URL>"
+```
+
+This downloads auto-generated English subtitles as an SRT file to /tmp/yt-{video-id}.en.srt
+
+Then read the SRT file and strip the timing markers to get clean transcript text.
+
+## Output
+Save the cleaned transcript to the session workspace as `library/youtube-{video-id}-transcript.md` with:
+- Video title and URL at the top
+- Cleaned transcript text (strip SRT timing markers and duplicate lines)
+- Key timestamps preserved as section markers if meaningful breaks exist

package/caresource-apply.js

@@ -0,0 +1,50 @@
+const { chromium } = require('playwright');
+
+(async () => {
+  const browser = await chromium.launch({ headless: false });
+  const page = await browser.newPage();
+  
+  await page.goto('https://caresource.wd1.myworkdayjobs.com/CareSource/job/Remote/AI-Developer_R10487/apply', { waitUntil: 'networkidle' });
+  await page.waitForTimeout(2000);
+  
+  // Click Apply Manually
+  console.log('Clicking Apply Manually...');
+  await page.click('text=Apply Manually');
+  await page.waitForTimeout(3000);
+  
+  // Fill in email
+  console.log('Filling email field...');
+  const emailInput = await page.$('input[type="email"]');
+  if (emailInput) {
+    await emailInput.fill('osbornojure@gmail.com');
+    console.log('Email filled: osbornojure@gmail.com');
+  }
+  
+  // Fill in password
+  console.log('Filling password fields...');
+  const passwordInputs = await page.$$('input[type="password"]');
+  if (passwordInputs.length >= 2) {
+    await passwordInputs[0].fill('workday2026!');
+    await passwordInputs[1].fill('workday2026!');
+    console.log('Passwords filled');
+  }
+  
+  await page.waitForTimeout(1000);
+  
+  // Click Create Account
+  const createBtn = await page.$('text=Create Account');
+  if (createBtn) {
+    console.log('Clicking Create Account...');
+    await createBtn.click();
+    await page.waitForTimeout(3000);
+  }
+  
+  // Take screenshot
+  await page.screenshot({ path: '/tmp/caresource-step1.png' });
+  console.log('Screenshot saved to /tmp/caresource-step1.png');
+  
+  // Get current page text
+  const text = await page.evaluate(() => document.body.innerText);
+  console.log('\n--- PAGE CONTENT ---');
+  console.log(text);
+})();

package/caresource-apply.mjs

@@ -0,0 +1,34 @@
+import { chromium } from 'playwright';
+
+(async () => {
+  const browser = await chromium.launch({ headless: false });
+  const page = await browser.newPage();
+  
+  console.log('🌐 Navigating to CareSource...');
+  await page.goto('https://caresource.wd1.myworkdayjobs.com/CareSource/job/Remote/AI-Developer_R10487/apply', { waitUntil: 'networkidle' });
+  await page.waitForTimeout(2000);
+  
+  console.log('📋 Clicking Apply Manually...');
+  await page.click('text=Apply Manually');
+  await page.waitForTimeout(3000);
+  
+  console.log('📧 Filling email...');
+  const emailInput = await page.$('input[type="email"]');
+  if (emailInput) {
+    await emailInput.fill('osbornojure@gmail.com');
+  }
+  
+  console.log('🔐 Filling passwords...');
+  const passwordInputs = await page.$$('input[type="password"]');
+  if (passwordInputs.length >= 2) {
+    await passwordInputs[0].fill('workday2026!');
+    await passwordInputs[1].fill('workday2026!');
+  }
+  
+  await page.waitForTimeout(1000);
+  await page.screenshot({ path: '/tmp/caresource-step1.png' });
+  
+  console.log('✅ Account form filled. Screenshot saved.');
+  console.log('\n📝 Browser is now open. You can review before submitting.');
+  console.log('Keep this window open and ready to proceed.\n');
+})();