xiaohongshu
xiaohongshu
lead-gen-calculator
Multi-step calculator UI for Astro. Quote tools, pricing calculators. Uses astro-forms for backend.
Full skill instructions
Multi-step calculator UI. Requires astro-forms for backend.
Step-by-step calculator interface. Captures leads through progressive questions.
calculator_ready: true
steps: [...]
step_limits: { max_steps: 7, max_fields_per_step: 4 }
primary_conversion: { type: calculator, id: "quote-calc" }
conversion_verdict: PASS | WARN | FAIL
Calculator IS the primary conversion on its page.
primary_conversion:
type: calculator
id: "quote-calculator"
page: "/kalkulator"
No other forms on calculator pages.
| Page Type | Calculator Allowed |
|---|---|
| calculator | ✅ Required |
| landing | ✅ Optional (embedded) |
| service | ❌ Use form instead |
| thank-you | ❌ Forbidden |
| article | ❌ Forbidden |
Calculator on forbidden page = FAIL.
step_limits:
max_steps: 7
max_fields_per_step: 4
max_options_per_question: 6
| Limit | Value | Result if exceeded |
|---|---|---|
| Steps | 7 | FAIL |
| Fields/step | 4 | FAIL |
| Options/question | 6 | WARN |
Personal data only in final step.
| Step | Can Ask |
|---|---|
| 1-N | Service, location, preferences |
| Final | Name, email, phone, GDPR |
Email before final step = FAIL.
| Type | Behavior | Auto-advance |
|---|---|---|
| radio | Single select | Yes (200ms) |
| checkbox | Multi-select | When all selected |
| dropdown | Select menu | On selection |
| form | Contact (final) | No (submit) |
Calculator submissions MUST include:
data_contract:
required:
- quote_id # Unique hash
- all_answers # Complete step data
- source_page # Calculator URL
- timestamp # ISO datetime
- gdpr_consent # true + timestamp
calculated:
- price_estimate # If pricing enabled
- breakdown # Line items
post_submit_flow:
1_result_page: required # /eredmeny/[hash]
2_confirmation_email: required
3_analytics_event: required # calculator_submit
Any missing = FAIL.
| Element | Rule |
|---|---|
| Images | 1:1 aspect ratio |
| Cards | Brand color bg, white text |
| Social proof | Different per step |
| Chrome | Minimal, focus on question |
| Menu | Hidden on calculator |
| Phase | Action |
|---|---|
| First page | Eager load all assets |
| After load | Prefetch next step |
| API calls | Show skeleton |
gtm_events:
- calculator_step # Step viewed
- calculator_option # Option selected
- calculator_submit # Form submitted
- calculator_value # Quote amount
Missing events = WARN.
| Feature | Implementation |
|---|---|
| Persistence | localStorage |
| Back button | popstate listener |
| State restore | From history.state |
conversion_verdict: PASS | WARN | FAIL
issues: []
| Condition | Verdict |
|---|---|
| Calculator on forbidden page | FAIL |
| >7 steps | FAIL |
| >4 fields per step | FAIL |
| Email before final step | FAIL |
| Missing data contract field | FAIL |
| Post-submit flow incomplete | FAIL |
| >6 options per question | WARN |
| GTM events missing | WARN |
| All pass | PASS |
| Condition |
|---|
| Calculator on thank-you/article |
| Exceeds 7 steps |
| Exceeds 4 fields per step |
| Personal data before final step |
| No result page |
| No confirmation email |
| Condition |
|---|
| >6 options per question |
| GTM events not configured |
| No social proof variation |
xiaohongshu
technical spec
product ux expert
database patterns
Conduct multi-agent task orchestration and workflow coordination.
Initialize project with Conductor artifacts (product definition,
Expert in web animations, transitions, and motion design using Framer Motion and CSS
Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual docume...
PostgreSQL bindings for H3 hexagonal grid system. Use when working with H3 cells in Postgres, including spatial indexing, geometry/geography integration, and raster analysis.
Context-Driven Development skill for projects using Conductor. Use this skill when you detect a `conductor/` directory in the project, when working on tasks defined in a `plan.md` file, or when the user asks about tracks, specs, or plans. Automatically applies TDD workflow, tracks task completion...
Display project status, active tracks, and next actions
Official Stakpak application containerization standard operating procedure, a step-by-step guidline to properly dockerize applications. This is a rule book curated by the Stakpak Team.
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience