発行
Claude Codeのすべての設計思想は「コンテキストウインドウは有限で、埋まるほど性能が落ちる」という1つの制約から導かれます。第1回ではその制約の正体を整理し、「この情報を、どこに置くか」という問いへの最初の回答としてCLAUDE.mdの設計原則を読み解きます。
SvelteKit・Astro・Next.jsといったWebフレームワークがもつCSPサポートの仕組みと、フレームワークを利用する際の留意点を解説します。
AIの登場によって、調べ物の体験は大きく変わりました。しかし、情報の真偽を確認し、最終判断を下す責任は、AIを利用する我々にあります。AIから、信頼できる情報を引き出すにはどうしたらよいかを考えてみましょう。
発行
AIの台頭によってデザインの仕事はどう変わるのか。エンジニア・テクニカルディレクター・UIデザイナーの3名が、AIをデザインプロセスに取り入れている現状や、DESIGN.mdのようなコンセプトワークの重要性について語り合います。
配置した要素が表示領域に収まらない場合に位置を自動調整するposition-try-fallbacksプロパティと@position-tryルール、そしてアンカー要素の表示状態に応じて要素の表示・非表示を制御するposition-visibilityプロパティを解説します。
このシリーズでは、AnthropicのブラウザAIエージェント「Claude in Chrome」を紹介します。第1回は、Chrome拡張単体としての基本的な使い方を解説します。
発行
dialog要素のTop Layerやinert機能は強力ですが、その強力さゆえに想定外の問題も起きます。ポータルUIの重なり問題やトーストUIとの共存など、代表的なシナリオと対処法を解説します。
CSSや画像、フォントなどスクリプト以外のリソースへのCSPの適用方法と、リンクやフォーム送信・iframeの制御に関するディレクティブについて解説します。
スキルの基本がわかったら、自分のやり方に合わせてスキルを育てていきましょう。スキルの中で別のスキルを呼ぶという応用方法も紹介します。
発行
Content Security Policy（CSP）の基本的な仕組みから、JavaScriptを安全に制御するためのnonce/hash/strict-dynamicの使い方まで解説します。
anchor-size()関数を使って、アンカー要素の幅や高さを参照したサイズ指定の方法を解説します。
Claude Codeの「スキル」機能を解説します。Markdownファイルを置くだけで、繰り返し頼むことを再利用可能な形にまとめられるという機能です。まずはスキルの仕組みと作り方について見てみましょう。