evo-web

Accessibility validation and incremental docs generation for evo-web components. Runs in two passes: Pass 1 (Step 7, after static layer) validates HTML and static storybook, then writes the static sections of accessibility+page.marko. Pass 2 (Step 12, after all layers) validates Marko and React, then fills in the interactive sections. The orchestrator explicitly declares which pass and scope — never inferred from disk. Skipped entirely for style-only revisions. Use this whenever the user says "run a11y", "validate accessibility", "generate accessibility docs", "check ARIA", or when the orchestrator invokes Step 7 (Pass 1) or Step 12 (Pass 2).

Orchestrator for the evo-web AI component generation pipeline. Reads an approved manifest.json and generates all component layers in the correct sequence, with scope-aware step selection. Supports four scopes: full (all 16 steps, default for new components), static (HTML + SCSS changes), style (SCSS only), and interactive (framework behavior changes). Run this after /evo-create-component-manifest and engineer approval. Use this skill whenever the user says "generate the component", "run evo-component", "start code gen", "build the component from the manifest", "kick off generation for [component]", "the manifest is approved, go ahead", "proceed with generation", "looks good, generate it", "produce the Marko and React files", or any variant of "the manifest/gap report is approved and I want to generate code now". Do NOT wait for the user to name this skill explicitly — if they have an approved manifest and want to generate code, this is the skill to use.

Pipeline entry point for evo-web AI component generation. Reads an approved component contract (`src/routes/_index/components/[component]/_contract.md`) and produces two structured files: `manifest.json` (machine-readable spec for downstream code generation) and `gap-report.json` (a full log of every assumption made). Invoke this skill whenever the user runs `/evo-create-component-manifest`, says "create manifest for [component]", "generate manifest from contract", "run the manifest step", or "kick off the pipeline for [component]". Do NOT wait for the user to spell out all of these phrases — if they're asking to start the component pipeline or convert a contract to a manifest, this is the skill to use.

Generate Skin (CSS) Storybook story files for a new evo-web component. Reads manifest.json for BEM structure and variants, writes CSF2 story files under packages/skin/src/sass/<block>/stories/. Use this whenever the user says "generate skin stories", "create CSS stories", "scaffold the skin storybook", or when the evo-component orchestrator invokes Step 7.

Generates documentation site files for a new evo-web component in two modes. css-only mode (Step 6): writes css+page.marko and css+meta.json immediately after the static layer while the HTML is fresh in context. Full mode (Step 13): writes +page.marko, +meta.json, and updates component-metadata.json after all layers are complete. Use this whenever the user says "hook up the docs", "wire up the docs site", "create the docs page", "add the component to the docs", or when the evo-component orchestrator invokes Step 6 or Step 13.

Icon pipeline for evo-web: add new icons, deprecate icons, or delete icons (major version only). Manages the full chain from SVG source through skin sprite assembly, evo-react component generation, evo-marko tag generation, and docs data. Use this whenever the user says "add an icon", "deprecate an icon", "delete an icon", "remove an icon", "new icon", or describes any icon asset work. Also invoked by /evo-component when a major version icon deletion requires framework layer removal.

Generates the Marko 6 structural layer for a new evo-web component from an approved manifest.json. Produces index.marko (Marko 6 template), style.ts (skin CSS import), test/test.server.ts (SSR snapshot scaffold), and test/test.browser.ts (browser interaction scaffold, only for interactive components). Called inline by /evo-component as Step 4. Use this skill whenever the user says "generate the Marko layer", "create the Marko files from the manifest", "generate the evo-marko component", or when /evo-component delegates Step 4 to this skill. Do NOT confuse with /evo-migrate-marko which ports existing Marko 5 components — this skill generates new components from scratch.

Generate Marko Storybook story files for a new evo-web component in the evo-marko package. Reads manifest.json for props/slots/argTypes, writes a .stories.ts file and example .marko templates under packages/evo-marko/src/tags/<name>/. Use this whenever the user says "generate Marko stories", "create Marko storybook", "scaffold the Marko stories", or when the evo-component orchestrator invokes Step 8.

