naming-objects
Name user-created objects (dashboards, saved searches, tiles, alerts) with the shared InlineNameInput. Use when adding or changing the place where a user names or renames something, building an editor or page header that shows an object's name, or when tempted to add a pencil edit button, a "Name" field in a save modal, or a bordered name TextInput.
Source facts
- Repository
- hyperdxio/hyperdx
- Last source activity
- October 5, 2026 at 18:27
- Detected SKILL.md language
- English
- Stars
- 9,948
- Forks
- 492
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- naming-objects
- description
- Name user-created objects (dashboards, saved searches, tiles, alerts) with the shared InlineNameInput. Use when adding or changing the place where a user names or renames something, building an editor or page header that shows an object's name, or when tempted to add a pencil edit button, a "Name" field in a save modal, or a bordered name TextInput.
# Naming objects
Read **`agent_docs/naming_objects.md`** before changing how something is named.
It is the source of truth; this skill is the short version.
## Quick rules
1. Use `InlineNameInput` / `InlineNameInputControlled` from
`@/components/InlineNameInput/InlineNameInput`. Never build a separate
click-to-edit title, pencil button, or "Save name" button.
2. **Saved object shown on its page** → `InlineNameInput` with `onCommit`. Enter
or blur saves immediately; Escape and empty names revert.
3. **Draft in an editor** → `InlineNameInputControlled` with the form's
`control`. The name saves with the editor's save button.
4. Sizes are `xs`, `sm`, `md` only. Page titles use `size="md"` with
`headingLevel={3}`. Editor headers use `size="sm"` (default). Compact rows
use `size="xs"`.
5. Always set `aria-label` ("Dashboard name") and an "Untitled …" placeholder in
sentence case ("Untitled tile").
6. Don't ask for a name inside a save modal. Name inline, then save.
7. In tests, assert the name with `toHaveValue`. In E2E, `fill()` then press
Enter.
## Workflow
1. Read `agent_docs/naming_objects.md`.
2. Look at the reference usages: `DBDashboardPage.tsx` (dashboard name) and
`DBSearchPage.tsx` (saved search name).
3. Check the stories in Storybook under **Components/InlineNameInput**.
4. Update E2E page objects that read the name as text.
5. Run `yarn lint:fix` in the repo root.
View on GitHub