npx claudepluginhub mathews-tom/armory --plugin armoryThis skill uses the workspace's default tool permissions.
To build high-density static infographic artifacts, follow these steps:
Implements Playwright E2E testing patterns: Page Object Model, test organization, configuration, reporters, artifacts, and CI/CD integration for stable suites.
Guides Next.js 16+ Turbopack for faster dev via incremental bundling, FS caching, and HMR; covers webpack comparison, bundle analysis, and production builds.
Discovers and evaluates Laravel packages via LaraPlugins.io MCP. Searches by keyword/feature, filters by health score, Laravel/PHP compatibility; fetches details, metrics, and version history.
To build high-density static infographic artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack: Vanilla HTML5 + CSS3 (Grid/Flexbox) + inline SVG — zero runtime dependencies
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
grid-template-columns/grid-template-rows fractional allocations. No auto-spacing defaults. Every margin/padding intentional.Run the initialization script to create a new static project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a minimal scaffold with:
<style>)Edit the generated index.html directly. Each HTML file = one page = one clear message.
Key patterns:
grid-template-areas for named region layoutsfr units for proportional spatial allocation--color-primary, --color-accent, etc.) for palette cohesionclip-path, border-radius, gradients, and box-shadow for visual depthbash scripts/bundle-artifact.sh
This validates the artifact is fully self-contained:
bundle.htmlShare the validated HTML file in conversation with the user so they can view it as an artifact.
| Task | Use This Skill | Use Instead |
|---|---|---|
| Rich infographic with multiple sections, high data density | Yes | — |
| Self-contained dashboard with interactive tabs or toggles | Yes | — |
| Architecture diagram with bidirectional flows and layered tiers | Yes | architecture-diagram for auto-generated from code |
| Simple concept illustration or icon-style image | No | concept-to-image |
| Slide deck or multi-page presentation | No | html-presentation |
| Architecture diagram generated from existing codebase | No | architecture-diagram |
| Single-page visual where CSS Grid layout control is critical | Yes | — |
| Artifact must be screenshot-ready via Playwright | Yes (with caveat — see Limitations) | — |
| Error | Cause | Resolution |
|---|---|---|
CDN link detected by bundle-artifact.sh | External stylesheet or script reference in HTML | Inline all CSS and JS — no external URLs allowed in output |
| Content overflow / clipping in browser | Viewport too small or fixed heights with overflow:hidden | Use min-height instead of height; test at 1440px wide; use overflow: auto on scroll regions |
| Playwright screenshot cuts off content | Page height exceeds screenshot viewport | Set page.setViewportSize to match content dimensions; use fullPage: true |
bundle-artifact.sh reports missing inline SVG | SVG loaded via <img src> or external ref | Replace with inline <svg> block directly in HTML |
| File size too large to share as artifact | Embedded base64 images or verbose SVG | Optimize SVG paths; avoid embedding raster images |
@media print explicitly if print output is a requirement.