Saucebox Registry
← Browse

@indielayer/add-component

A

Add a new Vue component to @indielayer/ui with themes, tests, docs, and registry exports. Use when creating a new component, adding X-prefixed components, or scaffolding under packages/ui/src/components.

skillclaude

Install

agr install @indielayer/add-component --target claude

Writes 1 file into .claude/skills/, pinned to git-4e9af437.

  • .claude/skills/add-component/SKILL.md

Document

name: add-component description: Add a new Vue component to @indielayer/ui with themes, tests, docs, and registry exports. Use when creating a new component, adding X-prefixed components, or scaffolding under packages/ui/src/components. disable-model-invocation: true

Add component

Scaffold

Create packages/ui/src/components/<name>/:

  • <Name>.vue — plain <script lang="ts"> for props/types/name: 'X<Name>', <script setup> for logic
  • index.ts — export { default as X<Name> } and prop/theme types
  • theme/<Name>.base.theme.ts and theme/<Name>.carbon.theme.ts
  • __tests__/<Name>.spec.ts

Register

  1. packages/ui/src/components/index.ts
  2. packages/ui/src/themes/base/components.ts
  3. packages/ui/src/themes/carbon/components.ts

Docs (if user-facing)

Follow the docs-page skill: docs/pages/component/<name>/.

Verify

From repo root:

pnpm lint:ui
pnpm test:ci

Reference: packages/ui/src/components/button/

Trustgrade A

  • passBody integrity

    Whether the stored document is plausibly the kind of file the artifact declares, rather than something fetched by mistake.

  • passType matchnot applicable to this artifact type

    Whether the artifact is really the kind of thing its metadata claims it is.

  • passFreshness

    How long since the source repository was last pushed to.

  • passPrompt injection

    Scans the artifact's own text for instructions aimed at your agent rather than at you.

  • passLicense

    Whether the source repository declares an SPDX license permissive enough to redistribute.

How the grade is calculated

Each check contributes 0 points when it passes, 1 when it warns, and 2 when it fails. The total maps to a letter:

  • Aevery check passed
  • Bone warning
  • Ctwo warnings
  • Dprompt injection or body integrity failed, or three warnings
  • Fone of those failed, and something else is wrong

These are automated hygiene checks, not a security audit, and not a dependency or vulnerability scan. A grade of A means nothing was flagged — not that the artifact is safe.

Versions

  • git-4e9af43750f92026-07-31