Skills Guide

Create a new product page

VerifiedSafe

Create a complete, production-ready product page following the hydrascan-pro reference structure.

Sby Skills Guide Bot
DevelopmentIntermediate
008/28/2026
Claude Code
#product-page#astro#content-creation#json-schema#validation

Recommended for

Code reviewClaude CodeBackend developerFrontend developerFullstack developerRefactoring

Our review

Creates a complete, production-ready product page in the hydrascan-pro Astro project, including collection data, content JSON, route validation, and QA checks.

Strengths

  • Follows an established reference structure with clear step-by-step instructions.
  • Automates validation (JSON syntax, Zod schema) to catch errors early.
  • Provides a deterministic section ordering and fallbacks for optional content.
  • Uses existing patterns and assets to ensure consistency.

Limitations

  • Specific to the hydrascan-pro project structure; not portable to other projects.
  • Requires the user to provide several inputs (slug, category, etc.) before starting.
  • Relies on local commands (npm run validate:content) and a dev server URL for verification.
When to use it

When adding a new product page to the hydrascan-pro site and you need a full content structure that matches existing pages.

When not to use it

When you're working outside this particular project or when the product content is incomplete and doesn't need the full page structure.

Security analysis

Safe
Quality score90/100

The skill instructs creating product page content files and running benign validation commands (node JSON.parse, npm run validate:content). No destructive, exfiltration, obfuscated, or privilege-escalating actions are present. It operates within a known project structure for legitimate content authoring.

No concerns found

Examples

New diode laser product page
Create a new product page for the Novalight 4Wave laser in the diodalezerek category. Name: Novalight 4Wave, description: 'Advanced 4-wave diode laser for permanent hair removal', price: 1250000, availability: in_stock.
HydraFacial Deluxe product page
Add a product page for the HydraFacial Deluxe, category hydrafacial, price 450000, preorder, with specs and FAQs.
Nd:YAG laser product page with training
Make a product page for the Nd:YAG Q-Switched laser, category nd-yag-lezerek, out_of_stock, with training and testimonials.

Új termékoldal létrehozása

Teljes, production-ready termékoldal készítése a hydrascan-pro referencia-struktúra szerint.

Input

Kérd be (ha nem adta meg):

  1. Termék slug — fájlnév és URL (pl. novalight-4wave)
  2. Kategória slug — diodalezerek | sminktetovalas | nd-yag-lezerek | hydrafacial | anti-aging | szalonberendezes
  3. Termék neve
  4. Rövid leírás (1-2 mondat)
  5. Ár (HUF szám, vagy null)
  6. Elérhetőség — in_stock | preorder | out_of_stock

Ha a felhasználó egyéb infót is ad (specifikációk, funkciók, USP-k, leírás), használd fel a content feltöltésénél.

Lépések

1. Product collection entry

Keress: src/content/products/{slug}.json. Ha nincs, hozd létre a séma szerint. Lásd: .claude/commands/new-product-page/references/product-collection-schema.json

Kép kezelés: Az image mező @assets/products/{slug}.webp formátumú. Ha a kép fájl nem létezik, használj egy meglévő placeholder képet ugyanabból a kategóriából. Szólj a felhasználónak, hogy a képet cserélje ki. A images[] tömbbe a galéria képeket sorold (szintén @assets/products/ prefix).

2. Content JSON

Hozd létre: src/content/product-content/hu/{slug}.json Lásd: .claude/commands/new-product-page/references/content-schema.json

Minden szekció opcionális a name, shortDescription, description kivételével. A ProductLayout feltételes renderelést használ — ha egy mező hiányzik, az adott szekció nem jelenik meg.

3. Route ellenőrzés

Ellenőrizd, hogy src/pages/{categorySlug}/[slug].astro létezik. Ha nincs, hozd létre a meglévők mintájára (mind ugyanazt a patternt követi — ProductLayout-ot importál).

