「Claude Codeに頼んでUIを作ってもらったのに、なんか普通すぎる…」と感じたことはありませんか？ Interフォント、白背景に紫グラデーション、無難なカードレイアウト、これ、実は世界中のエンジニアが同じ悩みを抱えています。 Claude Codeは非常に優秀なコーディングエージェントですが、デフォルトのまま使うとデザインが"AIっぽい平均点"に収束してしまうという問題があります。そこで登場するのが「Skills（スキル）」です。適切なSkillsを導入するだけで、Claude Codeが生成するUIのクオリティは驚くほど変わります。 この記事では、フロントエンド開発で特に役立つSkills10選を、実際の使いどころや導入方法とともに紹介します。UIをもっとリッチにしたい方、Claude Codeをフル活用したい方は、ぜひ参考にしてみてください。 結論：Skillsを使えばClau

この記事のポイント（3行要約） skill-creatorはAnthropic公式が配布する「スキルを作るためのスキル」。Claudeに自分専用の作業手順を教え込める 2025年12月18日にAgent Skillsとして正式リリース。Claude.ai、Claude Code、APIで共通して使える 「フォルダにSKILL.mdを置くだけ」で作れる。コード不要でも始められるが、評価（eval）機能まで使うと本格的なカスタマイズが可能 はじめに — なぜ今「スキル」なのか ChatGPTを使っていて、こんな経験はないだろうか。 「この書き方でブログを書いて」と毎回長いプロンプトを貼り付ける プロジェクトごとに前提ルールを説明し直す チームで「Claudeへの頼み方」がバラバラ Anthropicが2025年12月にリリースした**Agent Skills（以下Skills）**は、これを解

こんにちは、料理と筋トレをこよなく愛する筋肉料理人です。 今日は、スーパーで手に入りやすいマグロの赤身の刺身が、香り豊か＆コクうまな“漬け”に変身する「マグロの七味にんにくオイル漬け」のレシピをご紹介します。 材料を混ぜて漬けるだけで、マグロを漬ける時間もたった10分。それでも、ごま油とにんにくのユッケのようなねっとりしたうま味と、七味唐辛子のさわやかな風味のバランスが最高なんです。ご飯のおかずにも、晩酌のつまみにもぴったりですよ。 先にごま油と七味唐辛子を合わせて、香味オイルを作るのが美味しく仕上げるポイントです。 筋肉料理人の「マグロの七味にんにくオイル漬け」 【材料】2人分 【調理時間】約25分 マグロの赤身の刺身（柵を切ってもOK）　150g アボカド　1個 七味唐辛子　小さじ1/2 ごま油　大さじ1/2 しょうゆ　大さじ1 煮切りみりん　大さじ1程度（今回はみりんと日本酒各大さじ

Cloudflare、こんなに無料でいいんだろうか ― 「クラウド」の定義が書き換わったことに気づかない人々へ 全世界で数百万人が同時にアクセスするようなサービスを設計し、AWSに毎月、数十万から数百万円という「血の滲むようなコスト」を支払い続けてきた立場から言わせてもらえば、今のCloudflareが提示している世界観は、もはや「CDN」なんていう可愛い言葉で呼べるものではない。かつて私たちがオンプレミスからAWSへ移行した時に感じたあのパラダイムシフトが、今、Cloudflareという「Supercloud」によって、さらに残酷な形で繰り返されている。 あえて、いま提供されているサービスを地べたから天井まで並べてみるとこんな感じだ。Cloudflare DNS, CDN, WAF, DDoS Protection, Bot Management, SSL/TLS, Zero Trust

