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 metadatanpx astryx --json template --list --package @acme/astryx-widgets# Inspect source without writingnpx astryx template acme-dashboard --package @acme/astryx-widgets# Copy a page and a block to their real app locationsnpx astryx template acme-dashboard --package @acme/astryx-widgets src/app/acme-dashboardnpx astryx template acme-stat-card --package @acme/astryx-widgets src/components
- Confirm the copied files:
src/app/acme-dashboard/page.tsxandsrc/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.
bashnpx tsc --noEmitnpm 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
| Dimension | Required checks |
|---|---|
| Width | Wide and narrow; include the smallest supported viewport |
| Color | Every supported color mode and theme |
| Input | Keyboard and pointer for the primary task |
| Content | Realistic, empty, long, loading, and error states that the pattern supports |
| Assets | Successful CSS, font, icon, image, poster, and video requests |
| Runtime | No 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).