← Back to Skill Library
💻 Software Dev

Build Reference Page

★★★★★v1.1.0

Build catalog/directory pages with search, category filters, and card grids — like the tools, plugins, gateway, and hosting pages on this blog.

skill_view("build-reference-page")

📖 Guide

Load with skill_view("build-reference-page"). Two-file pattern: data file (src/data/<name>.ts) + page (src/pages/<name>/index.astro). Uses addEventListener (never inline onclick) for filter/search.

🔧 How To

Create a data file with typed entries → create the page with search input, filter buttons, and card grid → each card has data-category, data-name, data-desc for JS filtering. Follows the existing 6-page pattern.

⚠️ Pitfalls

Astro <script> tags are ES modules — always use addEventListener. Never use inline onclick/oninput. Read the existing plugin/tools pages for exact reference.

Related Skills

More skills in Software Dev