Matt Pocockさんが作った「grill-me」というAgent Skillsが、とてもシンプルなのですがとても良いので紹介したいと思います。 たった3行のスキル Agent Skillsってだいたい数十行〜150行くらいあるものが多い印象ですが、なんと grill-me はたったの3行。 この計画のあらゆる側面について、私たちが共通の認識に達するまで、徹底的に私に質問を投げかけてください。 設計のツリーを枝分かれの先まで一つひとつたどり、決定事項間の依存関係を順番に解決していきましょう。 各質問に対し、あなたの推奨する回答も併せて提示してください。 質問は一度に一つずつお願いします。 もしコードベースを探索することで答えが得られる質問であれば、質問する代わりにコードベースを調査してください。 こんな短い記述で何が変わるの？という感じですが、コーディングエージェントの挙動がガラッと変

1. はじめに こんにちは！ 株式会社EpicAIの松島です！ EpicAIではシステム開発系の案件に関わることが多く、要件整理〜実装まで幅広く触っています。個人では、作りたいものを気軽に作って試したり、AtCoderで競プロをやったりしています。 今回は、自分が個人開発をするときに愛用している技術構成について紹介します。 学生や個人開発者のみなさん、アプリのデプロイ先、どうしていますか？ 「モダンな技術でWebアプリを作りたい！でも…」 AWSやAzureは機能が多すぎて学習コストが高いし、クレジットカードの高額請求が怖い…。 Herokuの無料枠が終わってから、手軽なデプロイ先が見つからない…。 Vercelもいいけど、データベースのお金がかかるのがネック…。 そんな悩みを抱えている開発者に、現在考えうる「最強・最速・完全無料」の技術スタックを紹介します。これを使えば、財布を気にせず、

先日、Claude Codeの開発者でありAnthropicのエンジニアでもあるBoris Cherny氏が、「初期のClaude CodeではRAG＋ローカルベクターDBを使っていたが、最終的にAgentic Searchの方が圧倒的に良いと分かった」 という発言がありました 私はBoris氏のこの投稿を見たとき「やっぱ、そうだよな」と思いました。なぜなら私もRAGで検索システムを作った際に似たようなことを考えていたからです。この記事ではこの騒動の背景を整理しつつ、なぜClaude CodeがRAGを捨ててAgentic Searchを選んだのかを説明します。 Boris Cherny氏について Boris Cherny氏はAnthropicのエンジニアであり、Claude Codeの創設者 でもあります。また『Programming TypeScript』の著者でもあり、複数の技術系ポ

この記事では、親が亡くなったらするべき一般的な相続手続きを、時系列に沿ってご紹介します。 ただし、個々の事情によって手続き内容が異なる場合や、追加書類の提出が必要になることもありますので、事前に関係機関に確認することをおすすめします。 なお、税理士法人チェスターでは、相続手続きの流れや内容をまとめた、税理士監修の【相続3点セット（DVDとガイドブック2冊）】を無料プレゼントしております。詳しくは以下ページをご覧ください。 ＞＞税理士法人チェスターの資料請求はコチラ 1-1.親の死亡後の手続きに優先順位はある？親が亡くなったらするべき手続きは、期限が近いものから優先的に始めましょう。 国民健康保険の資格喪失手続き・年金受給停止の手続き・世帯主変更の手続きなどは、死亡日から14日以内に行わなくてはなりません。 これらの役所関連の手続きが終わり次第、「お金をもらう手続き（死亡保険金の請求）」や「

私は熱烈なPixelユーザーですが、正直に言うとSamsungのGalaxyに搭載されている「エッジパネル」という機能がずっと羨ましくて仕方ありませんでした。 画面の端をサッと撫でるだけで、お気に入りのアプリが出てくる、あのスマートな操作感。 「Pixelランチャーはシンプルでいいけれど、あの便利さも捨てがたい……」 そんな悩みを解決してくれたのが、「Panels」というアプリです。 本家Galaxyを超えた？カスタマイズの自由度が凄すぎるPanelsをダウンロードすると、画面の端にパネルが出てきます。そこには、アプリ、ショートカット、連絡先、Webサイトなどを並べることができます。 カスタマイズ性も抜群で、サイドバーを呼び出す「トリガーエリア」を画面の横ではなく下端に移動させることも可能。 これは手が届きにくい大画面スマホを使っている人には、涙が出るほど嬉しい配慮でしょう。 さらに、サイ

