Skip to content
ghostui

Skill

A short decision path for building and reviewing Ghost UI components.

Source

The working rules live in .agents/skills/ghost-craft/references/rules.json. The project workflow lives in .agents/skills/ghost-craft/SKILL.md. The public download is generated from the rules by npm run ghost:skill.

Decision path

  1. State the user job and choose keep, merge, or retire. A public component needs a distinct reusable job.
  2. Find one source owner. Compose existing controls and surfaces. Base UI supplies accessible behavior where it fits; Ghost owns appearance and its public API.
  3. Define the smallest useful API and the states the job needs. Keep labels, layout, and product data with their owning composition layer.
  4. Put a working Preview first. Follow it with one short Composition example, then a named working preview for each documented variant.
  5. Check the installed source and the live page in Orca at desktop and narrow widths, in light and dark themes. Exercise a meaningful interaction and keyboard focus. Record gaps that remain.

Examples

  • Use <Button onClick={save}>Save</Button> for an action. Do not copy the button class onto a clickable div.
  • Use Field.Label with Input for a visible field name. Input does not own its label.
  • Use Badge for static status. Use Button or Link for an action.
  • Show a working preview for each variant. A text list of variant names does not show its behavior.

Check the result

Run npm run craft:check after changing the rules. Compare canonical source, installed source, and the docs route. Record live Orca evidence before accepting a component review. Human feedback stays open until the user accepts it.