4. Validáció

  1. node -e "JSON.parse(require('fs').readFileSync('src/content/product-content/hu/{slug}.json','utf8'))" — JSON szintaxis check
  2. npm run validate:content — Zod séma validáció
  3. Ellenőrizd a dev szervert: http://localhost:4321/{categorySlug}/{slug}

Ha validáció hibát dob: Olvasd el a hibaüzenetet, javítsd a JSON-t, futtasd újra. Gyakori hibák: idézőjel escape, trailing comma, hiányzó kötelező mező.

Szekció-sorrend (ProductLayout.astro)

| # | Komponens | JSON mező | Feltétel | |---|-----------|-----------|----------| | 1 | ProductGallery + Hero inline | collection data + content overrides | mindig | | 2 | StatsBar | stats[] | ha van | | 3 | ROICalculator | roi.defaultTreatmentPrice | mindig | | 4 | VideoDescription | videoDescription | ha van | | 5 | ProductCTA variant="light" | cta.afterVideo | mindig (i18n fallback) | | 6 | FeatureRows | featureRows | ha van | | 7 | ProductCTA variant="accent" | cta.afterFeatures | ha van featureRows | | 8 | TrainingCard | training | ha van | | 9 | Testimonials | testimonials[] | ha van | | 10 | ExpertQuote | expertQuote | ha van | | 11 | Specs table + FunctionCards | specs{} + functionCards[] | ha van bármelyik | | 12 | ProductFAQ | faq[] | ha van | | 12.5 | BuyerChecklist | buyerChecklist | ha van | | 13 | WhatsIncluded | whatsIncluded[] | ha van | | 14 | WarrantyService | — (i18n) | mindig | | 15 | ProductCTA variant="primary" | cta.final | mindig (i18n fallback) | | 16 | RelatedProducts | — (auto) | mindig |

Fontos fájlok

  • Layout: src/layouts/ProductLayout.astro
  • Típusok: src/lib/types/product-content.ts
  • Loader: src/lib/load-product-content.ts (cascade: product JSON → category JSON → undefined)
  • Komponensek: src/components/product/*.astro
  • Ikonok, HTML minták: .claude/commands/new-product-page/references/patterns.md

DO

  • Minden szekciót tölts ki tartalommal — egy teljes oldal a cél
  • <mark> tag-gel jelöld a testimonials legfontosabb részét
  • FAQ: minimum 5-7 kérdés, válaszok 2-3 mondat
  • WhatsIncluded: mindig zárd "2 év teljes körű garancia" és "Cseregép javítás idejére" sorokkal
  • ExpertQuote: általában Horváth László, Technikai szakértő
  • Használd a meglévő content JSON-öket mintának (lásd references/patterns.md)
  • A featureRows description mezőben HTML használható (checklistek, grid-ek)
  • JSON validáció MINDIG a végén

DON'T

  • Ne használj „ és " (magyar idézőjelet) JSON stringekben — helyette \u201E és \u201D
  • Ne hagyj trailing comma-t a JSON-ban
  • Ne hozz létre képfájlt — csak hivatkozz rá, szólj a usernek ha hiányzik
  • Ne módosítsd a ProductLayout.astro-t — csak content JSON-t és collection JSON-t írj
  • Ne felejtsd el a categorySlug egyeztetést a collection és content JSON között
  • Ne írj üres tömböket/objektumokat a content JSON-be — hagyd ki az egész mezőt ha nincs tartalom
Related skills

Next.js App Router Expert

Development

A skill that turns Claude into a Next.js App Router expert.

Claude CodeCursoradvanced
890
234
3,473
Admin

README Generator

Development

Creates professional and comprehensive README.md files for your projects.

claudeCursorWindsurfbeginner
259
72
1,370
Admin

API Documentation Writer

Development

Generates comprehensive API documentation in OpenAPI/Swagger format.

claudeCursorWindsurfintermediate
156
44
1,253
Admin