メニュー
Generate multi-fidelity HTML mock from ALPS profile. Creates semantic HTML pages, three CSS fidelity levels, mock API responses, and i18n labels — all from a single ALPS profile. Use when this capability is needed.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/tomevault-io/tomes --skill alps2mockコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
> Use when this capability is needed.
Use when writing kernel, account, or note MASM code that reads from or writes to the advice provider (advice stack / advice map) — validate advice data.
Use when writing a Rust test that exercises a failure path or a MASM test that expects a `panic` / `assert` — assert on the specific expected error variant or error code.
SOC 職業分類に基づく
SKILL.md を表示中
| name | alps2mock |
| description | Generate multi-fidelity HTML mock from ALPS profile. Creates semantic HTML pages, three CSS fidelity levels, mock API responses, and i18n labels — all from a single ALPS profile. Use when this capability is needed. |
| metadata | {"author":"alps-asd"} |
Generate a complete HTML mock site from an ALPS profile. Every CSS class in the generated HTML is an ALPS descriptor ID — zero presentation classes. This enables CSS-only fidelity switching between bare HTML, wireframe, and production quality.
From a single ALPS profile, generate the following directory structure:
{output-dir}/
├── profile/
│ └── alps.xml # Copy of source ALPS profile
├── html/
│ ├── index.html # Home state
│ ├── catalog.html # One HTML per ALPS state
│ └── ...
├── css/
│ ├── level1.css # Bare readability
│ ├── level2.css # Wireframe (information skeleton)
│ └── level3.css # Production quality
├── api/
│ ├── home.json # HAL/HAL-FORMS mock response per state
│ └── ...
├── i18n/
│ └── labels.json # ALPS descriptor ID → human label mapping
└── mock-switch # Shell script to switch CSS fidelity
Every class attribute in the generated HTML MUST be an ALPS descriptor ID. No presentation classes (bg-white, rounded-lg, flex, text-sm, etc.) are allowed in HTML.
Three layers of ALPS become CSS classes:
| Layer | Example classes | Source |
|---|---|---|
| Ontology | .title, .author, .price | Semantic descriptors |
| Taxonomy | .Book, .Catalog, .ShoppingCart | State descriptors |
| Choreography | .goToBookDetails, .doAddToCart | Transition descriptors |
<link rel="profile" href="../profile/alps.xml"> in every <head><link rel="stylesheet" href="../css/level2.css"> as default stylesheet<article> for entities, <form> for unsafe/idempotent transitions, <a> for safe transitions, <nav> for navigation groups. Forms use method="get" for static hosting browsability — the transition semantics (safe/unsafe/idempotent) are carried by the ALPS class name, not the HTTP method.title attribute maps to HTML title attribute on links and buttonsdoc value is NOT rendered in HTML — it's for developers, not end usersGiven this ALPS taxonomy:
<descriptor id="Book" title="Book">
<descriptor href="#id"/>
<descriptor href="#title"/>
<descriptor href="#author"/>
<descriptor href="#isbn"/>
<descriptor href="#price"/>
<descriptor href="#doAddToCart"/>
<descriptor href="#goToCatalog"/>
</descriptor>
Generate (partial example — only showing the Book state; other states like ShoppingCart and their descriptors like goToCart, category, quantity are defined elsewhere in the full profile):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book - ALPS Book Store</title>
<link rel="profile" href="../profile/alps.xml">
<link rel="stylesheet" href="../css/level2.css">
</head>
<body>
<header>
<div>
<a href="index.html">ALPS Book Store</a>
<nav>
<a href="catalog.html" class="goToCatalog" title="Go to Catalog">Catalog</a>
<a = = =>Cart
BK-001
The Art of Programming
Jane Smith
ISBN978-4-1234-5678-9
CategoryProgramming
¥2,480
Qty
Add to Cart
Mock generated from ALPS profile: ALPS Book Store
Key points:
class="Book", class="title", class="doAddToCart" — all ALPS descriptor IDs<form> for doAddToCart (unsafe transition) with nested descriptors as form fields<a> for goToCatalog (safe transition)Minimal styling for raw HTML readability. No layout, no branding. Think GitHub Pages rendering.
body {
max-width: 64rem;
margin: 0 auto;
padding: 2rem;
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.6;
}
a { color: #0366d6; }
The wireframe level is the most important. It makes the ALPS vocabulary visible:
[class] {
position: relative;
}
/* ALPS ID tooltip on hover */
[class]:hover::after {
content: "." attr(class);
position: absolute;
top: -1.25rem;
left: 0;
font-size: 0.5625rem;
font-family: 'SF Mono', Menlo, Consolas, monospace !important;
color: #fff;
background: #555;
padding: 0.125rem 0.375rem;
border-radius: 2px;
white-space: nowrap;
pointer-events: none;
}
/* Block structure: dashed borders */
section, article, aside {
border: 1px dashed #ddd;
padding: 1rem;
}
/* X-box image placeholder */
img {
background: #eee;
background-image:
linear-gradient(to top right, transparent calc(50% - 1px), #ccc, transparent calc(50% + )),
(to top left, transparent ( - ), , transparent ( + ));
: ;
: -;
}
Key features:
.Book, .title, .goToBookDetails)section, article, aside — these are the semantic blocks of the page. The dashes make the information structure visible: which elements are grouped together, how they nest, where one block ends and the next begins. This is the skeleton that disappears in production but must be right before design begins..Catalog > div, section > div) not presentation classes (.book-grid)Full design system with design tokens, custom typography, color palette, transitions, and responsive layout. CSS targets ALPS semantic classes:
.Book .title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
}
.doAddToCart {
display: flex;
align-items: center;
gap: 1.5rem;
}
Key requirements:
:root (colors, fonts, spacing)@media (max-width: 768px)).btn-primary, .card, .grid etc.Generate one JSON file per ALPS state. Use HAL _links for navigation affordances and HAL-FORMS _templates for action affordances:
{
"id": "BK-001",
"title": "The Art of Programming",
"author": "Jane Smith",
"isbn": "978-4-1234-5678-9",
"price": 2480,
"category": "Programming",
"_links": {
"self": {"href": "/api/book/BK-001"},
"goToCatalog": {"href": "/api/catalog", "title": "Go to Catalog"}
},
"_templates": {
"doAddToCart": {
"method": "POST"
Rules:
_links keys match ALPS safe transition descriptor IDs (go*) and describe where the client can navigate._templates keys match ALPS unsafe and idempotent transition descriptor IDs (do*) and describe how the client can act."method" in _links — HTTP method assignment belongs to HAL-FORMS templates and the OpenAPI level, not HAL links (RFC 8288)._templates entry, set method from ALPS transition type: unsafe → POST, idempotent → PUT or DELETE as appropriate.properties entries. Include realistic sample value, prompt, type, and validation hints such as required or min when known.Generate labels.json mapping ALPS descriptor IDs to human-readable labels:
{
"id": "ID",
"title": "Title",
"author": "Author",
"price": "Price",
"Book": "Book",
"Catalog": "Book Catalog",
"goToCatalog": "Go to Catalog",
"doAddToCart": "Add to Cart"
}
Source: Use ALPS title attribute. If no title, use the descriptor id as-is.
Generate a shell script that switches CSS fidelity across all HTML files:
#!/bin/bash
# mock-switch — Switch mock fidelity level
# Usage: ./mock-switch <1|2|3> [mock-dir]
level=$1
dir=${2:-.}
if [[ ! "$level" =~ ^[123]$ ]]; then
echo "Usage: ./mock-switch <1|2|3> [mock-dir]"
exit 1
fi
count=0
for f in "$dir"/html/*.html; do
[ -f "$f" ] || continue
tmp=$(mktemp)
sed "s|level[0-9]\.css|level${level}.css|g" "$f" > "$tmp" && mv "$tmp" "$f"
count=$((count + 1))
done
echo "Switched ${count} files to level${level}.css"
Source: alps-asd/app-state-diagram — distributed by TomeVault.