Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
Add a reactive property to an existing Lit web component with proper decorators, types, tests, specification updates, and documentation
Install Add Component Property
$ npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install IgniteUI/igniteui-webcomponents add-component-property --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/IgniteUI/igniteui-webcomponents.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/add-component-property .claude/skills/add-component-property && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "add-component-property" agent skill from https://github.com/IgniteUI/igniteui-webcomponents/tree/master/.agents/skills/add-component-property into .claude/skills/add-component-property/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-component-property", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/IgniteUI/igniteui-webcomponents/tree/master/.agents/skills/add-component-propertyType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install IgniteUI/igniteui-webcomponents add-component-property --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/IgniteUI/igniteui-webcomponents.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/add-component-property .agents/skills/add-component-property && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "add-component-property" agent skill from https://github.com/IgniteUI/igniteui-webcomponents/tree/master/.agents/skills/add-component-property into .agents/skills/add-component-property/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-component-property", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install IgniteUI/igniteui-webcomponents add-component-property --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/IgniteUI/igniteui-webcomponents.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/add-component-property .cursor/skills/add-component-property && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "add-component-property" agent skill from https://github.com/IgniteUI/igniteui-webcomponents/tree/master/.agents/skills/add-component-property into .cursor/skills/add-component-property/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-component-property", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path .agents/skills/add-component-property--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install IgniteUI/igniteui-webcomponents add-component-property --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/IgniteUI/igniteui-webcomponents.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/add-component-property .gemini/skills/add-component-property && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "add-component-property" agent skill from https://github.com/IgniteUI/igniteui-webcomponents/tree/master/.agents/skills/add-component-property into .gemini/skills/add-component-property/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-component-property", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install IgniteUI/igniteui-webcomponents add-component-propertyInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/IgniteUI/igniteui-webcomponents.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/add-component-property .github/skills/add-component-property && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "add-component-property" agent skill from https://github.com/IgniteUI/igniteui-webcomponents/tree/master/.agents/skills/add-component-property into .github/skills/add-component-property/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-component-property", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install IgniteUI/igniteui-webcomponents add-component-property --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/IgniteUI/igniteui-webcomponents.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/add-component-property .opencode/skills/add-component-property && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "add-component-property" agent skill from https://github.com/IgniteUI/igniteui-webcomponents/tree/master/.agents/skills/add-component-property into .opencode/skills/add-component-property/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-component-property", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
add-component-property- GitHub stars
- 170
- Token cost
- ~1.9k tokens
- SKILL.md length
- 727 words
- Files
- 1
- Skills in repo
- 13
- Repo updated
- First seen
- Licence
- MIT
At a glance
Add a reactive property to an existing Lit web component with proper decorators, types, tests, specification updates, and documentation
- Works in 7 steps: Declare the property → Write the description → React to the change → …
- Tasks that involve Technical documentation
- SKILL.md covers Required Context, Steps, Validation Checklist and Common Pitfalls, plus 1 more section
- Calls npm
What it does
Add Component Property is an agent skill from IgniteUI/igniteui-webcomponents. Add a reactive property to an existing Lit web component with proper decorators, types, tests, specification updates, and documentation
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Technical documentation. The repository describes itself as: Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable… The licence is MIT.
When your agent uses it
- Tasks that involve Technical documentation
Example prompts
- “/add-component-property”
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit a6f3e2c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Add Component Property loads about 1.9k tokens when it runs. Until then it costs about 40 tokens; SKILL.md has 727 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from IgniteUI/igniteui-webcomponents at commit a6f3e2c, republished under its MIT licence (© IgniteUI). 727 words, ~1,890 tokens.
Download SKILL.mdSave it as
.claude/skills/add-component-property/SKILL.md (or your agent's skills folder).- name
- add-component-property
- description
- Add a reactive property to an existing Lit web component with proper decorators, types, tests, specification updates, and documentation
Add Component Property
Adds a reactive property together with its JSDoc, tests, spec update and generated metadata. The rules are in Properties and Attributes and API Documentation.
Related: create-new-component, update-component-styles.
Required Context
- Component to change
- Name and type: camelCase property, kebab-case attribute
- Default value: booleans default to
false - Reflection: only for primitives that affect styling or accessibility
- Description: ships in the public API docs
Steps
1. Declare the property
Put it in //#region Public attributes and properties:
/**
* The style variant of the component.
* @attr
* @default 'primary'
*/
@property({ reflect: true })
public variant: StyleVariant = 'primary';
/**
* Whether user interaction with the component is disabled.
* @attr
* @default false
*/
@property({ type: Boolean, reflect: true })
public disabled = false;
/**
* The number of items rendered per page.
* @attr items-per-page
* @default 10
*/
@property({ type: Number, attribute: 'items-per-page' })
public itemsPerPage = 10;
/** The items rendered by the component. */
@property({ attribute: false })
public items: Array<Item> = [];- A
trueboolean default cannot be turned off from markup. Rename the property instead (enabled→disabled). - Objects and arrays get
attribute: falseand are never reflected. - Spell out the attribute for multi-word properties and HTML look-alikes
(
readOnly→readonly). - A read-only value is a getter, not a
readonly @property.
2. Write the description
The JSDoc goes as-is into custom-elements.json, Storybook and the framework wrappers:
- No
igc-tag names in prose. Write "the select", notigc-select. - No "The label attribute of…" and no
Gets/Sets. - A boolean starts with "Whether …" and describes the
truestate. Check the implementation, becausehide*anddisable*names invert the sentence. - Use present tense. Do not use "will".
3. React to the change
If only the template uses the value, read it in render(). For other cases:
| Need | Use |
|---|---|
| Clamp, normalize or coerce incoming values | @coercedProperty({ transform }) below @property |
| Side effect on every set (e.g. validation) | @coercedProperty({ onChange }) below @property |
| Derived state before render | willUpdate(), guarded by changedProperties.has() |
| Side effect that needs the DOM | update(), guarded, and call super.update() |
import { coercedProperty } from '#internals/decorators/coerced-property.js';
@property({ type: Number })
@coercedProperty<number, IgcRatingComponent>({
transform: ({ value }) => clamp(value, 0, 100),
})
public max = 100;Use @coercedProperty instead of a hand-written backing-field accessor pair. Keep the field
initializer, because onChange does not run for it. Keep hand-written accessors only for a
computed getter.
In a form-associated control, a property that is part of constraint validation (min,
pattern, maxLength, …) must re-validate on change. Reuse the static
_revalidate config (onChange: ({ host }) => host._validate()) as
src/components/input/input.ts does.
4. Add tests
Test the default value and a programmatic change after elementUpdated(). Test the attribute
only as far as the decorator allows:
- An attribute property: setting the attribute updates the property.
- A property with
reflect: true: a property change updates the attribute. attribute: false: no attribute tests.
If the property changes the rendered semantics, extend the existing a11y audit. Do not add a separate one.
5. Update the specification
A new property changes the public API, so it also changes src/components/[name]/spec.md.
Use Keeping it current:
- Add a row to
### Properties and attributeswith the name, attribute, reflects, type, default, and the same description as the JSDoc. - Add the new tests to
## Test scenariosunder theirdescribeblock, and renumber. - Add a row to
## Revision history. - If applicable, update the keyboard, ARIA, localization, developer experience, and assumptions and limitations sections, and the TOC entry of any new heading.
To deprecate a property, keep its row and mark it with the version and the replacement.
Show full SKILL.md (257 more words)Show less
6. Regenerate the story metadata
npm run cem && npm run build:metaDo not edit the // region default block of stories/[name].stories.ts. If the control does
not appear, the story was skipped: the filename does not match the tag, or the region fence is
missing (this fails with no warning). Then use the property in the hand-written story
templates.
7. Verify
npm run check && npm run testValidation Checklist
- Declared in the public region, with the correct decorator options
- Booleans default to
false. Complex types useattribute: false. -
@attrand@defaultpresent. The description follows step 2. - Coercion and validation use
@coercedProperty. Lifecycle hooks are guarded. - Tests cover the default, a change and, if the decorator allows, the attribute
-
spec.md: API row, test scenarios renumbered, revision history row -
cemandbuild:metarun. The story template uses the property. -
checkandtestpass. CHANGELOG updated if the property is user-visible.
Common Pitfalls
| Symptom | Cause / Fix |
|---|---|
| Attribute cannot be turned off in markup | The boolean defaults to true. Rename it. |
[object Object] in the DOM | A complex type without attribute: false |
'false' behaves as true | { type: Boolean } is missing |
Attribute is propertyname | Set attribute: 'property-name' explicitly |
onChange skips the first real set | The field initializer was removed. Keep = undefined or a default. |
| Story control missing or description old | build:meta did not run, the story was skipped, or the region was edited |
| Spec numbering jumps | Scenarios were added without renumbering |
Reference Examples
src/components/badge/badge.ts: reflected string, boolean and union propertiessrc/components/input/input.ts:@coercedPropertyre-validation of constraint propertiessrc/components/rating/rating.ts:@coercedPropertytransformfor clampingsrc/components/combo/combo.ts: complex, non-attribute propertiessrc/components/badge/spec.md: a short spec whose API tables track the properties
© IgniteUI, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/add-component-property of IgniteUI/igniteui-webcomponents.
Open the folder on GitHubat commit a6f3e2c
Compare with similar skills
Add Component Property next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Add Component Property this skillIgniteUI/igniteui-webcomponents | 170 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 45k | 1 repos | ~7.5k | Automated safety check: Pass | MIT | |
| Simple Englishmoeru-ai/airi | 50k | 2 repos | ~4.6k | Automated safety check: Pass | MIT | |
| Get API Docs with chubandrewyng/context-hub | 14k | 2 repos | ~775 | Automated safety check: Pass | MIT | |
| Doc SyncJetBrains/ideavim | 10k | 2 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Mailspring App ScreenshotsFoundry376/Mailspring | 18k | — | ~1.5k | Automated safety check: Pass | GPL-3.0 |
Similar skills
Simple English
moeru-ai/airi
Write or rewrite technical text with the rules of ASD-STE100 Simplified Technical English so it is clear, unambiguous, and free of AI slop.
Get API Docs with chub
andrewyng/context-hub
Fetches current documentation for third-party APIs and SDKs with the chub CLI before the agent writes code against them, instead of relying on remembered API shapes.
- Official
Doc Sync
JetBrains/ideavim
Keeps IdeaVim documentation in sync with code changes. An agent skill from JetBrains/ideavim.
Mailspring App Screenshots
Foundry376/Mailspring
Captures screenshots of the running Mailspring dev app for docs, PRs or visual checks by launching it with a debugging port, driving the UI and clipping to an element.
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
More from IgniteUI/igniteui-webcomponents
All 13 skills in this repoIgniteui Wc Customize Component Theme
IgniteUI/igniteui-webcomponents
Theme and style Ignite UI Web Components (and igniteui-react) apps using CSS custom properties, optional Sass, and the igniteui-theming MCP server.
Igniteui Wc Generate From Image Design
IgniteUI/igniteui-webcomponents
Implement application views from design images (screenshots, mockups, wireframes) using Ignite UI Web Components, with the igniteui-cli and igniteui-theming MCP servers for component discovery…
Igniteui Wc Integrate With Framework
IgniteUI/igniteui-webcomponents
Install and integrate Ignite UI Web Components packages into React, Angular, Vue 3, LitElement, or vanilla JS/HTML apps, detecting the framework and applying framework-specific setup (package…
Create New Component
IgniteUI/igniteui-webcomponents
Create a new Lit web component following project conventions, including specification, component class, styles, tests, Storybook story, and exports
Igniteui Wc Choose Components
IgniteUI/igniteui-webcomponents
Identify the right Ignite UI Web Components (igniteui-webcomponents, grids, charts, dock manager, React wrappers) for a UI requirement and point to official docs, examples, and API references.
Igniteui Wc Figma To App
IgniteUI/igniteui-webcomponents
Builds Ignite UI Web Components views from Figma designs, supporting Indigo.Design kits, third-party kits (Material 3, Fluent 2, shadcn/ui, Untitled UI, in-house), and plain frames.
Related
Categories
Questions about Add Component Property
What does Add Component Property do?
Add a reactive property to an existing Lit web component with proper decorators, types, tests, specification updates, and documentation. Add Component Property is an agent skill from IgniteUI/igniteui-webcomponents.
When should I use Add Component Property?
Add Component Property fits situations like: tasks that involve Technical documentation.
How do I install Add Component Property in Claude Code?
Run `npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -a claude-code`. Or copy the skill folder (.agents/skills/add-component-property in IgniteUI/igniteui-webcomponents) into .claude/skills/add-component-property in your project. Claude Code loads it when a task matches its description.
How do I install Add Component Property in Codex?
Run `npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -a codex`. Or copy the skill folder (.agents/skills/add-component-property in IgniteUI/igniteui-webcomponents) into .agents/skills/add-component-property in your project. Codex loads it when a task matches its description.
Can I use Add Component Property in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-component-property, .gemini/skills/add-component-property, .github/skills/add-component-property and .opencode/skills/add-component-property in your project.
What does Add Component Property need to run?
Going by SKILL.md and its folder, Add Component Property needs the command-line tools its instructions call (npm).
Does Add Component Property access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Add Component Property safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Add Component Property use?
Add Component Property is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Add Component Property use?
About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Add Component Property?
Skills that share tags, products or a category with Add Component Property: Diagram Design (cathrynlavery/diagram-design, 45k stars), Simple English (moeru-ai/airi, 50k stars), Get API Docs with chub (andrewyng/context-hub, 14k stars) and Doc Sync (JetBrains/ideavim, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Add Component Property?
IgniteUI (a GitHub organization) maintains it in IgniteUI/igniteui-webcomponents, which has 170 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 7, 2026.
Source: IgniteUI/igniteui-webcomponents on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.