/wbToWBC — Exhaustive Simulation ()
/wbToWBC is the architectural translator. It takes generic code (standard Vue/React, raw CSS, native hooks) and converts it into wbc-ui.com compliant code — proprietary imports from @wbc-ui2/wb-core, WBC design tokens, and ecosystem-specific patterns. The central principle: framework adherence without logic alteration. The agent rewrites the how (imports, hooks, tokens) without changing the what (business logic, data flow, user-facing behavior).
Read this if you want to know what "WBC-compliant" means in practice, and where the boundary sits between translating a framework layer and rewriting business logic.
1. Role & target
| Aspect | Behavior |
|---|---|
| Role | The Pattern Enforcer. Converts generic code to WBC ecosystem patterns. |
| Target | Component files (.vue, .jsx), stylesheets (.css), utility files (.js). |
| Cell scope | None. /wbToWBC doesn't interact with plans. |
| Side effects allowed | Rewriting imports, swapping hooks, replacing CSS values, updating component exports. |
| Side effects forbidden | Changing business logic, altering data flow, modifying test assertions. |
The distinction from /wbRefactor: /wbRefactor improves code quality within the same framework. /wbToWBC changes the framework while preserving behavior. You refactor after migration — never during.
2. Argument resolution
| Form | Example | What /wbToWBC does |
|---|---|---|
| Specific file | Command: /wbToWBC src/components/Button.vue | Rewrites to use @wbc-ui2/wb-core base classes and design tokens. |
| Directory path | Command: /wbToWBC src/legacy/ | Mass-migrates the entire directory. |
| Comma-separated | Command: /wbToWBC src/Auth.js,src/Login.js | Migrates both to use useWbcAuth() hook. |
| Wildcard glob | Command: /wbToWBC **/*.css | CSS-only sweep: replaces hardcoded colors with var(--wbc-*) tokens. |
3. Flag matrix
/wbToWBC declares no flags of its own beyond the universal -h / --help. The target is positional — a file, a component, or a directory — and the migration mode is inferred from what the target contains.
Patterns with no WBC equivalent are left intact with a comment (// TODO: No WBC equivalent for indexedDB. Manual migration required.) rather than dropped, so a partial migration is always visible in the diff.
4. Pipelines (the agent-native scenarios)
/wbToWBC core2/packages/wb-dataviewer/src/legacy/GenericDashboard.vue -h -c> /wbToWBC core2/packages/wb-dataviewer/src/legacy/GenericDashboard.vue -h -c💠 Pipeline Migrate a generic Vue dashboard to WBC
A developer copy-pasted a generic open-source dashboard. Convert it to WBC conventions:
💠 Pipeline CSS-only sweep across the monorepo
Before a theming overhaul, convert all hardcoded colors to design tokens:
💠 Pipeline Strict audit of a legacy folder
Can the legacy folder be fully migrated without manual intervention?
5. Edge cases & refusals
| Trigger | What /wbToWBC does |
|---|---|
| Code is already WBC-compliant | Scans silently. ℹ️ All patterns are already WBC-compliant. No changes needed. |
| Unrecognized third-party library | ⚠️ Cannot translate 'lodash.debounce'. Left intact. Consider: @wbc-ui2/wb-core/utils/debounce. |
| React code in a Vue monorepo | ⚠️ React hooks detected in a Vue ecosystem. /wbToWBC converts to WBC patterns, not between frameworks. Use /wbRefactor for framework migration. |
| Version mismatch (old Vue 2 syntax) | ❌ Component uses Vue 2 Options API. WBC requires Composition API (Vue 3+). Migrate to Vue 3 first. |
| CSS is minified/obfuscated | ⚠️ Cannot parse minified CSS. Run a CSS formatter first, then retry. |
The unifying principle: /wbToWBC migrates the framework layer while preserving the business layer. It's the bridge from "generic code that works" to "WBC-compliant code that works the same way but uses ecosystem patterns." The migration is always behavior-preserving — if the component rendered a table before, it renders the same table after, just with WBC hooks and design tokens instead of generic ones.