@helloyuki_ さんと @giginet さんがやってて、自分との違いを眺めるのも面白いかと思ったので書いてみる*1。僕の以前の環境は 後悔しているがやめられない開発効率向上術、Neovimを一瞬でVSCode並みに便利にする、自作PC2023: Ryzenをやめた あたりで書いた。 OS Linux、macOS、Windows の3つを、この順に多く使用している。使っている環境が多いほど面倒毎が増えるので、本当なら3つも使わない方が良い。 LinuxはUbuntu 24.04を使っている。よく使うDockerイメージやGitHub Actions環境と同じパッケージ名が使えたり、デスクトップアプリのLinux向けの配布が.deb か .rpm がメインなことが多かったりと、Ubuntuにしておく利点は多い。ただ、手元の Framework Laptop でUbuntu 24.04

はじめに Claude Codeの相棒としてCodex CLIを併用する運用を続けてきましたが、MCPでの連携には大きな課題がありました。 本記事では、MCPからSkillへの移行で得られた改善について共有します。 対象読者 Claude Codeを日常的に使っている開発者 複数のAIツールを組み合わせて使いたい方 MCP（Model Context Protocol）の運用に課題を感じている方 環境 Claude Code Codex CLI なぜCodexと連携するのか Claude Codeは非常に優秀ですが、複雑な問題や長時間の調査が必要なタスクでは、別の視点からのアプローチが有効な場合があります。 Codexをサブエージェント的に活用することで、実装方法の相談や、Claude Codeが行き詰まった問題を解決できることがあります。 MCPでの連携の問題点 当初、CodexをMCP

新年明けましておめでとうございます。 年明け早々ですが、昨年の私が「これは良かった」と思ったClaude Code開発テクニックについて、記録に残しておきます。 1. 前提 昨年は会社で使っているSaaSサービスからMarkdownファイルを生成するツールを複数作成していました。 この他にも、Amazon SNSへ送信するメール本文整形LambdaをClaude Codeと一緒に作成しました。 2. Skills Skillsは良かったです。 最近は「会社で使っているSaaSサービスからMarkdownファイルを生成するツール」を作成していますが、これをSkill化しました。 作成にあたってはAnthropics公式のskill-creatorを使用しました。 新しいCLIツールを開発したときは、最後に振り返りをお願いして、Skillを改善できるか検討しています。 まだ「スラッシュコマンド

最近、ふとした気づきがありました。 それは、「同じものを見ていても、過去と現在の自分では見えている世界がまったく違っている」ということです。 みなさんには、このコードからどんな世界が見えますか？ async function getUserName(userId) { const response = await fetch(`https://api.example.com/users/${userId}`); const user = await response.json(); return user.name; } はじめに こんにちは、株式会社ココナラ在籍のKです。 本記事では、冒頭の5行のコードを通して、私たちが学ぶ理由について考えてみたいと思います。 TL;DR 同じコードを見ても、人によって見えるものが違っている 学習を重ねることで、それまで見えなかった世界が見えてくる 学習

本記事では「JWTベースの認証・認可」という表現を使用しています。 認証（Authentication）：ユーザーの本人確認（ログイン時のID/パスワード検証） 認可（Authorization）：リソースへのアクセス権限の確認（JWTによる権限検証） JWTは主に認可の仕組みとして機能しますが、認証から認可までの一連のシステムを指して「JWTベースの認証・認可」と表現しています。 1.1 JWTの登場背景と従来の認証方式の課題 従来のWebアプリケーションでは、「セッション・Cookie認証」が認証方式の主流でした。これは、サーバー側でユーザーの認証状態をセッションとして管理する方式です。 セッション・Cookie認証の基本的な流れ ユーザーがログインすると、サーバーはセッションIDを発行します。 サーバーは、そのセッションIDとユーザー情報を紐付けて自身のストレージ（セッションストレー

