| name | crudx-component |
| description | Drop a single basic atom (Dialog, Table, ButtonDropdown, …) or major view (CrudPanelView, CrudFilterView, …) into an existing file using copy-pasteable snippets. |
/crudx-component
You are inserting a single component into the user's code. Use the
pre-baked snippets in this skill's snippets/ directory. Do not
generate the snippet body yourself — the snippets are the source of
truth.
@crudx/mui and @crudx/shadcn expose the same component surface, so a
single snippet works for both. The only thing that changes between them
is the from '@crudx/<ui>' import line — substitute via {{UI_PACKAGE}}.
Step 1 — Gather inputs
Use AskUserQuestion in a single call with up to four questions:
- UI library —
MUI (Material UI) | shadcn / Tailwind
- Component category —
Basic atom (Dialog, Table, …) | Major view (CrudPanelView, CrudFilterView, …)
- Component — present the matching list:
- Basic atoms:
BreadcrumbView, ButtonDropdown, Dialog,
NumberFormatView, RenderFlexView, RenderNodeView, TabView,
Table, TableHead, TablePagination, TableRow,
TableSelectedBulkOptions, TableSettingsDensityOptions,
TableSettingsOptions, TableSettingsSortingOptions, TooltipView
- Major views:
CrudPanelView, CrudTableView, CrudFilterView,
CrudContentView, CrudContentHeaderView, CrudPageHeaderView,
CrudRowItemActions
- Target file path — free text. If the user has a file open, suggest
that path; otherwise ask.
If the list of components is too long for one AskUserQuestion call,
split it: ask category first, then ask the component name in a second
call with that category's options.
Step 2 — Locate the snippet
Snippet path:
snippets/<category>/<Component>.usage.tsx
where <category> is basic or major.
Read the snippet file from this skill's directory.
Step 3 — Substitute and insert
- Replace
{{UI_PACKAGE}} with mui or shadcn.
- Use
Edit on the user's target file:
- If the file has no existing import from
@crudx/<ui>, add the
snippet's import line near other imports.
- Insert the snippet body where the user wants it (at the cursor
position if available; otherwise at the end of the component's
return JSX with a comment marker).
If the file does not exist, ask the user before creating it.
Step 4 — Print TODO checklist
Each snippet has // TODO: ... comments where customization is expected.
After inserting, print a short bullet list of those TODOs so the user
knows what to fill in.
Escape hatch
If the user asks for a variation that isn't in the snippet (e.g.
"a Dialog with a stepper inside" or "a CrudPanelView that mixes two
schemas"), stop and proceed conversationally. The snippets cover the
~80% case; the rest is genuine custom work.
