Lumo · Component Creation Protocol

What problem does it solve?

Standardizes the creation of Angular components within the Lumo Design System to ensure consistency and accessibility.

Core Features & Use Cases

• Enforces the required file structure for each component: a dedicated folder named after the component containing <component-name>.component.ts, <component-name>.component.html, <component-name>.component.spec.ts, and <component-name>.docs.md.
• Uses Angular 20+ standalone components and TailwindCSS for styling.
• Includes comprehensive documentation per component detailing its purpose, inputs and outputs, usage examples, and visual states, with strong accessibility practices (ARIA, focus management, contrast).
• Provides a standardized publishing pattern to export the component in an npm package (export * from './<component-name>/<component-name>.component').
• Encourages a consistent workflow from definition to testing and documentation before integration into the design system.

Quick Start

Create a new component folder named <component-name> and add the required files: <component-name>.component.ts, <component-name>.component.html, <component-name>.component.spec.ts, and <component-name>.docs.md, then implement using Angular 20+ standalone pattern with Tailwind classes and accessibility in mind.