원클릭으로
add-lit-component
Add a new Lit component to the UI, following project conventions for structure, naming, and style.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Add a new Lit component to the UI, following project conventions for structure, naming, and style.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Mark a task or feature as complete and perform the final branch, commit, pull request, and merge workflow.
Add a new shared utility function or type, following project conventions for reusable logic and shared types.
Bulk update a Contentful field value with the provided script, including dry runs and publishing guidance.
Complete new features, bug fixes, refactoring, or other code changes with the project workflow.
Fetch and rebuild static Contentful content for the Heroic Adventures App using the project content pipeline.
Safely add or update build and test scripts in the scripts directory using project conventions.
| name | add-lit-component |
| description | Add a new Lit component to the UI, following project conventions for structure, naming, and style. |
Purpose: Add a new Lit component to the UI, following project conventions for structure, naming, and style.
When to Use:
Instructions:
src/client/.@customElement decorator and extend LitElement or project base classes.css template and reference styles.global.ts for shared styles.Code Example:
import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
@customElement("my-widget")
export class MyWidget extends LitElement {
@property({ type: String }) label = "";
static styles = css`
/* styles here */
`;
render() {
return html`<div>${this.label}</div>`;
}
}
Related Files:
src/client/src/client/styles.global.ts