skills.rest
LuccaSA
LuccaSAOFFICIAL
Explore all skills by this author →
WebsiteGitHub

textfield

Migrates legacy CSS textfield markup to modern Lucca Front Angular form components.

52|7|Updated Apr 12, 2017
Search Tags:#refactoring#design system#angular#migration#textfield#form components#lucca-front
One-click install
npx skills add https://github.com/LuccaSA/lucca-front --skill textfield-luccasa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: textfield
Source: https://github.com/LuccaSA/lucca-front/tree/main/.github/skills/deprecated-components/textfield
Command: npx skills add https://github.com/LuccaSA/lucca-front --skill textfield-luccasa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Legacy Lucca Front textfields built with raw CSS classes (textfield, textfield-input, textfield-label) need to be migrated to modern Angular components like lu-form-field and lu-text-input, but doing this by hand across many templates is error-prone and risks functional regressions in forms. ## Core Features & Use Cases - Legacy Pattern Detection: Scans Angular HTML templates and inline TS templates for deprecated textfield wrappers, including variants with hidden labels, custom inner components, and hybrid legacy/modern markup. - Guided Transformation Rules: Maps legacy inputs to lu-text-input, lu-number-input, or lu-textarea-input, converts width modifiers (mod-short, mod-long) to lu-form-field width values, and preserves formControlName, ngModel, validation, and accessibility attributes. - Anti-Regression Safeguards: Automatically excludes selects, date pickers, textareas, and ambiguous cases from auto-migration, annotating them for manual review instead. - Use Case: While upgrading an Angular application to the latest Lucca Front design system, run this migration to convert dozens of legacy textfields per file, then receive a report split into automatic, partial, and manual migrations. ## Quick Start Migrate all deprecated textfields in my Angular templates to Lucca Front lu-form-field components and report which cases need manual review.

Frequently Asked Questions about textfield

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

FAQPage Schema
How do I migrate legacy Lucca Front textfields to Angular components?▼

Replace the legacy label.textfield wrapper with lu-form-field and the native input with lu-text-input or lu-number-input, keeping formControlName, ngModel, placeholder, and validation intact. Width modifiers like mod-short map to the lu-form-field width input.

How are legacy textfield width classes converted to lu-form-field?▼

Legacy width classes in rem map to discrete lu-form-field width values: mod-shortest through mod-short become width 20, mod-standard and mod-long become 30, mod-longer becomes 40, and mod-longest becomes 60. The legacy classes are removed after migration.

Can textareas be migrated to lu-text-input automatically?▼

No, textareas are never migrated to lu-text-input. They are only converted to lu-textarea-input after manual validation, preserving rows, maxlength, and validation logic, per the Prisme textarea reference.

Which textfield cases are excluded from automatic migration?▼

Wrappers containing selects, date pickers, textareas, complex control flow, dynamic labels, or mod-compact without explicit user approval are excluded. These cases are left unchanged and annotated with a comment requesting manual verification.

What happens to textfields without a visible label during migration?▼

They are migrated using the hiddenLabel option on lu-form-field with a non-empty technical label for accessibility. An existing masked label (pr-u-mask) is reused as the label source, and the placeholder is never used as a label substitute.

Related Skills

Explore More Software Engineering Skills→
cristal-isecristal-ise
10

reactive-state

Manage Angular UI state with Signals, computed signals, and effects.

Official
Intermediate
NevaberryNevaberry
22

angular-knowledge-patch

Update Angular project code to match v19-v21 API changes.

Official
Intermediate
syncfusionsyncfusion

syncfusion-aspnetcore-dropdown-tree

Configure Syncfusion DropDownTree components for hierarchical selection in ASP.NET Core.

Official
Advanced
next-safe-actionnext-safe-action
3.1k

next-upgrade

Upgrade Next.js projects to the latest stable version using official codemods.

Official
Intermediate