skills.rest
swimlane
swimlaneOFFICIAL
Explore all skills by this author →
WebsiteGitHub

generate-swim-from-angular

Convert Angular components into Lit web components with generated folder structure.

734|115|Updated Aug 17, 2016
Search Tags:#angular#component#conversion#generate#web-components#lit#ngx-ui
One-click install
npx skills add https://github.com/swimlane/ngx-ui --skill generate-swim-from-angular
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-swim-from-angular
Source: https://github.com/swimlane/ngx-ui/tree/main/.cursor/skills/generate-swim-from-angular
Command: npx skills add https://github.com/swimlane/ngx-ui --skill generate-swim-from-angular

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts an Angular component implementation into a Lit web component that mirrors design and behavior, enabling a smooth migration to Swim UI.

Core Features & Use Cases

  • Angular to Lit mapping for inputs, outputs, templates, and content projection.
  • Generates the complete Lit component package under projects/swimlane/swim-ui/src/components/<name>/, including the class file, styles, index.ts, and optional enums/interfaces.
  • Updates the central export surface and preserves demo parity with existing Angular demos.

Quick Start

Provide the Angular component file or path to initiate the conversion and generate the corresponding Swim Lit component.

Frequently Asked Questions about generate-swim-from-angular

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

FAQPage Schema
How do I convert Angular components to Lit web components?▼

Converting Angular components to Lit involves mapping inputs, outputs, templates, and content projection to generate a complete Lit component package that mirrors the original design and behavior for migration.

What is the process for mapping Angular inputs and outputs to Lit?▼

The mapping process translates Angular inputs, outputs, templates, and content projection into Lit web component properties and events, preserving full design and functional parity during migration.

Does the Angular to Lit conversion generate styles and TypeScript exports?▼

Yes, the conversion generates the complete component folder structure including the main class file, styles, index.ts exports, and optional enums or interfaces when defined in the original Angular component.

Can I use this Angular to Lit conversion for Swim UI migration?▼

Yes, this conversion supports Swim UI migration by generating Lit web components under the Swim UI project structure, applying design tokens, CSS variables, and enforcing BEM naming conventions.

What are the limitations of converting Angular templates to Lit web components?▼

A limitation is that the generated output strictly adheres to BEM naming, design tokens, and WCAG guidelines, which may require manual adjustments for highly complex Angular-specific logic.

Related Skills

Explore More Software Engineering Skills→
madebynoammadebynoam

dcode:find-component

Locate UI component code by screenshots, routes, or component names.

Community
Intermediate
swimlaneswimlane
734

generate-swimlane-swim-solution

Generate standalone Swimlane Lit Element solutions using the swim-ui CDN bundle.

Official
Advanced
njculpinnjculpin

audit-style

Audit CSS in Astro and SolidJS files for BEM and design token compliance.

Community
Advanced
oguzhan18oguzhan18
6

angular-destroyref

Migrate Angular subscriptions from ngOnDestroy and Subject patterns to DestroyRef and takeUntilDestroyed.

Community
Intermediate