mcpField
A
app-renderer-systems

app-renderer-systems

github.com/pedronauckDevelopment644285 installsUpdated 1w ago
Repository

About app-renderer-systems

app-renderer-systems is a skill for extending domain-oriented UI systems while preserving their layer boundaries and existing data patterns. It guides developers on placement, adapters, hooks, queries, state, and tests without requiring unnecessary scaffolding.

Key features

  1. 01Guidance for system layout and patterns
  2. 02Layered boundaries for components, hooks, and adapters
  3. 03Query key and cache consistency practices
  4. 04Typed errors and cancellation guidance
  5. 05Selective context, state, and test recommendations

Use cases

  1. 01Adding a feature to an existing UI system
  2. 02Changing adapters or query and hook behavior
  3. 03Choosing state ownership for a feature
  4. 04Updating tests for a changed invariant

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/pedronauck/skills --skill app-renderer-systems

After installing, type/app-renderer-systemsin Claude Code to confirm it loaded.

Bundled filesreferences/directory-layout.mdreferences/patterns.md

Details

From the project README

Feature Systems

A systems/<domain>/ module owns its domain's UI-facing adapters, data access, hooks, components, and public barrel. Extend the existing system; create only layers the feature actually needs. A local component edit does not scaffold CRUD adapters, a store, context providers, or tests for every layer.

Read references/directory-layout.md for placement or a new system, and references/patterns.md for the changed API/query/hook pattern. Related skills are conditional: React for component/hook behavior, TanStack for Query/Router/Form, XState Store for that store API, and the existing test runner's guidance when editing tests. Use debugging guidance for an unresolved failure, not every system edit.

  • Keep dependency direction toward lower layers: components consume hooks, hooks consume query/options and adapters; adapters do not import UI. Cross-system consumers use the public barrel.
  • Preserve API envelopes in adapters and query caches; flatten into component view models at the read boundary. Derive types from the public contract and validate untrusted inputs at the owning boundary.
  • Reuse canonical query options/keys across loaders, hooks, mutations, and stream writers. Include stable scope and filters; for infinite queries, continuation cursors belong in pageParam.
  • Pass AbortSignal through adapters and represent errors with the project's typed error contract. Guard missing scope at the request boundary; enabled alone is not a type proof for a non-null assertion.
  • Follow existing freshness defaults. Reconcile mutations through canonical keys; invalidate only when the owning read model requires a server reread. Add optimistic callbacks only for an optimistic contract; cancel conflicting reads, snapshot complete state, and restore on failure.
  • Add context only for state that must be shared through a subtree. A nullable required-provider pattern fits some contexts; split providers only for demonstrated ownership or update-frequency needs.
  • Keep server state in Query. Use XState Store for event-driven local data; explicit lifecycle modes/guards may need a state machine instead. Do not introduce a store merely because the system has async calls.
  • Export supported operations explicitly from the barrel. Reuse the existing suite that owns each changed invariant instead of mirroring the directory tree with tests.

Comments

Markdown supported