lucca-front-21-1

Generates and reviews Angular code using Lucca Front design system components version 21.1.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with the Lucca Front / Prisme design system requires exact knowledge of component APIs, selectors, and types that change between versions. This Skill provides version-accurate documentation for Lucca Front 21.1.x so generated Angular code matches the installed package instead of relying on outdated or hallucinated API knowledge. ## Core Features & Use Cases - Component API Reference: Per-component documentation covering Angular selectors, inputs, outputs, types, changelogs, Storybook examples, design guidelines, and Figma mappings for over 100 components (button, select, dialog, date-input, etc.). - Patch-Aware Fixes: Detects the installed patch version (21.1.0 through 21.1.4) and applies per-patch fix notes so code matches the exact version in the project. - Cross-Cutting Guidelines: Tokens, content writing rules, design patterns, SCSS mixins, migration codemods, and deprecated component replacements. - Use Case: A developer asks to add a filterable multi-select with a tooltip to an Angular form. The Skill reads the multi-select and form-field API docs, checks the installed patch version, and generates code using the correct selectors and inputs for that exact release. ## Quick Start Ask the assistant to generate an Angular form using Lucca Front components such as lu-form-field and luButton for your project.

Frequently Asked Questions about lucca-front-21-1

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

FAQPage Schema
How do I use Lucca Front components in an Angular project?▼

Install @lucca-front/ng and @lucca-front/scss via npm, import the styles in styles.scss, then use component selectors like luButton or lu-form-field in templates. This Skill provides the exact API, inputs, and examples for each component at version 21.1.

What components are available in Lucca Front 21.1?▼

Lucca Front 21.1 documents over 100 components including button, select, multi-select, dialog, modal, date-input, data-table, tooltip, and user-select. Each has API docs, Angular and HTML examples, design guidelines, and Figma variant mappings.

Does Lucca Front 21.1 differ between patch versions?▼

Yes, patches 21.1.1 through 21.1.4 introduced API changes such as new outputs, deprecated providers like provideLuUserPopover, and new icons. The Skill detects your installed patch and excludes fixes published after your version.

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

Lucca Front provides migration codemods run via ng generate @lucca-front/ng:<name>, documented cumulatively in the migrations reference. The Skill also lists deprecated components and their recommended replacements.

What happens if my project uses a different Lucca Front version?▼

The Skill stops and asks the user rather than guessing. If the detected minor version is not 21.1, or the patch is newer than 21.1.4, it refuses to generate code because the documented API may not match the installed package.