菜单
Simplified Japanese web artifacts builder skill for creating single-file HTML applications with Japanese UI components, i18n settings, and responsive design. Triggers on requests for Webアーティファクト, 単一HTMLファイル, HTMLツール作成, 日本語Webアプリ.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Japanese algorithmic and generative art skill covering traditional pattern generation (wagara), calligraphy simulation, zen garden generators, and mathematical patterns from Japanese art. Triggers on requests for 和柄生成, ジェネラティブアート, アルゴリズミックアート, 伝統紋様パターン, Japanese generative art.
Japanese tech article writer with non-duplicate H2/H3 structure design, content generation, and image TODO placeholders. Triggers on requests for 記事作成, 記事を作って, 記事を書いて, 〇〇の記事, テック記事, 解説記事, ブログ記事作成.
Japanese-inspired canvas and graphic design skill for HTML5 Canvas and SVG, covering traditional aesthetics (ma, wabi-sabi, yugen), calligraphy, washi textures, traditional patterns, and seasonal motifs. Triggers on requests for 和風デザイン, Canvas描画, SVGイラスト, 日本画風, Japanese-inspired graphics.
Japanese document co-authoring and editing assistant with proofreading checklist, keigo adjustment, essay structure patterns (起承転結, PREP), and revision tracking. Triggers on requests for 文章推敲, 共同執筆, 文章校正, 敬語調整, 文体統一, レビュー依頼, ドキュメント編集.
Generate Japanese Word documents (.docx) using python-docx with proper Japanese fonts, vertical writing (縦書き), ruby text (ふりがな), and business templates. Triggers on requests to create Word文書, 見積書docx, 請求書docx, 日本語Word, 縦書き文書, ビジネス文書Word.
Japanese frontend and web design skill covering typography, vertical writing, form handling, accessibility (JIS X 8341-3), and common Japanese UI patterns. Triggers on requests for 日本語Webデザイン, フロントエンド, 和文タイポグラフィ, Japanese web design.
| name | web-artifacts-builder-jp |
| description | Simplified Japanese web artifacts builder skill for creating single-file HTML applications with Japanese UI components, i18n settings, and responsive design. Triggers on requests for Webアーティファクト, 単一HTMLファイル, HTMLツール作成, 日本語Webアプリ. |
単一HTMLファイルで完結するWebアーティファクト（ミニアプリ・ツール・デモ）の構築を支援するスキルです。HTML + CSS + JavaScript を1ファイルにまとめ、日本語UIコンポーネントやi18n設定を組み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アプリ名</title>
<style>
/* CSS をここに記述 */
</style>
</head>
<body>
<!-- HTML をここに記述 -->
<script>
// JavaScript をここに記述
</script>
</body>
</html>
function toWareki(date) {
return new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
era: 'long', year: 'numeric', month: 'long', day: 'numeric'
}).format(date);
}
// 例: "令和8年3月4日"
<select id="prefecture" name="prefecture">
<option value="">都道府県を選択</option>
<optgroup label="北海道・東北">
<option value="01">北海道</option>
<option value="02">青森県</option>
<!-- ...東北各県 -->
</optgroup>
<optgroup label="関東">
<option value="13">東京都</option>
<!-- ...関東各都県 -->
</optgroup>
<!-- ...全47都道府県をグループ分けして配置 -->
</select>
async function searchAddress(zipcode) {
const code = zipcode.replace("-", "");
const res = await fetch(
`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${code}`
);
const data = await res.json();
if (data.results) {
const addr = data.results[0];
return {
prefecture: addr.address1, // 都道府県
city: addr.address2, // 市区町村
town: addr.address3 // 町域
};
}
return null;
}
<label>氏名 <input type="text" id="name" placeholder="山田 太郎"></label>
<label>ふりがな <input type="text" id="furigana" placeholder="やまだ たろう"></label>
<script>
// compositionイベントを利用してIME入力中の読みを取得
const nameInput = document.getElementById("name");
const furiganaInput = document.getElementById("furigana");
nameInput.addEventListener("compositionupdate", (e) => {
// 変換前のひらがな入力をふりがなフィールドに反映
furiganaInput.value += e.data;
});
</script>
<!-- 言語設定 -->
<html lang="ja">
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- OGP 日本語設定 -->
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="アプリ名">
<meta property="og:description" content="アプリの説明文">
// 日付フォーマット
new Intl.DateTimeFormat('ja-JP').format(date); // "2026/3/4"
// 数値フォーマット（カンマ区切り）
new Intl.NumberFormat('ja-JP').format(1234567); // "1,234,567"
// 通貨フォーマット
new Intl.NumberFormat('ja-JP', {
style: 'currency', currency: 'JPY'
}).format(1000); // "￥1,000"
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
rel="stylesheet">
<style>
body {
font-family: "Noto Sans JP", sans-serif;
}
</style>
display=swap で FOIT（Flash of Invisible Text）を防止preconnect でDNS解決を先行させる/* ベースのレスポンシブ設定 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: "Noto Sans JP", sans-serif;
line-height: 1.8;
padding: 1rem;
max-width: 800px;
margin: 0 auto;
}
/* モバイルファースト: タブレット以上 */
@media (min-width: 768px) {
body { padding: 2rem; }
}
/* 日本語テキストの折り返し */
p, li, td {
word-break: normal;
overflow-wrap: break-word;
}
/* フォームの入力欄（iOSでのズーム防止: 16px以上） */
input, select, textarea {
font-size: 16px;
}