skills.rest
lumaui
lumauiOFFICIAL
Explore all skills by this author →
GitHub

Lumo · Component Creation Protocol

Standardize Angular component creation for the Lumo Design System with Tailwind styling, ARIA attributes, and npm packaging

6|Updated Jan 22, 2026
Search Tags:#documentation#accessibility#angular#component#tailwind#design-system#standalone
One-click install
npx skills add https://github.com/lumaui/luma-ui --skill lumo-component-creation-protocol
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Lumo · Component Creation Protocol
Source: https://github.com/lumaui/luma-ui/tree/main/.cursor/skills/component-lib-creation
Command: npx skills add https://github.com/lumaui/luma-ui --skill lumo-component-creation-protocol

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about Lumo · Component Creation Protocol

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

FAQPage Schema
How do I structure Angular components for a design system to ensure consistency?▼

To structure Angular components for a design system consistently, create a dedicated folder per component containing the .component.ts, .component.html, .component.spec.ts, and .docs.md files to standardize development workflows.

What's the best way to add accessibility to Angular standalone components?▼

The best way to add accessibility to Angular standalone components is to implement strong practices like ARIA attributes, focus management, and contrast directly within the component's HTML and documentation files.

How do I document Angular component inputs, outputs, and visual states?▼

To document Angular component inputs, outputs, and visual states, create a comprehensive .docs.md file within the component folder detailing its purpose, usage examples, and accessibility behaviors.

Does the Lumo Design System component protocol require standalone components and TailwindCSS?▼

Yes, the Lumo Design System component protocol requires using Angular 20+ standalone components and TailwindCSS for styling to maintain strict structural and visual consistency across the library.

How do I export Angular components in an npm package for a design system?▼

To export Angular components in an npm package for a design system, use the standardized publishing pattern with the syntax 'export * from ./<component-name>/<component-name>.component' in your package index.

Related Skills

Explore More Software Engineering Skills→
huajian123huajian123
713

angular-di

Implement Angular 20+ dependency injection using inject() tokens and providers across scopes.

Community
Intermediate
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced
Community-AccessCommunity-Access
387

framework-accessibility

Provide framework-specific accessibility patterns and code fixes for React, Next.js, Vue, Angular, Svelte, and Tailwind CSS.

Official
Intermediate
BorisserzBorisserz
1

frontend-ui-engineering

Create production-quality web UI components with design-system conformance and accessibility.

Community
Intermediate