lucca-front-21-0

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers working with the Lucca Front / Prisme design system often generate incorrect Angular code because component APIs, selectors, and inputs change between versions. This Skill provides version-accurate documentation for Lucca Front 21.0.x so every generated component matches the exact installed patch. ## Core Features & Use Cases - Component API Reference: Access API docs, Angular/HTML examples, design guidelines, and Figma mappings for over 100 components (button, callout, data-table, select, modal, etc.). - Patch-Aware Fixes: Detects the installed patch version and consults per-patch fix files (21.0.1 through 21.0.5) so code matches the project's actual version. - Design & Content Guidelines: Includes tokens, design patterns, content writing rules, deprecated component lists, and migration codemods. - Use Case: When asked to add a filter bar to an Angular page, the Skill reads the filterbar API and example files, verifies the installed @lucca-front/ng version, and generates code using the correct selectors and inputs. ## Quick Start Ask the assistant to generate an Angular form using Lucca Front components such as lu-text-input and luButton for your project.

Frequently Asked Questions about lucca-front-21-0

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 describe the UI you need. It reads the component's API reference and example stories from its references directory, then generates code with the exact selectors, inputs, and types valid for Lucca Front 21.0.x.

What is the difference between @lucca-front/ng and @lucca-front/prisme?▼

@lucca-front/prisme contains open-source design system components maintained by the Design System team, while @lucca-front/ng contains Lucca business components with domain-specific logic. This Skill documents components across the Lucca Front packages for version 21.0.

Does this Skill support Lucca Front versions other than 21.0?▼

No, it covers only the 21.0.x minor version, patches 21.0.0 through 21.0.5. If the detected minor version differs or the patch is newer than 21.0.5, the Skill stops and asks the user rather than guessing the API.

How does the Skill handle older patch versions of Lucca Front 21?▼

It detects the installed patch from node_modules or package.json, then consults fix files for every patch newer than the installed one. Those fixes describe changes absent from the project's code, so it avoids using APIs the project does not have.

Can I use this Skill to migrate to a newer Lucca Front version?▼

Yes, it includes a migrations reference listing cumulative ng generate codemods with their introduction versions, plus per-component changelogs. It also flags deprecated components and proposes their replacements instead of generating deprecated code.

Why does the Skill refuse to answer without reading component documentation?▼

Component property names and types change between releases, so the Skill mandates reading the component's markdown reference before any code generation. This prevents hallucinated inputs and ensures the output matches the real 21.0.x API.