Menu
Quick reference for npm scripts and testing patterns in the evo-web monorepo.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
| name | evo-commands |
| description | Quick reference for npm scripts and testing patterns in the evo-web monorepo. |
Quick reference for npm scripts and testing patterns in the evo-web monorepo.
# Install dependencies (includes Playwright with chromium)
npm install
# Build all packages in correct order + run tests
npm run build
# Build site for publishing to _site directory
npm run deploy
# Lint CSS/SCSS
npm run lint
# Test (only for individual packages, NOT for validating build)
npm test
# Start local development site (Marko-Run docs)
npm start
# ⚠️ NEVER RUN THESE - GitHub Actions only:
# npm run change # Triggers changeset prompts - agents can't interact
# npm run version # GitHub Actions only - updates versions
# npm run release # GitHub Actions only - publishes to npm
# Build specific package (useful for single-package development)
npm run build -w packages/skin
npm run build -w packages/ebayui-core
npm run build -w packages/evo-marko
npm run build -w packages/ebayui-core-react
npm run build -w packages/evo-react
# Test specific package
npm test -w packages/ebayui-core
# Update visual snapshots (Marko packages)
npm run update-snapshots -w packages/ebayui-core
# Start Storybook (per package)
npm run storybook -w packages/skin
npm run storybook -w packages/ebayui-core
npm run storybook -w packages/ebayui-core-react
Marko component test structure:
test/test.browser.js - Browser tests with Playwright (Vitest)test/test.server.js - Server-side rendering tests (Vitest)React component test structure:
__tests__/index.spec.tsx - Vitest with @testing-library/react (jsdom)# Marko browser test
npx vitest run packages/ebayui-core/src/components/ebay-button/test/test.browser.js
# React test
npx vitest run packages/ebayui-core-react/src/ebay-button/__tests__/index.spec.tsx