메뉴
Main entry point for AI agents building jay-stack applications. Use when creating pages, working with headless components, or generating jay-html from contracts. Covers the full workflow from reading contracts to producing valid jay-html pages.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
DOM access in Jay Stack projects — use refs and jay-html ViewState, not document.querySelector or imperative createElement. Use when writing page.ts interactive logic, overlays, drags, focus, measuring elements, or global listeners.
Create and edit jay-html template files with data binding, headless components, conditional rendering, loops, and styling. Also covers directory-based routing in jay-stack. Use when creating pages, editing templates, or setting up routes.
Use jay-stack CLI commands for setup, discovery and validation. Covers jay-stack setup (plugin config and references), jay-stack params (discover URL param values for SSG), jay-stack action (run plugin actions), and jay-stack validate (check jay-html and contract files). Use when discovering data, validating files, or running plugin actions.
Read plugin.yaml files and materialized contracts from the agent-kit to understand available components, data shapes, and rendering phases. Use when you need to discover what plugins/contracts exist or understand a contract's tags before creating jay-html.
Run Jay Stack dev server with test mode for automated testing and CI. Use when running smoke tests, integration tests, or needing reliable server startup/shutdown. Handles health checks, graceful shutdown, and auto-timeout.
| name | jay-agent-kit |
| description | Main entry point for AI agents building jay-stack applications. Use when creating pages, working with headless components, or generating jay-html from contracts. Covers the full workflow from reading contracts to producing valid jay-html pages. |
This is the main entry point for building jay-stack applications. Read the relevant sub-skills as needed.
Jay Stack is a full-stack framework where:
agent-kit/references/<plugin>/ for pre-generated discovery data (product catalogs, collection schemas). Faster than CLI commands.Read these as needed:
| Skill | When to Read |
|---|---|
| jay-html-authoring | Creating or editing .jay-html pages, understanding routing, template syntax, headless components |
| jay-contracts-and-plugins | Reading plugin.yaml, materialized contracts, plugins-index |
| jay-cli-commands | Running jay-stack params, validate, or action commands |
| jay-dev-server-test | Starting dev server in test mode, smoke testing |
| jay-dom-refs | DOM access in page.ts — refs and ViewState first; avoid direct document usage |
Also see the agent-kit generated docs (run jay-stack agent-kit):
agent-kit/project-structure.md — Project layout, styling patterns, CSS themes, configuration || Phase | When | Use For |
|---|---|---|
| slow | Build time (SSG) | Static content, SEO data, pre-rendered lists |
| fast | Request time (SSR) | Per-request data (prices, stock, personalization) |
| fast+interactive | Request + client | Data that also updates on the client |
There is no standalone "interactive" phase. Any tag with type: interactive is automatically fast+interactive. Tags without an explicit phase are available in all phases.
Each page lives in a directory under src/pages/:
src/pages/
├── page.jay-html → /
├── products/
│ ├── page.jay-html → /products
│ └── [slug]/
│ └── page.jay-html → /products/:slug
Each page directory can contain:
page.jay-html — template (required for rendering)page.jay-contract — page-level data contract (optional)page.conf.yaml — configuration: which headless components to use (optional, used when jay-html is missing)1. Key-based (data merged into parent ViewState under a key):
<script
type="application/jay-headless"
plugin="my-plugin"
contract="my-contract"
key="data"
></script>
<!-- Access: {data.fieldName}, ref="data.refName" -->
2. Instance-based (multiple instances with props, inline template):
<script type="application/jay-headless" plugin="my-plugin" contract="my-widget"></script>
<jay:my-widget productId="123">
<h3>{name}</h3>
<button ref="addToCart">Add</button>
</jay:my-widget>
Headfull components own their UI template and participate in three-phase rendering. Add contract to a headfull import:
<script
type="application/jay-headfull"
src="./header/header"
contract="./header/header.jay-contract"
names="header"
></script>
<jay:header logoUrl="/logo.png" />
Headfull FS components can nest other headfull FS or headless components in their own <head>:
<!-- header/header.jay-html — uses a plugin headless inside its template -->
<head>
<script type="application/jay-headless" plugin="my-plugin" contract="cart-indicator"></script>
</head>
<body>
<header>
<jay:cart-indicator><span>{itemCount}</span></jay:cart-indicator>
</header>
</body>
All nested imports are hoisted to the page level. Nesting depth is unlimited. Key-based headless imports are not allowed inside headfull FS components.
# Run plugin setup (config templates, credential validation, reference data)
yarn jay-stack setup
# Materialize contracts and generate indexes
yarn jay-stack agent-kit
# Discover URL params for a contract (SSG routes)
yarn jay-stack params <plugin>/<contract>
# Run a plugin action (e.g., search products)
yarn jay-stack action <plugin>/<action> --input '{"query":"shoes"}'
# Validate all jay-html and contract files
yarn jay-stack validate
| Path | Purpose |
|---|---|
src/pages/ | Page routes (directory-based routing) |
agent-kit/materialized-contracts/ | Generated contracts, indexes (run jay-stack agent-kit) |
agent-kit/references/<plugin>/ | Pre-generated discovery data (run jay-stack agent-kit) |
node_modules/<plugin>/ | Plugin packages with plugin.yaml |
Jay Stack owns rendering. When adding interactivity beyond jay-html bindings:
.withInteractive.exec$ inside handlers only).document.querySelector, imperative createElement UI, and document-level drag listeners.Read jay-dom-refs before reaching for document.*.