メニュー
Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/archibate/dotfiles-claude --skill waitlist-pageコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Create or edit agent-facing/LLM prompts using modern prompt-engineering practices. Use this skill before editing agent-facing docs, rule files, references, skills, memory, or any form of LLM prompt. Also use it before writing LLM tests or evaluations. This is mandatory: NEVER skip this skill before writing agent-facing text; MUST use it before editing a file that will be fed to AI agents.
High-quality C++ OOP coding style (archibate / parallel101 lineage) that overrides sloppy AI-default C++. Use this skill WHENEVER writing, editing, refactoring, or reviewing C++ code (.cpp / .h / .hpp / .cc / .cxx), designing C++ classes, interfaces, APIs, or libraries, or when the user mentions C++ design, OOP, design patterns, dependency injection, RAII, or "clean / modern C++". Apply it even when the user does not explicitly ask for a style: the default way models write C++ leans on free functions, public mutable state, raw new/delete, sentinel return codes, and long loose parameter lists — this skill replaces all of that with abstract-class-or-data-class design, dependency injection, type-rich APIs, value-based error handling, and RAII ownership.
Evidence-driven C++ high-performance computing design, profiling, and optimization across algorithmic time/space complexity, data layout, cache and memory behavior, numerics, SIMD, multicore scheduling, and CPU/accelerator pipelines. Use before designing or changing computation-intensive kernels, high-throughput data structures, performance-critical loops, SIMD/OpenMP/TBB/CUDA code, mixed-precision or sparse representations, or when investigating throughput, latency, scaling, cache, bandwidth, compiler-vectorization, or profiling problems.
SOC 職業分類に基づく
SKILL.md を表示中
| name | waitlist-page |
| description | Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects. |
| triggers | ["waitlist page","coming soon page","pre-launch landing page","email capture page","launch page"] |
| od | {"mode":"prototype","platform":"desktop","scenario":"marketing","featured":1,"preview":{"type":"html","entry":"example.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"inputs":[{"name":"product_name","type":"string","required":true},{"name":"tagline","type":"string","required":true},{"name":"bg_expression","type":"string","description":"CSS color expression for background (e.g., '#FDE8DF' or 'rgba(...)').","required":true},{"name":"fg_expression","type":"string","description":"CSS color expression for text and primary shapes (e.g., '#1A1410' or 'rgba(...)').","required":true},{"name":"accent_expression","type":"string","description":"CSS color expression for brand badge and highlights.","required":true},{"name":"deco_expression","type":"string","description":"CSS color expression for decoration primary.","required":true},{"name":"stripe_expression","type":"string","description":"CSS color expression for accent stripe.","required":true},{"name":"border_expression","type":"string","description":"CSS color expression for input borders (e.g., 'rgba(100,50,30,0.38)' or 'color-mix(in srgb, var(--fg) 38%, transparent)'). Must be valid CSS.","required":true},{"name":"success_expression","type":"string","description":"CSS color expression for success message. Defaults to #2D6A4F if not in DESIGN.md.","required":true},{"name":"btn_label_expression","type":"string","description":"CSS color expression for button label text (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure WCAG AA contrast.","required":true},{"name":"ticker_bg_expression","type":"string","description":"CSS color expression for ticker background (e.g., 'rgba(0,0,0,0.9)'). Must be valid CSS.","required":true},{"name":"ticker_fg_expression","type":"string","description":"CSS color expression for ticker text (e.g., 'rgba(255,255,255,0.9)'). Ensure contrast.","required":true},{"name":"deco_stroke_expression","type":"string","description":"CSS color expression for SVG strokes (e.g., 'rgba(0,0,0,0.12)'). Typically a muted foreground or neutral.","required":true},{"name":"logo_shadow_expression","type":"string","description":"CSS color expression for logo container shadow (e.g., 'rgba(0,0,0,0.08)'). Typically a subtle foreground shade.","required":true},{"name":"logo_fg_expression","type":"string","description":"CSS color expression for logo text/initials (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure contrast against accent.","required":true},{"name":"logo_mark","type":"string","description":"Text initials are HTML-escaped by default. Inline SVG is allowed only after strict allowlist-based sanitization (removing scripts, event handlers, foreignObject, and external references); unsafe input falls back to escaped text.","required":false},{"name":"display_font_url","type":"string","description":"Display font name with spaces encoded as '+' (e.g., 'Syne', 'DM+Sans'). Used in Google Fonts URL.","required":true},{"name":"display_font_css","type":"string","description":"Display font name as it appears in CSS (e.g., 'Syne', 'DM Sans'). Already quoted if needed; no extra quotes in template.","required":true},{"name":"body_font_url","type":"string","description":"Body font name with spaces encoded as '+' (e.g., 'DM+Sans', 'IBM+Plex+Serif'). Used in Google Fonts URL.","required":true},{"name":"body_font_css","type":"string","description":"Body font name as it appears in CSS (e.g., 'DM Sans', 'IBM Plex Serif'). Already quoted if needed; no extra quotes in template.","required":true}],"outputs":{"primary":"index.html"},"capabilities_required":["file_write"],"example_prompt":"Make a waitlist page for a design tool — clean, minimal, with a custom logo and one call-to-action."} |
Pre-launch pages are your first handshake with future users. This skill builds a focused, honest entrance: your brand identity, what you're making, one clear path to join the early list. No artificial scarcity, no fake countdown, no inflation tactics—just a clean, mobile-first vessel for genuine interest.
DESIGN.md for the color system, font pairing, and spatial rules. This is your foundation. A waitlist page lives or dies by consistency with the brand it represents. If DESIGN.md is missing, ask the user to provide one before you proceed.assets/template.html. This template is the hardened seed for all outputs. Copy it to index.html as your base. Do not write HTML from scratch or deviate from this structure. The template has all required layout, form structure, decorations, focus styles, and accessibility scaffolding baked in.{{PRODUCT_NAME}}, {{BG_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{LOGO_MARK}}), follow the replacement rules below:
{{PRODUCT_NAME}}, {{TAGLINE}}): HTML-escape <, >, &, ", ' before insertion into HTML text nodes or attribute values.{{LOGO_MARK}}): If using text initials, HTML-escape them by default. If using inline SVG, you must strictly sanitize it using an allowlist: strip <script> tags, event handlers (on*), <foreignObject>, external refs (href, xlink:href, url()), and any disallowed attributes/elements before insertion. If the SVG cannot be safely sanitized, fallback to escaped text initials. Never emit raw, unsanitized arbitrary HTML. Ensure any SVG scales cleanly within its container.{{BG_EXPRESSION}}, {{FG_EXPRESSION}}, {{ACCENT_EXPRESSION}}, , , , , , , , , , ): Must strictly adhere to an explicit color grammar (, /, /, , or using only local variables). Hard reject any input containing , , , , comments (), , , or external refs to prevent CSS injection. Do not wrap in or add extra quotes. Examples: , , . Insert as-is into CSS variables. Derive from DESIGN.md if present; otherwise use the allowed fallback only.{{DECO_EXPRESSION}}{{STRIPE_EXPRESSION}}{{SUCCESS_EXPRESSION}}{{BORDER_EXPRESSION}}{{BTN_LABEL_EXPRESSION}}{{TICKER_BG_EXPRESSION}}{{TICKER_FG_EXPRESSION}}{{DECO_STROKE_EXPRESSION}}{{LOGO_SHADOW_EXPRESSION}}{{LOGO_FG_EXPRESSION}}#hexrgbrgbahslhslaoklchcolor-mix();{}<>/*@url(#rgba(196, 169, 154, 0.38)color-mix(in srgb, var(--fg) 38%, transparent)#FDE8DF:root--success#2D6A4F{{DISPLAY_FONT_CSS}}, {{BODY_FONT_CSS}}): These are CSS font-family values, already quoted if they contain spaces (e.g., 'DM Sans', Syne). Insert as-is into --font-display and --font-body declarations; do NOT add extra quotes.{{DISPLAY_FONT_URL}}, {{BODY_FONT_URL}}): Spaces must be encoded as + for the Google Fonts URL (e.g., DM+Sans, IBM+Plex+Serif). Validate the URL is well-formed before insertion.--bg = {{BG_EXPRESSION}} (e.g., #FDE8DF)--fg = {{FG_EXPRESSION}} (e.g., #1A1410)--accent = {{ACCENT_EXPRESSION}} (brand badge)--deco = {{DECO_EXPRESSION}} (decoration primary)--deco-stripe = {{STRIPE_EXPRESSION}} (accent stripe)--input-border = {{BORDER_EXPRESSION}} (full CSS expression with opacity)--success = {{SUCCESS_EXPRESSION}} or #2D6A4F fallback--btn-label = {{BTN_LABEL_EXPRESSION}} (button text color for contrast)--ticker-bg = {{TICKER_BG_EXPRESSION}} (animated ticker background)--ticker-fg = {{TICKER_FG_EXPRESSION}} (animated ticker text)--deco-stroke = {{DECO_STROKE_EXPRESSION}} (SVG strokes, typically muted with 12–15% opacity)--logo-shadow = {{LOGO_SHADOW_EXPRESSION}} (logo container shadow, subtle foreground shade)--logo-fg = {{LOGO_FG_EXPRESSION}} (contrasting text color for logo initials)references/checklist.md. Validate every P0 gate before emitting:
type="email" and required; first name has no requirednovalidate; JS uses checkValidity() guardrole="status" or aria-live="polite"prefers-reduced-motion: reduceoutline)aria-hidden="true"<html lang=""> is setdata-od-id (headline, form, logo, ticker, grid, etc.) so agents can customize without parsing.This skill enforces a hardened, template-based workflow to ensure compliance. You must follow this execution path; deviating from the template disqualifies the output.
Mandatory template-based execution:
assets/template.html as your base; do not write HTML from scratch.index.html and replace only the {{PLACEHOLDER}} tokens with validated/escaped values.references/checklist.md before emitting; if any fail, fix and re-validate.P0 gates (must pass):
#2D6A4F for --success.product_name and tagline inputs—no filler copy.checkValidity() guard, success message with role="status".;, {}, <, >, /*, @, url(); font names are URL-encoded; {{LOGO_MARK}} is escaped text initials or strictly sanitized inline SVG (no scripts, no event handlers, no foreignObject, no external hrefs).P1 gates (should pass for quality submission):
prefers-reduced-motion: reduce.aria-hidden="true".<html lang=""> set to correct language code.Decoration restraint:
Only emit after all P0 gates in references/checklist.md pass.
Emit the artifact between tags:
<artifact identifier="waitlist-id" type="text/html" title="Coming Soon — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="en">
...
</html>
</artifact>
One line of description above the artifact; nothing below.
Post-emission: If the user asks for changes, update the index.html in-place and re-run the P0 checklist gates before emitting the next version. Do not skip validation on iterations.