ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Audits HTML against WCAG 2.2 — no-tools structural checks (alt text, heading order, form labels, lang, landmarks, skip link, viewport meta, token-based contrast), plus a full axe-core scan covering computed contrast, keyboard/focus order, reduced-motion, and 200% zoom. Uses Playwright + @axe-core/playwright when…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Generate distinctive, production-grade frontend UI code from a design system — starting from an on-brand, accessible, rendered HTML scaffold and elaborating with taste that avoids the generic-AI-slop aesthetic. Trigger when the user says "build the site", "make the UI", "design and code", "create a landing page"…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Run a heuristic conversion-rate-optimization review of a landing or funnel page — CTA hierarchy, above-fold weight, form friction, trust-signal placement, copy clarity, and decision fatigue — scoring each finding by impact over effort. Uses Playwright for in-browser thumb-zone and interaction checks when connected…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Build a design prompt structured around the 5 Core Dimensions — Pattern & Layout (skeleton), Style & Aesthetic (skin), Color & Theme (palette), Typography (voice), and Motion & Interaction (life). Trigger when the user says "5 dimensions", "design prompt", "structured design brief", "the five-dimensions framework", or…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Implement motion from a design system's motion tokens — emit real CSS/JS for entrance/scroll animations, micro-interactions (hover/press/focus), and transitions, with a reduced-motion fallback. Trigger when the user says "add motion", "animate this", "implement the animations", "micro-interactions", "scroll…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Run a competitive research pass on a target site and its top competitors, producing a structured competitive-intelligence report — brand snapshot, competitor scoring, white-space gaps, and keyword landscape — plus a build brief that feeds the design and SEO workflow. Uses the Firecrawl MCP for deep multi-page scraping…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Generate a complete design system — pattern, style, color palette (with WCAG contrast), typography pairing, effects, anti-patterns, and a pre-delivery checklist — from a product type, industry, and a few style keywords. Runs fully locally from clean-room CSV libraries; no network or paid API required. Trigger when the…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Save a generated design system to disk as a hierarchical Master + per-page-overrides structure so future sessions can retrieve it for the project. Trigger when the user says "save the design system", "persist this", "make this the master for the project", "remember these design choices", or wants the design system to…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Convert a design system spec into code-deliverable token files — CSS variables, a Tailwind config fragment, SCSS variables, or Style-Dictionary JSON. Trigger when the user says "emit tokens", "tailwind config", "css variables", "style dictionary", "convert design system to code", or wants to bridge from spec to…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Capture full-page screenshot baselines at multiple viewports and browsers, then diff later runs against them to catch unintended rendering changes. Renders with the bundled (free) Playwright extension and compares with Claude's vision, adding an exact pixel-diff CLI for precise deltas when one is installed. Without a…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Capture a reference site's section structure, color and font tokens, and recurring component patterns into a clean, annotated inspiration file for rebuilding from scratch — never verbatim reuse. Renders with Playwright when connected; otherwise uses a static fetch (lower fidelity on JS-heavy sites). Trigger when the…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Spin up multiple website or page variants in parallel — each in its own git worktree or sibling folder, built by a sub-agent from the same brief and shared design tokens but a different inspiration source — then cherry-pick and merge the best sections into one final. Captures side-by-side comparison screenshots when…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Port a built site or page into a single self-contained HTML file — CSS and JS inlined, small images base64-embedded, large ones flagged for CDN, source maps stripped — that pastes into any CMS or page-builder custom-HTML surface (WordPress, GoHighLevel, Webflow, Wix, Framer, Squarespace, Carrd, or generic) with no…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Run a 9-phase pre-delivery QA gate on a build and return a PASS/CONDITIONAL/FAIL verdict with a risk rating (Low/Medium/High/Critical), bucketed findings (critical issues, warnings, recommendations, nice-to-haves), an estimated fix time, and an explicit client-ready YES/NO. Uses the Playwright extension when connected…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Forced adversarial review pre-delivery — hands Claude-generated code, content, or plans to Codex (GPT-5.5) to find bugs, security risks, missing tests, and missed edge cases. Trigger when the user says "review the code you wrote", "check your work", "second opinion", "sanity-check what you wrote", "adversarial…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Delegates large multi-file or whole-repo work to Gemini for architecture maps, refactor-impact analysis, and multi-document synthesis. Uses Gemini's large context window when the gemini CLI is connected; otherwise runs a scoped Claude pass over the most relevant files (narrower, lower-fidelity). Trigger when the user…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
The routing law for handing off between Claude (primary driver), Codex/GPT-5.5 (adversarial review, second opinions), and Gemini (long-context, repo-wide synthesis). Codifies when each model is the right tool and enforces the no-self-review rule. Trigger when the user says "three brain", "route this", "which model…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Orchestrates a multi-specialist SEO audit — detects business type, dispatches the available specialist skills, and aggregates one weighted health score with a prioritized, deduped fix list. Crawls up to 500 pages when seo-firecrawl is connected; otherwise audits the key URLs you provide and says so. Trigger when the…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Backlink profile analysis — referring domains, anchor-text distribution, toxic-link flags, competitor link gap, and link-building targets. Uses a connected link-data MCP (DataForSEO, Moz, or Bing) for full metrics and authority scores when present; otherwise builds a qualitative profile from web-search mention and…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
SERP-overlap semantic topic clustering for content architecture — groups keywords into hub-and-spoke clusters (one pillar + supporting spokes) with an internal-link matrix and intent labels. The free path clusters keywords by actual shared Google results (SERPs acquired via WebSearch, clustered deterministically by…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Generate SEO-optimized competitor comparison and alternatives pages — "X vs Y" layouts, "alternatives to X" pages, feature matrices, schema, and conversion patterns. Trigger when the user says "comparison page", "vs page", "alternatives page", "X vs Y", "versus", or "alternative to".
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Generate competitive SEO content briefs — per-section heading structure, word-count guidance anchored on top-ranking pages, required entities, internal and external links, schema recommendations, and GEO citability guidance. Covers new-page and improve-existing-page briefs. Uses DataForSEO to auto-fetch the SERP when…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Content quality and E-E-A-T analysis with AI-citation-readiness assessment. Evaluates whether content will be trusted by human reviewers and cited by AI search (AI Overviews, ChatGPT, Perplexity). Trigger when the user says "content quality", "E-E-A-T", "content analysis", "readability check", "thin content", "content…
ZachArticulateV/designer-pro-and-seo
Skill Claude CodeCodex
Pulls live SERP, keyword, backlink, and AI-visibility data from the DataForSEO MCP when connected — search volume, keyword difficulty, multi-engine and image SERP, referring domains, and LLM-mention tracking; otherwise reads the current SERP and competitor set from built-in web search, clearly labeled as…