From armor
Guidelines for authoring reusable UI components: stateless by default, layout as parent's responsibility, slots over props, custom events for communication, and clear extraction thresholds.
How this skill is triggered — by the user, by Claude, or both
Slash command
/armor:component-authoringThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
A good reusable component is a boundary. Its primary function is to reduce cognitive load, NOT necessarily to prevent repetition. Most importantly, not every component should be reusable. If a component is not reusable, these principles need not apply.
A good reusable component is a boundary. Its primary function is to reduce cognitive load, NOT necessarily to prevent repetition. Most importantly, not every component should be reusable. If a component is not reusable, these principles need not apply.
model everything off of HTML. If your component doesn't feel like something the platform could have shipped, it's probably wrong, with the exception of . is such a terrible, bloated HTML element. HTML is a fine, battle-tested standard for creating composable elements.
You will spend more time and effort making a component reusable.
Layout is the parent's job. Components do not set their own margin, position, or placement. Parents use gap, spacing, flex — same way a <button> doesn't margin itself.
Slots over props. Children come in as slotted markup. Reach for props or attributes mostly as sugar for genuinely repeated config. This is almost always a trade-off between developer ergonomics and design flexibility. While it is easier to type "hasSearchIcon=true", it ultimately will become a burden when someone wants to add a new icon. Slots are the most flexible, most verbose. Props and attributes are the least flexible, least verbose. If your component has more than 6 props, you better have a good reason.
Stateless by default. A good component starts with no state. If state isn't shared with anything else, it can live inside. The moment a second consumer needs to read or mutate it, lift it out. Always consider how your component behaves in its default state.
CustomEvents for outward comms. dispatchEvent(new CustomEvent(…, { bubbles: true })). No callback props.
:host { margin: … } anywhere.withX, showY, hasZ piling up on one element.Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub markacianfrani/armor --plugin armor