Test in an app

Prove the template works the way apps use it: installed from the packed package, copied, built, and rendered.

Install the packed package

Install the packed package in a clean app as described in astryx docs cli/integrations/ship/test-in-an-app. Also install every library the copied source imports, such as its icon library. Pack and reinstall after every change.

Copy the template

bash
# Confirm discovery and metadata
npx astryx --json template --list --package @acme/astryx-widgets
​
# Inspect source without writing
npx astryx template acme-dashboard --package @acme/astryx-widgets
​
# Copy a page and a block to their real app locations
npx astryx template acme-dashboard --package @acme/astryx-widgets src/app/acme-dashboard
npx astryx template acme-stat-card --package @acme/astryx-widgets src/components
  • Confirm the copied files: src/app/acme-dashboard/page.tsx and src/components/acme-stat-card.tsx.
  • Inspect the copied source for placeholder substitutions and relative references.
  • Import the copied block into a real page. A file that is never imported has not been tested.

Build every supported app

Run the type check (npx tsc --noEmit, or the app's own script) and the production build in every framework or bundler the integration supports. One toolchain passing does not prove another.

bash
npx tsc --noEmit
npm run build
  • Every import resolves from the copied location.
  • Production builds keep required side-effect CSS.
  • No import bypasses exports, and no dependency resolves only through workspace hoisting.

Render the behavior matrix

DimensionRequired checks
WidthWide and narrow; include the smallest supported viewport
ColorEvery supported color mode and theme
InputKeyboard and pointer for the primary task
ContentRealistic, empty, long, loading, and error states that the pattern supports
AssetsSuccessful CSS, font, icon, image, poster, and video requests
RuntimeNo console error, hydration mismatch, or missing-provider failure

Check the rendered hierarchy, reading order, focus order, clipping, overflow, and fallback states. A screenshot of one default state is not a complete test.

Grade the result

Grade the exact packed revision using the evidence from this test (astryx docs cli/integrations/building-blocks/templates/write-good-templates).