Loading...
Loading...
Found 7 Skills
Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.
Work with the Webflow Designer API — either by building Designer Extensions (iframes inside the Webflow Designer) or by generating code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns. Use when creating, debugging, or modifying Designer Extensions, OR when the user wants to run Designer API code in the Playground app.
This skill helps launch and configure the Chrome DevTools MCP server, giving Claude visual access to a live browser for debugging and automation. Use when the user asks to set up browser debugging, launch Chrome with DevTools, configure chrome-devtools-mcp, see what my app looks like, take screenshots of my web application, check the browser console, debug console errors, inspect network requests, analyse API responses, measure Core Web Vitals or page performance, run a Lighthouse audit, test button clicks or form submissions, automate browser interactions, fill out forms programmatically, simulate user actions, emulate mobile devices or slow networks, capture DOM snapshots, execute JavaScript in the browser, or troubleshoot Chrome DevTools MCP connection issues. Supports Windows, Linux, and WSL2 environments.
Design-to-code pipeline: extract copy from URLs, extract design tokens from images, then build React components or HTML preview variants. Use when: extracting content from websites, extracting design systems, generating frontend code, previewing design variants, sending to Figma via MCP. Triggers on "extract copy", "extract design", "build frontend", "generate variants", "export design", "send to Figma".
Automatically injects the project's extracted design soul into any frontend task. Use this skill on EVERY request that involves building, editing, or reviewing UI — including components, pages, layouts, styles, animations, and design decisions. Triggers on: any prompt containing words like "build", "create", "make", "design", "component", "page", "layout", "button", "form", "card", "nav", "header", "modal", "style", "css", "tailwind", "animate", "responsive", "ui", "frontend", "screen", "dashboard", "landing", "section", or any request to write JSX, TSX, HTML, or CSS. Do NOT trigger on backend-only tasks, database queries, API routes with no UI, or pure logic/utility functions with no visual output. This skill has no slash command — it runs silently in the background on every frontend task. The user never needs to invoke it manually.
Full project soul alignment in one command. Scans every frontend file in the project, builds a prioritized plan, then systematically aligns all components and styles to .marrow.md. Smart enough to detect if .marrow.md was updated since the last run and only reprocess files affected by what changed — not a full rewrite every time. Use this skill when the user wants to align the entire project to the design soul at once, just installed marrow mid-project and wants to catch everything up, or updated .marrow.md via /marrow-update and wants to propagate only the changed rules across the project. Triggers on: /marrow-redesign, or prompts like "align the whole project", "redesign everything to match marrow", "apply marrow to all files", "full soul alignment", "catch everything up to marrow", "propagate the marrow update", "marrow everything". Requires .marrow.md to exist. If not found, instructs user to run /marrow first. This is a multi-step agentic command — it will take multiple turns to complete large projects. It creates a .marrow-state.json file to track progress and enable smart diff on future runs.
Test-driven CSS design system modifications. Run checks before/after CSS changes to verify token usage, variable definitions, fallbacks, and consistency. Use when modifying CSS tokens, fixing design inconsistencies, or auditing CSS architecture.