How it works

The real steps pulled from the SKILL.md — the agent runs them in this order.

1. 01

   Establish content and output location

   Read the target repository and its instructions first. Identify the brand, audience, products (cards, gifts, plans), occasions and the pages required, then map them onto the template with **Adapting to a real brief** below. Ask only for information that blocks progress. For a rea

2. 02

   Choose the deliverable

   No existing project and no stack named: build **one self-contained HTML file** from the template, like the store demo. This is the default; do not ask a stack question. The buyer has a framework project or asks for one: inspect it first, never silently migrate an application, and

3. 03

   Lock the visual system

   Read `references/style-guide.md` and `references/visual-contract.md`, then open `references/template.html`. Copy the tokens block as-is before changing copy. Fonts: Bricolage Grotesque (variable; display and UI), Figtree (variable; body) and Caveat (variable; handwritten card mes

4. 04

   Plan the page family

   Read `references/page-library.md`, `references/route-inventory.md` and `references/interior-pages.md`. Inventory every nav item, card, CTA and footer link and give each a real destination (route or section). Collections (gift cards, occasions, plans, help articles, roles) live in

5. 05

   Plan and produce the images

   Read `references/image-plan.md`. Before generating anything, list every image slot by role (gift-card artwork, greeting-card artwork, lifestyle, people, detail, team) with aspect, crop focus and the text it sits next to. Write one art direction sentence for the whole site and app

6. 06

   Build components and interactions

   Use shared components for header, mobile sheet, buttons, chips, segmented controls, fields, accordion, gift card object, greeting card face, phone frame, sticker, drawer and toast. Implement the full cycle for each control (default, hover, active press, focus-visible, selected, d

• SKILL.mddoc · 16 KB
• references/framework-adaptation.mddoc · 7 KB
• references/icon-library.mddoc · 2 KB
• references/image-plan.mddoc · 12 KB
• references/images/card-birthday.webpmedia · 37 KB
• references/images/card-home.webpmedia · 54 KB
• references/images/card-thanks.webpmedia · 41 KB
• references/images/gc-arcade.webpmedia · 31 KB
• references/images/gc-bakery.webpmedia · 88 KB
• references/images/gc-books.webpmedia · 47 KB
• references/images/gc-cinema.webpmedia · 47 KB
• references/images/gc-coffee.webpmedia · 46 KB
• references/images/gc-florist.webpmedia · 52 KB
• references/images/gc-plants.webpmedia · 54 KB
• references/images/gc-ramen.webpmedia · 64 KB
• references/images/photo-cards.webpmedia · 131 KB
• references/images/photo-envelope.webpmedia · 54 KB
• references/images/photo-group.webpmedia · 106 KB
• references/images/photo-open.webpmedia · 97 KB
• references/images/photo-team.webpmedia · 159 KB
• references/images/photo-wrap.webpmedia · 89 KB
• references/interior-pages.mddoc · 3 KB
• references/motion-system.mddoc · 4 KB
• references/page-library.mddoc · 3 KB
• references/quality-checklist.mddoc · 5 KB
• references/reui-components.mddoc · 2 KB
• references/route-inventory.mddoc · 2 KB
• references/style-guide.mddoc · 9 KB
• references/template.htmlweb · 241 KB
• references/visual-contract.mddoc · 4 KB
• scripts/inline-assets.mjscode · 5 KB
• scripts/validate-sticker.mjscode · 20 KB