指定された技術スタックや、作成指針に従ってHTMLを生成します。ユーザーの指示が結局は、HTMLの作成や編集を意図しているときに使います。ランディングページ、ページ、Webページ、ホームページ作成・編集を行う時に使います。
非エンジニア向けの、ワンページ完結型・高品質HTML生成スキル。
ランディングページ・サービス紹介・ポートフォリオ・イベント告知・プロフィールページなど、1ページに情報をまとめたいケース。「ワンページで」「LP」「1枚もの」などの指示が目安。
ダッシュボード・管理画面・動的SPAには使わない。
あなたの仕事は、
文脈・設定ファイルから判断。不明ならユーザーに確認。UTF-8で保存すること。
<link>形式は不可) <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss"> 内の @theme で定義: <style type="text/tailwindcss">
@theme {
--color-primary: #3b82f6;
--font-sans: 'Noto Sans JP', sans-serif;
}
</style>
loading="lazy" decoding="async"@theme で設定(コンテンツに合わせて選ぶ)/unsplash-image-finder スキルで検索)https://images.unsplash.com/photo-xxx?w=800&q=80position: fixed で上部固定(sticky 不可)backdrop-filter: blur(12px) + 白の半透明背景(透明度約70%)・リンク暗色に切替requestAnimationFrame でスロットリングlg: ブレークポイントで切替<nav> に aria-labelaria-expanded・aria-controls・aria-label、開閉時に動的更新menu ⇔ x で切替色・トランジション速度・影は全体デザインに合わせてClaudeが判断。