feat(2nd-gen): add plop component scaffolder

[caseyisonit]

Description

Adds a plop component scaffolder at 2nd-gen/scaffolding/ that generates the deterministic file skeleton for a 2nd-gen component in a single command. It produces the two-layer structure (core base/types/index + swc concrete/registration/css/mdx/stories/tests), wires the @spectrum-web-components/core exports map, and formats the output.

This is build-time authoring tooling. It adds no runtime code and changes no shipping component.

What's included:

• 2nd-gen/scaffolding/plopfile.js — one component generator (single name prompt) plus two custom actions:
  • wire-core-export — adds the new ./components/<name> and ./components/<name>/index.js entries to the core package.json and re-sorts the exports keys alphabetically (minimal, deterministic diff). The swc package uses wildcard exports and needs no edit.
  • format-component — runs Prettier on the two generated directories so output lands pre-formatted.
• 2nd-gen/scaffolding/templates/component/** — 11 .hbs templates matching the badge reference layout exactly.
• 2nd-gen/scaffolding/README.md — human (yarn plop component) and headless (yarn plop component "<name>" --force) usage, encoded conventions, and a template-editing guide.
• Root package.json — plop script and plop@4.0.5 devDependency (the existing 1st-gen plop dep was aligned to 4.0.5 by yarn constraints).
• .ai/skills/migration-setup/SKILL.md — Phase 2 now runs the generator instead of hand-authoring 11 files, then applies the plan's base-vs-concrete split.
• ai-to-script-tools.md — marks the corresponding recommendation as shipped.

Name derivation uses plop's built-in case helpers (dashCase, pascalCase, constantCase) plus two custom helpers: titleName (space-separated proper-noun Storybook title, because the built-in titleCase keeps the dash and yields Action-Button) and lb/rb (literal braces for .mdx JSX expressions adjacent to handlebars).

Note: No changeset is included. 2nd-gen/scaffolding/ is dev-only tooling and is not a published workspace package, so there is nothing to release.

Motivation and context

Phase 2 of every 1st-gen → 2nd-gen component migration recreates the same ~11-file two-layer skeleton from skill prose, re-deriving names and hand-editing the core package.json export each time. That is hundreds to thousands of output tokens per component, repeated across 100+ components, and every repetition is a fresh chance to drift from the reference.

Encoding the skeleton as a generator makes the output byte-identical to the reference every time, lets the migration-setup skill spend its tokens on judgment (the base-vs-concrete split) rather than mechanics, and gives humans and the agent one identical scaffolding command. The templates align only with 2nd-gen patterns and the badge reference — not the deprecated 1st-gen plop.

Related issue(s)

• No linked GitHub issue. A Jira ticket will be created to track this and referenced separately (per project convention, Jira numbers are not linked here).

Screenshots (if appropriate)

N/A — no runtime or visual change.

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Generator produces a conformant, lint-clean skeleton

  1. From the repo root, run yarn plop component "test-widget" --force
  2. Confirm 11 files are created under 2nd-gen/packages/core/components/test-widget/ (3) and 2nd-gen/packages/swc/components/test-widget/ (8), matching the badge layout
  3. Confirm 2nd-gen/packages/core/package.json gained ./components/test-widget and ./components/test-widget/index.js entries in alphabetical position
  4. Run yarn lint, yarn lint:css, and yarn prettier --check "2nd-gen/packages/**/test-widget/**"; expect all to pass
  5. Clean up: rm -rf 2nd-gen/packages/{core,swc}/components/test-widget and git checkout -- 2nd-gen/packages/core/package.json

• Headless and interactive parity

  1. Run yarn plop component (interactive) and enter a name in mixed form (e.g. Action Button, actionButton, or sp-action-button)
  2. Expect identical output to the headless --force invocation: kebab dirs/files, PascalCase classes, ACTION_BUTTON_* constants, and a title: 'Action Button' Storybook title (space-separated, not Action-Button)
  3. Clean up the generated component as above

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Accessibility testing checklist

This PR adds build-time scaffolding tooling. It introduces no runtime UI, component, or behavior, so there is no interactive surface to test here. The accessibility of any component created from the generator is validated during that component's own migration (Phases 4 and 6), not in this PR. The templates intentionally seed accessible defaults (e.g. label/slot content in stories, an ARIA-snapshot a11y spec) as a starting point, each marked with TODO for the migrating author to complete.

• Keyboard (required — document steps below)

  1. No runtime UI is added by this change; there are no keyboard interactions to verify.
  2. Confirm no regressions: the change is isolated to 2nd-gen/scaffolding/, the root package.json, and docs/skill files.

• Screen reader (required — document steps below)

  1. No runtime UI is added by this change; there is nothing for a screen reader to announce.
  2. The generated *.a11y.spec.ts template provides an ARIA-snapshot scaffold so each migrated component carries screen-reader coverage from the start.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3bac6ca

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📚 Branch Preview Links

• Documentation Site (first-gen)
• Storybook (first-gen)
• Storybook (second-gen)

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-6391

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.