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

lucca-front-21-2

Provides versioned documentation for Lucca Front and Prisme Angular design system components.

52|7|Updated Apr 12, 2017
Search Tags:#code generation#design system#angular#component documentation#scss#lucca-front#prisme
One-click install
npx skills add https://github.com/LuccaSA/lucca-front --skill lucca-front-21-2-luccasa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lucca-front-21-2
Source: https://github.com/LuccaSA/lucca-front/tree/main/.github/skills/lucca-front/lucca-front-21-2
Command: npx skills add https://github.com/LuccaSA/lucca-front --skill lucca-front-21-2-luccasa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When generating or modifying Angular code that uses the Lucca Front / Prisme design system, AI models often hallucinate component APIs, property names, or types. This Skill supplies authoritative, version-pinned documentation for Lucca Front 21.2.x so every lu-*, pr-* selector or luX directive is used exactly as the installed library defines it. ## Core Features & Use Cases - Component API Reference: Per-component documentation covering Angular API, changelog, examples (stories), design guidelines, and Figma mappings for over 100 components (button, dialog, select, form-field, etc.). - Patch-Level Accuracy: Detects the installed patch version from node_modules or package.json and applies per-patch fix files (fixes/21-2-1.md through 21-2-5.md) so answers match the exact code in the project. - Transverse Documentation: Tokens, content/writing guidelines, UI dev guidelines, design patterns, migration codemods, and deprecated component lists. - Use Case: A developer asks to add a confirmation dialog with a critical button. The Skill loads dialog.md and button.md, checks the installed patch, and generates code using the exact selectors, inputs, and types of Lucca Front 21.2. ## Quick Start Ask the AI to generate an Angular form using Lucca Front components and it will consult the matching component documentation before writing any code.

Frequently Asked Questions about lucca-front-21-2

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, then consult the component's API documentation for its exact selectors, inputs, and types before writing code. Each component has dedicated files for API, examples, design guidelines, and Figma mappings.

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

@lucca-front/prisme contains pure open-source Design System components maintained by the Design System team, while @lucca-front/ng contains Lucca business components with domain-specific logic like API interactions and department selects.

Which Lucca Front versions does this documentation cover?▼

It covers minor version 21.2.x, with patches 21.2.0 through 21.2.5. If the installed minor version differs or the patch is newer than 21.2.5, the documentation may not match the actual API and should not be trusted.

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

Consult the migrations reference which lists cumulative ng generate codemods with their introduction versions, plus the changelog section of each affected component's API documentation for structural changes.

Why does generated Lucca Front code use wrong property names?▼

Property names and types must come from the component's API documentation file, never from memory. If the project runs an older patch than 21.2.5, fixes published after that patch describe APIs that do not exist in the installed code.

Can I use deprecated Lucca Front components?▼

No. The deprecated components reference lists all deprecated components, and code should never be generated with them. Always propose the documented replacement component instead.

Related Skills

Explore More Software Engineering Skills→
jbaranskijbaranski

jeff-skill-angular-project

Install or update the Angular CLI globally and verify with ng version.

Community
Intermediate
DITEKmaxDITEKmax

angular-tooling

Streamlines Angular v20+ project setup, code generation, building, testing, and CI configuration via Angular CLI and Node.js.

Community
Intermediate
apakouapakou

Design System

Enforce predefined components and design tokens in UI development.

Community
Intermediate
trantuddt12trantuddt12

angular-material

Implement Angular Material UI components with theming and accessibility.

Community
Intermediate