lucca-front-21-3

Provides version-accurate Angular component documentation for the Lucca Front and Prisme design system.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI assistants often hallucinate component APIs, property names, and types when generating code for the Lucca Front / Prisme design system, producing broken or outdated Angular code. This Skill grounds every generation in the exact documentation matching the project's installed version (21.3.x and the technical minor 21.4.x), including per-patch corrections. ## Core Features & Use Cases - Version-aware documentation: Detects the installed @lucca-front/ng patch version and applies or excludes patch-level fixes (fixes/21-3-1.md, 21-4-1.md, 21-4-2.md) so the guidance matches the project's actual code. - Component references: Per-component API docs, Angular/HTML story examples, design guidelines, and Figma variant mappings for 120+ components (button, select, date picker, dialog, etc.). - Cross-cutting guidance: Design tokens, content and writing rules, UX patterns, SCSS tools, migration codemods, and a deprecated-components list with replacements. - Use Case: A developer asks to add a multi-select with select-all to a form; the Skill checks the installed version, reads the multi-select API and examples, and generates code using only inputs and outputs that exist in that exact patch. ## Quick Start Ask the assistant to generate an Angular form using Lucca Front components such as lu-form-field and lu-multi-select for the current project.

Frequently Asked Questions about lucca-front-21-3

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

FAQPage Schema
How do I generate Angular code with Lucca Front components?▼

Load this Skill and ask for the component you need, such as a button, select, or date picker. It reads the component's API reference and story examples for your installed version, then generates code using only the exact inputs, outputs, and types that exist in that release.

What versions of @lucca-front/ng does this documentation cover?▼

It covers Lucca Front 21.3.x (patches 21.3.0 and 21.3.1) and the technical minor 21.4.x (21.4.0 through 21.4.2), which is an Angular 22 compatibility release. If the detected version is outside this range, the Skill stops and asks rather than guessing.

Does the Skill handle differences between patch versions?▼

Yes. The fixes/ directory contains per-patch deltas (21-3-1, 21-4-1, 21-4-2) describing API additions, type changes, and story updates. For projects on older patches, later fixes are excluded; for 21.4.x projects, fixes are applied on top of the base documentation.

Can I use it to convert Figma designs into Lucca Front code?▼

Yes. Each component has a .figma.md reference with Figma variant names, node IDs, and links. The workflow maps Figma property names (which may differ from Angular inputs) to the correct component configuration, plus design guidelines from the .design.md files.

What happens if I use a deprecated Lucca Front component?▼

The Skill maintains a deprecated components reference and refuses to generate code using deprecated components. Instead, it proposes the recommended replacement component and its current API.

How do I migrate a project to a newer Lucca Front version?▼

Consult the migrations reference, which lists cumulative ng generate codemods (ng generate @lucca-front/ng:<name>) with their introduction versions, combined with the Changelog section of each affected component's API file.