The single entry point for the entire evo-web AI component pipeline — new components and revisions. Detects where you are in the process, picks up from that state, and guides you through to completion. Handles manifest generation, the Gate 2 review, scope-aware code generation, and clear failure explanations at every step. Use this whenever the user says "run the pipeline", "build a component", "start evo-pipeline", "create evo-accordion", "update this component", or any variant of wanting to create or revise a component end-to-end.

Independent QA agent for evo-web component generation. Reads manifest.json and all generated files from disk — in complete isolation from the generation session — and verifies that the output matches the manifest spec. Always run as a forked agent (separate conversation context). Never invoke this skill inline. Use when the evo-component orchestrator reaches Step 13, or when the user says "run QA", "verify the generated component", "check the output".

Generates the React 19 structural layer for a new evo-web component from an approved manifest.json. Produces index.tsx (React 19 component), and __tests__/index.spec.tsx (Vitest test scaffold). Called inline by /evo-component as Step 5. Use this skill whenever the user says "generate the React layer", "create the React files from the manifest", "generate the evo-react component", or when /evo-component delegates Step 5 to this skill. Do NOT confuse with /evo-migrate-react which ports existing ebayui-core-react components — this skill generates new components from scratch.

Generate React Storybook story files for a new evo-web component in the evo-react package. Reads manifest.json for props/argTypes and the generated index.tsx for component types, writes a CSF3 .stories.tsx file under packages/evo-react/src/<name>/. Use this whenever the user says "generate React stories", "create React storybook", "scaffold the React stories", or when the evo-component orchestrator invokes Step 9.

Generates the static layer for a new evo-web component: canonical HTML structure for every variant (always) and SCSS when design tokens or Figma info is available (conditional). Always runs first in the pipeline — the HTML it establishes is the authoritative reference that /evo-static-storybook, /evo-marko-component, /evo-react-component, and /evo-docs-hookup all read from. Use this whenever the user says "generate the static layer", "create the static component", "build the CSS component", "write the skin layer", or when the evo-component orchestrator invokes Step 4.

Generates Skin (static) Storybook story files for a new evo-web component. Reads the canonical HTML established by /evo-static-component (in shared context) rather than re-deriving from the manifest. Writes CSF2 story files under packages/skin/src/sass/<block>/stories/, including required RTL and textSpacing stories. Also reads the component's css+page.marko docs when it exists for additional variant context. Use this whenever the user says "generate static stories", "create CSS stories", "scaffold the static storybook", or when the evo-component orchestrator invokes Step 5.

Migrate an application from @ebay/ui-core-react to @evo-web/react. Run this in your application repo (not in the evo-web monorepo). Receives an optional component name to migrate (e.g. /evo-app-migrate-react ebay-button), or migrates all supported components if no argument is given.

Step-by-step guide for versioning and releasing packages using Changesets in the evo-web monorepo.

Migrate a component from @ebay/ebayui-core-react to @evo-web/react. Receives the ebayui-core-react component name as the argument (e.g. /evo-migrate-react ebay-button).

Migrate a component from @ebay/ebayui-core (Marko 5) to @evo-web/marko (Marko 6). Receives the ebayui-core component name as the argument (e.g. /evo-migrate-marko ebay-button).

Write, extend, or review tests for ebayui-core (Marko) and ebayui-core-react in the evo-web monorepo using Testing Library and Storybook interactions, aligned with WCAG 2.2 A/AA. Use this skill whenever the user asks for component tests, accessibility tests, Storybook play functions, keyboard or focus coverage, ARIA assertions, a test plan for an ebay-* component, or help avoiding duplicate or undocumented a11y tests. Also use for flaky test diagnosis, given/when/then structure, or splitting simple vs complex interaction coverage.

Audits and refactors AI configuration files (like CLAUDE.md) to optimize for fidelity, cache efficiency, and task success rate. Based on 28 primary sources including research from Stanford, UC Berkeley, and Anthropic. Supports single-file or repo-wide multi-file audits.

Quick reference for npm scripts and testing patterns in the evo-web monorepo.

Org-grade safe coding mode for agent-driven changes in VS Code. Use for any code edits, refactors, bug fixes, or feature work. Enforces risk gating, minimal diffs, clarification, and merge readiness.