القائمة
How to launch and drive the devcon website to verify UI changes at runtime (dev server + headless Chromium via playwright-core).
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
How to handle "current time" in the event-app (the Devcon PWA under event-app/). Use whenever building or changing time-dependent UI — schedule live/upcoming status, countdowns, the room-screen clock, "happening now" badges, relative times, which day to highlight, etc. All such code must read the current time from the shared `useNow`/`useNowMs` hook (never `Date.now()` / `new Date()` directly in a component), so it can be mocked via URL query params (`?mockNow=`, `?mockSpeed=`) for testing date-specific flows — the same pattern devcon.org uses. Triggers: "now", "current time", "countdown", "live/upcoming", "relative time", "today", "mock time", "test the date", "schedule status", "clock".
How to add or change state/data persistence in the event-app (the offline-first Devcon PWA under event-app/). Use whenever adding a data-fetching hook, caching API responses, persisting user state, or deciding where state lives in event-app. The app is offline-first: all persisted state must go through the Dexie/IndexedDB-backed SWR layer so it survives no connectivity. Triggers: "fetch X in event-app", "cache", "offline", "persist", "store", "useSWR", "Dexie", "IndexedDB", "add a hook", "state management".
Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.
استنادا إلى تصنيف SOC المهني
| name | verify |
| description | How to launch and drive the devcon website to verify UI changes at runtime (dev server + headless Chromium via playwright-core). |
pnpm dev from monorepo/devcon starts TinaCMS + Next.js on http://localhost:3000.
http://localhost:3000 directly./speaker-applications/).No Playwright/Puppeteer in the repo, but Playwright browsers are cached on this machine. Recipe:
npm i playwright-coreconst { chromium } = require('playwright-core')
const exe = `${os.homedir()}/Library/Caches/ms-playwright/chromium_headless_shell-1223/chrome-headless-shell-mac-arm64/chrome-headless-shell`
const browser = await chromium.launch({ executablePath: exe })
<file>-module-scss-module__<hash>__<local-name> — the local name is a suffix, so select with [class$="__track-card"] / [class*="track-card-inner"], not [class*="track-card__"].newContext({ isMobile: true, hasTouch: true, viewport: {width: 390, height: 844} }) correctly makes matchMedia('(hover: none)') and (pointer: coarse) match, which is what src/hooks/useIsTouchDevice.ts keys off.page.emulateMedia({ reducedMotion: 'reduce' }).page.locator('section#id').screenshot(...) after scrollIntoViewIfNeeded().pnpm lint (next lint) is currently broken repo-wide on Next 16 ("Invalid project directory ... /lint") — not a signal about your change.pnpm exec tsc --noEmit (per CLAUDE.md). Do not run pnpm build unless asked.