skills.rest
ChenyCHENYU
ChenyCHENYUCOMMUNITY
Explore all skills by this author →
Website𝕏@CHENY_ychenyGitHub

template-extract

Extracts Vue page scenarios into wl-scenario JSON templates for deterministic regeneration.

5|1|Updated Apr 8, 2026
Search Tags:#frontend#code generation#vue 3#deterministic rendering#template extraction#page blueprint#scenario json
One-click install
npx skills add https://github.com/ChenyCHENYU/wl-skills-kit --skill template-extract-chenychenyu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: template-extract
Source: https://github.com/ChenyCHENYU/wl-skills-kit/tree/main/files/.wl-skills/skills/core/template-extract
Command: npx skills add https://github.com/ChenyCHENYU/wl-skills-kit --skill template-extract-chenychenyu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams repeatedly hand-write similar Vue 3 admin pages, and AI-generated pages drift in structure each time. This Skill converts proven, standards-compliant pages into reusable wl-scenario JSON templates so future pages are generated deterministically instead of re-written from scratch. ## Core Features & Use Cases - Low-token discovery: Uses project snapshots and Page Blueprint similarity search to check whether a reusable scenario already exists before extracting. - Deterministic extraction: Runs wl-skills scenario extract to capture queries, columns, toolbar buttons, operations, API config, form sections, and extensions from an existing page. - Desensitization and validation: Guides placeholder replacement for business values, validates the scenario JSON, and verifies round-trip rendering against the source page. - Use Case: After finishing a well-structured order list page, extract it into the sale domain scenario library so the next similar page is rendered from the template with zero AI guesswork. ## Quick Start Ask the AI to extract the page at src/views/sale/demo/domestic-trade-order into a scenario template and store it in the sale domain.

Frequently Asked Questions about template-extract

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a Vue page into a reusable scenario template?▼

Point the Skill at the target page directory, then it runs wl-skills scenario extract to capture queries, columns, buttons, API config, and form sections into a wl-scenario JSON file. The result is validated and stored under templates/scenarios/<domain>/.

What is the difference between Page Blueprint and wl-scenario JSON?▼

Page Blueprint is a desensitized structural summary used only for low-token similarity search to find reusable scenarios. The wl-scenario JSON is the authoritative source that can be deterministically rendered back into working page code.

Can I extract a page that does not follow the project standards?▼

No. Pages that violate the standards in standards/ are rejected with audit suggestions, requiring remediation before extraction. This prevents low-quality patterns from polluting the scenario library.

Why does my extracted template fail to render custom methods?▼

Custom methods not recognized by the extractor must be moved verbatim into extensions.customMethods, and import statements must go into customImports. The scenario validator blocks handler code containing module statements.

When should I not create a new scenario template?▼

Avoid creating a new template when Blueprint search finds a highly similar existing scenario; enhance the existing one with matchHints or parameters instead. Also reconsider when extensions would outweigh the declarative core of the page.

Related Skills

Explore More Software Engineering Skills→
ChenyCHENYUChenyCHENYU
1.0k

page-codegen

Generate Vue 3 page components from JSON or natural language descriptions.

Community
Advanced
tw93tw93
11.0k

kami

Generate typeset PDF documents, slide decks, and landing pages from editorial HTML templates.

Community
Advanced
tonone-aitonone-ai
69

proof-recon

Inventory tests, frameworks, coverage, and CI to assess testing maturity.

Official
Advanced
Atlas-AI-Store-BuilderAtlas-AI-Store-Builder

atlas-copilot-cli

Generate Shopify stores, product pages, and funnel pages from product URLs.

Official
Advanced