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

lucca-front-scss

Enforces Lucca Front SCSS conventions for naming, layers, tokens, and component file structure.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing SCSS in the Lucca Front monorepo requires strict adherence to flat BEM-style naming, CSS layers, design tokens, and a canonical per-component file structure. This Skill encodes those rules so generated or modified styles pass Stylelint and stay consistent with the design system. ## Core Features & Use Cases - Naming conventions: Flat BEM-like classes (camelCase blocks, - descendants, _ adjacency), .mod-* modifiers, .is-* states, and .palette-* color variants always attached to a component. - Architecture rules: CSS @layer ordering, canonical component file layout (index.scss, component.scss, vars.scss, mods.scss, states.scss, exports.scss), and mandatory design token usage with logical properties only. - Angular integration: Wiring styleUrl to a .component.scss containing the right @use '@lucca-front/scss/src/components/<name>' imports, plus registering new components in highlight-prisme.scss. - Use Case: When adding a new numericBadge component or modifying styles in packages/scss, packages/ng, or stories, apply these rules so npm run lint:style passes and the component ships with its styles. ## Quick Start Write the SCSS for a new Lucca Front component following the lucca-front-scss conventions and wire it to its Angular component.

Frequently Asked Questions about lucca-front-scss

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

FAQPage Schema
How do I name SCSS classes in Lucca Front?▼

Lucca Front uses flat BEM-style naming: camelCase blocks like .numericBadge, descendants separated by hyphens like .indexTable-body-row, and underscores for sibling adjacency like .dialog_backdrop. Never nest with &- concatenation, use IDs, or target HTML elements.

How do I add modifiers and states to a Lucca Front component?▼

Use .mod-<name> for style variations and .is-<name> for controller-driven states, always attached to a component class such as .button.mod-invert. Declare them after the component's base styles, typically inside the mods layer in mods.scss and states.scss.

How do I connect SCSS to an Angular component in Lucca Front?▼

Point the component's styleUrl to a .component.scss file containing @use '@lucca-front/scss/src/components/<name>' with the camelCase folder name. Also import styles for any embedded Prisme components, since missing @use imports ship the component unstyled without build errors.

Does Lucca Front SCSS allow hardcoded values or physical CSS properties?▼

No. All values must reference design tokens like --pr-t-spacings-100 or palette variables, and only logical properties are allowed, such as inline-size instead of width and margin-inline-start instead of margin-left. Stylelint enforces these rules via npm run lint:style.

What file structure does a new Lucca Front SCSS component need?▼

Each component under packages/scss/src/components/<name>/ needs index.scss for selectors and layers, component.scss for base styles, vars.scss for custom properties, mods.scss and states.scss for variants, and exports.scss for mixin re-exports. Register it in components/index.scss and highlight-prisme.scss.

Related Skills

Explore More Software Engineering Skills→
JS-bananaJS-banana

collaborating-with-gemini

Generate front-end UI prototypes, CSS styles, and component code.

Community
Intermediate
maminul007maminul007

ui-storybook

Launch Storybook dev servers, build static exports, and run visual regression tests.

Community
Intermediate
ChoreShoreChoreShore

vue

Build token-driven Vue 3 components with the Composition API and TypeScript.

Official
Intermediate
timelesscotimelessco

tailwindcss

Apply Tailwind CSS utility classes for responsive layouts and dark mode.

Official
Intermediate