はじめに 認証や認可の実現方法は、システム開発における頻出の関心事の一つかと思います。そんな中、JSON Web Token（JWT）／OAuth2.0／Open ID Connect（OIDC）という言葉もよく耳にするところです。 しかし、「JWTって結局どう使うの？」「OAuth2.0やOIDCってJWTとどう関係するの？」「OAuth2.0とOIDCの違いって何？」という疑問を持つ方も多いのではないでしょうか。 また、JWTに「署名」や「検証」といったキーワードが絡んでくると、途端にハードルが上がったように感じるものです。 これらのキーワードについては既に沢山の記事が公開されていますが、本記事では以下に焦点を当てて解説していこうと思います。 JWT／OAuth2.0／OIDCの関係性を明らかにする OAuth2.0／OIDCより先にJWTを理解することで混乱を防ぐ JWTをシステム開

私（@commte）は、この izanami を、個人開発しました。 このページでは、その知見をもとにアイデア創出や技術選定など 個人開発を成功させるための情報全てを共有します 個人開発の完全ガイドが凄い！ → Claude Code・リソース集・設計ミス集・マネタイズ・注意すべき法律・技術選定コストの落とし穴・技術スタック選定例・大成功したプロダクト共通点・要件定義ガイド・ロードマップ・AI駆動開発 https://izanami.dev/kojin-kaihatsu

これでローカルサーバーが起動してlocalhostが立ち上がり、HEADコミットの差分が以下のように表示されます！ 特定コミットハッシュの指定もできます。 # Review HEAD commit npx reviewit # Review Uncommitted working directory diff npx reviewit . # Review a specific commit npx reviewit 6f4a9b7 # Review HEAD~3 npx reviewit HEAD~3 # Custom port, don't auto-open browser reviewit 6f4a9b7 --port 4300 --no-open UIはGitHub同様side-by-sideとinline、デフォルト空白無視（-w状態）でどちらもグローバルヘッダーから切り替えら

デフォルトはlocalです。スコープによって、設定ファイルに書き込まれる場所が変わったり、設定ファイル自体が変わるのがなかなかトリッキーですね（最初ずっと混乱してました）。.mcp.jsonは、プロジェクトで複数人でMCPサーバの設定を使うときに便利かもしれませんね（APIキー設定とかは困りそうですが）。 設定ファイルを直接編集してClaude Codeを起動することでも、MCPサーバを設定することができます。具体的にはプロジェクトのルートディレクトリに.mcp.jsonをおいて、そこでClaude Codeを起動すれば設定が自動で反映されます。 ~/.claude.jsonの場合は、書く場所で影響範囲が変わる形になっています。ただ、~/.claude.jsonはすべてのプロジェクトのMCP以外も含めた設定ファイルが保存された大きいファイルなので、直接編集が難しいです（一回派手にぶっ壊しま

（2025.6.21 会話のトピックのランダム性を改善させるためプロンプトを更新しました） 「初対面の外国人を前に、会話が盛り上がらない…」 「パーティーの輪の中で、うまく話が続けられず気まずい思いをした…」 英語学習でぶつかる大きな壁の一つが、準備していない場面でのフリートークではないでしょうか。私自身、こうした場面で「もっと気の利いたことが言えれば…」と落ち込んだ経験が何度もあります。 そんな中、田中渓（@KeiTanaka_Radio）さんのXポストが、この悩みを解消する非常に実践的な学習法を紹介し、話題になっていました。 英語学習してきた中で、やって一番役立っていること 1. 自分の人生の流れを全部を書き出す 2. 以下についても全部書く ・学校(高校や大学など)で勉強したこと ・今やっている仕事の内容(その業界の現在地や市況、今後の展望などもできれば) ・それに至るまでの職歴など