| name | migrate-to-v2 |
| description | Use this skill when the user asks to execute, track, or unblock the React BnB Gallery v2 modernization plan. It standardizes phase sequencing, branch/PR scope, validation, and migration documentation for 2.0.0 and 2.1.x work. |
Migrate React BnB Gallery to v2
Purpose
Execute the repository modernization plan safely and consistently using MODERNIZATION_PLAN_v2.md as the source of truth.
When To Use
Use this skill when the user asks things like:
- "what is next in the modernization plan?"
- "start phase X"
- "prepare the next migration PR"
- "implement v2 migration tasks"
Required Inputs
- Current repository state (git status/branch).
- Current plan status in
MODERNIZATION_PLAN_v2.md.
- User-approved phase alignment answers for the phase being executed.
If any required phase answers are missing, stop implementation and request alignment decisions first.
Execution Workflow
- Read
MODERNIZATION_PLAN_v2.md and identify the next actionable implementation item.
- Confirm branch strategy from the plan (
<type>/phase-<n>-<scope>).
- Implement one concern per PR. Avoid mixing unrelated refactors.
- Run validation for touched areas (
lint, test, build as applicable).
- Update docs/migration notes when behavior changes.
- Summarize residual risks and follow-ups.
Repository-Specific Defaults
- Canonical plan file:
MODERNIZATION_PLAN_v2.md
- Current sequence focus after alignment closure:
- Phase 3 runtime/API hardening implementation
- Phase 4 test modernization completion
- Phase 5 docs/example modernization completion
- Phase 6 release hardening completion
- Phase 7/8/9 implementation for
2.1.x
Guardrails
- Keep PRs small and single-purpose.
- Do not silently change approved phase decisions.
- Preserve public API unless the approved phase policy explicitly allows change.
- For Phase 9 refactors, keep public props stable even when internals/lifecycle behavior changes.
- Prefer behavior tests over snapshots.
Skill Coordination
For implementation and review quality:
- Apply
vercel-react-best-practices to React/Next architecture, rendering, and performance decisions.
- Apply
frontend-design when touching docs/demo UI or any user-facing interface refresh.
PR Checklist (Copy Into PR Description)
## Summary
- What changed and why.
## Scope
- In scope:
- Out of scope:
## Validation
- [ ] lint
- [ ] test
- [ ] build
- Commands run:
## Compatibility
- Breaking changes: yes/no
- If yes, migration steps:
## Security
- Risk level:
- New dependencies introduced:
## Documentation
- Updated files:
## Follow-ups
- Remaining tasks for next PR/phase:
Suggested Command Skeleton
git checkout -b fix/phase-3-gallery-runtime
pnpm lint
pnpm test
pnpm build
git add -A
git commit -m "fix(phase-3): <scoped runtime fix>"
git push -u origin fix/phase-3-gallery-runtime
Agent Output Format
When reporting progress, include:
- Current phase and task
- What was changed
- Validation results
- Compatibility/migration impact
- Next recommended PR/task