Trying Out Storybook MCP

Storybook MCP connects Storybook with AI agents, enabling them to generate code while referencing component documentation and to test UI components by creating stories. This article shares hands-on experience using Storybook MCP.

Claude Code と Discord 連携はどのように動作しているのか?

Claude Code v2.1.80 から Research Preview 版として Claude Code channels(以下、チャンネル)が利用できるようになりました。チャンネルとは実行中の Claude Code のセッションに対して、外部からイベントを送ることができる MCP サーバーのことです。この記事では、Claude Code と Discord 連携がどのように動作しているのか、その仕組みを解説します。

Discord から Claude Code とやり取りしてみた

Claude Code v2.1.80 から Research Preview 版として Claude Code channels(以下、チャンネル)が利用できるようになりました。チャンネルとは実行中の Claude Code のセッションに対して、外部からイベントを送ることができる MCP サーバーのことです。この記事では、Discord からチャンネルを通じて Claude Code とやり取りする方法を紹介します。

新時代のフロントエンドツールチェイン Vite+ を試してみた

Vite+ は Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown といった人気のツールを統合し、開発, テスト, ビルド, リント, フォーマットなどのフロントエンド開発に必要な機能を1つのツールチェインで提供する新しいフロントエンドツールチェインです。この記事では実際に Vite+ をインストールして、プロジェクトのセットアップから開発、テスト、ビルドまでの一連の流れを試してみました。

CSS によるスクロールトリガーアニメーション

要素が画面内に入った時にアニメーションを開始するスクロールトリガーアニメーションは、これまでは JavaScript を使用して `Intersection Observer API` を利用する方法が一般的でした。JavaScript を使わずに CSS だけで実装を完結できるようになる `animation-trigger` という新しい CSS プロパティが登場しました。

Skill Create スキルを使用したスキルの作成と改善

オープンスタンダードである Agent Skills に従い Claude Code にドメインの専門知識や組織のナレッジを提供するスキルが最近注目を集めていますが、スキルの作成にはいくつかのハードルがあります。Anthropic は skill-creator と呼ばれるスキルの作成と改善のプロセス、パフォーマンス測定を支援するツールを提供しています。この記事では skill-creator を使用してスキルを作成・改善を行うプロセスを実際に体験してみます

iOS Safari で触覚フィードバックを実現する WebHaptics

WebHaptics は、Web アプリケーションで触覚フィードバックを実装するための JavaScript ライブラリです。iOS Safari でも触覚フィードバックを提供することができます。この記事では、WebHaptics ライブラリの概要と、どのようにして iOS Safari で触覚フィードバックを実現しているのかについて解説します。

`clamp()` 関数を使用したレスポンシブなフォントサイズ

レスポンシブデザインにおいてメディアクエリを使用して異なる画面サイズに対して異なるフォントサイズを指定する方法は一般的ですが、いくつかの課題点もあります。`clamp()` 関数を使用することで、画面幅の変化に対してフォントサイズが滑らかに変化するようにできます。また煩雑なメディアクエリの管理を減らすことができます。

AI エージェントを通じてコードとキャンバスを接続するデザインツール Paper を試してみた

Paper は AI エージェントを通じてコードとキャンバスを双方向に接続するデザインツールで、AI にデザインの作成やコードへの変換を任せることができます。Paper の MCP サーバーのツールを組み合わせることでキャンバス上のノードの情報を取得したり、デザインを挿入・編集したりすることができます。この記事では実際に Paper を試して、コードからデザインへ、デザインからコードへの双方向のワークフローがどのように実現されているのかを紹介します。