lucca-front-migrate-22

Migrates Angular projects from @lucca-front/ng 21.x to 22.x using schematics and manual fixes.

52|7|Updated Apr 12, 2017
One-click install
npx skills add https://github.com/LuccaSA/lucca-front --skill lucca-front-migrate-22-luccasa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lucca-front-migrate-22
Source: https://github.com/LuccaSA/lucca-front/tree/main/.claude/skills/lucca-front-migrate-22
Command: npx skills add https://github.com/LuccaSA/lucca-front --skill lucca-front-migrate-22-luccasa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Upgrading a consumer project from @lucca-front/ng 21.x to the breaking 22.x release breaks palettes, component APIs, strict-null typings, readonly properties, and signal-based inputs. This Skill orchestrates the official schematics and then handles the residual cases they cannot automate, restoring the project to identical behavior and rendering. ## Core Features & Use Cases - Schematic orchestration: Runs ng g @lucca-front/ng:palettes and ng g @lucca-front/ng:file-upload first, then processes only the leftover cases (CSS vars *-rgb, $palettesDeprecated, .mod-S classes). - Component refactors: Guides ActivityFeed restructuring (lu-activity-feed-update-item), Select panel ListBox overrides, and FileEntry rendering changes. - Strict/readonly/signal adaptation: Fixes build errors from strictNullChecks .d.ts, readonly class properties, and renamed signal inputs, plus audits 17+ silent behavior changes that produce no compile errors. - Use Case: A team upgrades their Angular 22 app to Lucca Front 22 and the build fails on palette classes and dialog .instance nullability; this Skill detects every occurrence, applies minimal fixes, and produces a structured migration report. ## Quick Start Ask the assistant to migrate this project to Lucca Front 22 using the lucca-front-migrate-22 skill.

Frequently Asked Questions about lucca-front-migrate-22

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a project from @lucca-front/ng 21 to 22?▼

Run the official schematics first (`ng g @lucca-front/ng:palettes` and `ng g @lucca-front/ng:file-upload`), then fix the residual cases: `*-rgb` CSS variables, `$palettesDeprecated` config, ActivityFeed structure, and strict-null TypeScript errors. The Skill guides each step and ends with a validation build and report.

What breaking changes does Lucca Front 22 introduce?▼

It removes deprecated palettes (grey→neutral, primary/secondary→product, lucca→brand), restructures file upload and ActivityFeed components, moves select panels to ListBox, publishes strictNullChecks type definitions, marks ~360 properties readonly, and converts inputs/outputs/view children to signal APIs.

Can I migrate to Lucca Front 22 on Angular 21 or earlier?▼

No. Lucca Front 22 requires Angular 22, and the schematics are not guaranteed compatible with earlier versions. Upgrade Angular first with `ng update @angular/core@22 @angular/cli@22`, then run the Lucca Front migration.

Why does my build pass but the UI still break after upgrading to LF 22?▼

Many LF 22 changes are silent behavior shifts with no compile errors: `canClose` guards wrapped in try/catch, `setValue(null)` ignored on legacy selects, invalid date input no longer triggering validation, and DOM nodes removed by template null-narrowing. These must be audited manually even on non-strict projects.

How do I fix readonly property errors after the LF 22 upgrade?▼

Mutate instead of reassigning: call `.next()` on Subjects rather than replacing them, or redeclare the property in a subclass with `override`. Only full property substitution from outside a component breaks; method assignment and object mutation still compile.

Should SCSS overrides of .optionItem be migrated automatically?▼

No. Select panel overrides targeting `.optionItem` and its children are never auto-migrated because the correct replacement depends on the project's real DOM and styles. They are detected and listed in the report (e.g. `.optionItem-value` → `.listboxOption-content`) for the developer to apply.