From dominiks-skills
Scaffold a new CRUD list page in any frontend codebase — language and framework agnostic. Walks the layers (data fetch, mutations, RBAC, loading/empty/error, i18n, accessibility, UX polish), TDD-first. Use when adding a list/management page to a UI codebase.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dominiks-skills:add-list-pageThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Scaffold a paginated CRUD list page matching the project's house style. The skill is the discipline; the project supplies the components, hooks, and idioms. **Read an existing similar page first.**
Scaffold a paginated CRUD list page matching the project's house style. The skill is the discipline; the project supplies the components, hooks, and idioms. Read an existing similar page first.
Coding principles (always active): see coding-principles skill.
TDD discipline (always active): see Pocock's tdd skill — write the page test first, build to green incrementally.
Find the closest analogous page in the repo (similar resource, similar shape — table or card grid, with create/edit/delete) and read it end-to-end. Mirror its layout, hooks, and idioms.
Write a single component/page test that renders the new page with mocked data and asserts the user can see the rows. The test must fail because the page doesn't exist yet. Apply the write-component-tests skill for setup patterns.
| Artifact | Responsibility |
|---|---|
| List query | Server-side paginated fetch — use the project's data-fetching primitive (TanStack Query, RTK Query, SWR, native fetch + state, etc.). Match the existing pattern. |
| List state hook | Pagination + dialog/selection state. Reuse the project's shared hook if one exists; if multiple pages duplicate the same state, that is itself an extraction signal. |
| Mutation hook | Create / update / delete with cache invalidation, success toast, error surface. Reuse the project's shared mutation hook if one exists. |
| RBAC | Hide write actions behind the role/permission check that lives in the project's auth context. UI hides; backend enforces. |
| Layout | Page header, table or card grid, pagination control — using the project's shared components. |
| Loading / empty / error | Use the project's shared placeholders, not ad-hoc spinners or alerts. |
| Confirm dialog | Use the project's shared confirm dialog for destructive actions. |
| Routing | Register the new page in the project's router/route definition. |
If the project has no shared hooks for list state or mutations and you find yourself reaching for useState to track page/perPage/isFormOpen/editing/deleting, that's a duplication signal — surface it as an extraction issue rather than copying.
| Artifact | What to do |
|---|---|
| API types | Mirror the backend response schema exactly. If the language has discriminated unions / tagged enums, match the backend's serialization casing. |
| Typed client method | Add getThings, createThing, updateThing, deleteThing (or whatever convention this codebase uses) to the API client module. |
| Mock | Register the new client methods in any shared test mock — otherwise tests for unrelated pages will break next time setup is reused. |
Every user-visible string goes through the project's translation layer.
actions.save, actions.cancel, actions.delete, status keys, table keys, validation keys before creating new ones.<resource>.title, <resource>.table.<column>, <resource>.empty, <resource>.form.<field>).aria-label on the table; column headers as <th> (or the framework equivalent).aria-label describing the action and target ("Open menu for ").role="status" (and role="alert" for errors) so assistive tech announces state changes.outline: none without a replacement.prefers-reduced-motion — disable non-essential animations when the user opts out.Vertical slices: implement just enough for the tracer-bullet test to pass. Then add one test + implementation per remaining behavior (RBAC hides actions, empty state shows, validation errors render, etc.).
run-checks skill. Format, lint, typecheck, all tests, frontend health if the project has a tool for it (React Doctor, Lighthouse CI, accessibility lints). Show output. Fix before committing.
architect-review.npx claudepluginhub dominikdorfstetter/skillsCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.