lucca-front-all

Generates version-accurate Angular code using Lucca Front and Prisme design system components.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When writing or modifying Angular code that uses the Lucca Front / Prisme design system, AI assistants often rely on outdated or hallucinated APIs. This Skill forces version detection of the installed @lucca-front/ng package and loads the exact documentation for that version, so generated code matches the real component API. ## Core Features & Use Cases - Version-aware documentation resolution: Detects the installed @lucca-front/ng version (major, minor, patch) and resolves the correct reference files, including minor-version overrides and per-patch fix notes. - Component API, examples, design and Figma docs: Provides per-component Angular API references, Storybook-based code examples, design guidelines, and Figma variant mappings for over 100 components (button, select, date picker, dialog, etc.). - Migrations and deprecations: Lists codemods (ng generate @lucca-front/ng:<name>) for version upgrades and blocks usage of deprecated components by suggesting replacements. - Use Case: A developer asks to add a multi-select with search to a project on @lucca-front/ng 21.2. The Skill detects the version, applies the 21.2 overrides, and generates code using only the inputs and outputs that exist in that exact version. ## Quick Start Ask the assistant to write or review Angular code using lu-* or pr-* components, and it will first detect your @lucca-front/ng version and consult the matching documentation before answering.

Frequently Asked Questions about lucca-front-all

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

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

Ask for the component you need (e.g., a button, select, or date picker) and the Skill detects your installed @lucca-front/ng version, then reads the matching API reference and Storybook examples before generating code. It never relies on memorized property names.

How does the Skill handle different @lucca-front/ng versions?▼

It reads the resolved version from node_modules or package.json, then loads the base documentation for that major version plus override folders for earlier minors and fix files for specific patches. If the version is not covered, it stops and asks the user.

Which Lucca Front versions are supported?▼

Major versions 21 and 22 are documented. Version 21 covers base 21.3.1 with overrides for 21.0, 21.1, and 21.2, plus the technical minor 21.4 for Angular 22 compatibility. Version 22 covers the 22.0 base.

Can I migrate my project to a newer Lucca Front version?▼

Yes. The migrations.md reference lists all codemods runnable via ng generate @lucca-front/ng:<name>, such as lu-button, lu-select, and tokens-spacings, which rewrite templates, SCSS, and imports to absorb API changes.

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

The Skill consults the deprecated components documentation before using any unknown component and refuses to generate code with deprecated components, proposing the supported replacement instead.

Does it support Figma-to-code workflows?▼

Yes. Each component has a .figma.md reference with Figma variant names and node IDs, plus a .design.md file with do/don't guidelines, supporting both Figma-to-code integration and code-to-Figma mockup creation.