𝙏𝙖𝙞

webエンジニア🧑‍💻

[🍓Mx_Issue🦑 @Mx_Issue]

ソフトウェアエンジニアとして視野を広げるためのブックガイド｜Shotaro Tsuji https://t.co/PjyvpRUGml

[宮本佳林&Mg(マネージャー) @karin__miyamoto]

コードが書けないアイドルが、
AIと一緒に10時間配信のシステムを
全部作った話。
https://t.co/IHDrEc55um

技術面でまとめたものも書きました。
https://t.co/cW5CuIzF21

是非見てみてね！

[ミヤマ @mmmiyama_D]

パンツスタイルバージョンも！
人によってデザインが変わって楽しいので、ぜひお試しください😊
プロンプトも無料で公開しています👇

[こぎそ @kgsi]

アニメーションが付与されている、SVGアイコンライブラリ「AnimateIcons」👀
shadcnのライブラリとして使えるので手軽にインストールできる。
https://t.co/BKurKG4Ivi

[nino @d151005]

header を sticky した状態で smooth scroll すると画面遷移に最上部までスクロールしない問題、これで解決した。なお画面遷移時のアニメーションもなくなるので一石二鳥。

shadcn/ui のサイトでもこの問題が発生している。

https://t.co/hRqP10UREk

[nino @d151005]

Aceternity UI がすごい

◆ 無料&商用利用可能
◆ Tailwind CSS + React + Framer Motion
◆ ノンパッケージ(shadcn/ui 方式)なので気軽
◆ 海外モダンLPでよく見るエフェクト多数

https://t.co/9kir5R2xnc

[こぎそ @kgsi]

shadcn/uiに「ない」凝ったインタラクションを足すコンポーネント集、Skiper UI。

☑️ Dynamic Island / Image reveal / Vercel Tooltip風など、shadcn本体には載らない"細部に凝ったやつ"が103+
☑️ RaunoのDevouring Details（Vercelエンジニアが書いたインタラクションデザインリファレンス）のインスパイアを明言
☑️ サブスクなしの買い切り型（Premium $129）

所感Aceternity / Magic UI / Cult UI と同じ「shadcn互換のインタラクション集」セグメントだけど、Skiper UIは"質感"に振り切ってるのが差別化点。
プロダクト全体に敷くというより、「ここぞ」の場面に足すための引き出しとして持っておくと良さそう。

[︎︎🐸いまいまい🐌 @imaimai17468]

imaimai UIをリリースしました

shadcnレジストリを使っているのでCLIから持って来れます

実装が微妙に面倒なやつとかを適当に追加していきます
他のコンポーネントライブラリみたいな網羅的なものにする気はないです

https://t.co/aLmLGjYzG8

[こぎそ @kgsi]

React Bitsを見ていた。アニメーション付きのReactコンポーネントを110+集めた、shadcn/jsrepoでコピペ取り込みできるOSSライブラリ「React Bits」

「Hyperspeed」とか他であまり見ないやつが揃っている。 AIでUIを生成するのが普通になってくると、土台のレイアウトや構造はLLMが書ける一方で、「ここで一段見栄えを足したい」という装飾レイヤーは別枠で持っておきたくなる場面はあると思う。

ソースが手元に落ちてくるオーナーシップ型なので、AI生成のコードベースに馴染ませやすいのも噛み合っている印象。

[こぎそ @kgsi]

shadcn/uiにコピペで足せるアニメーション付きチャート集「Evil Charts」。折れ線・棒・円・レーダー・サンキーなど30種類以上が無料・オープンソースで公開されている。
装飾のバリエーションが豊富で、名前の物騒さに反して見た目は上品。

[そう｜Claude Codeで始めるAI自動化 @so_ainsight]

今週GitHubで急上昇したAIリポジトリ10選：

1. mattpocock/skills
Claude CodeやCodex向けの再利用可能なスキル集。要件整理・TDD・コードレビュー・バグ診断など20以上を収録し、実務の品質を底上げできる。
https://t.co/2cpO5gsV5S

2. bojieli/ai-agent-book
「エージェント = LLM + コンテキスト + ツール」を軸に設計原理を10章で解説する書籍の無料公開版。93個の実験プロジェクト付きで、基礎から実践まで学べる。
https://t.co/A2ZZUoEH8t

3. diegosouzapw/OmniRoute
290のAIプロバイダーを1つのエンドポイントから呼び出せる無料ゲートウェイ。上限に達すると自動で別の接続先に切り替わり、トークン圧縮で消費も抑えられる。
https://t.co/SkaW16yESu

4. stablyai/orca
複数のコーディングエージェントを並列で走らせる開発環境。それぞれが独立したgitワークツリーで動くので、結果を並べて比較・統合できる。
https://t.co/RgSxPjJEFm

5. earendil-works/pi
複数のAIプロバイダーを同じ書き方で扱えるエージェント開発キット。実行基盤とターミナルUIを備え、対話型のコーディングCLIとしてそのまま動く。
https://t.co/iQpX6RX7iS

6. tirth8205/code-review-graph
コードベースをTree-sitterで解析し、変更の影響範囲だけをAIに渡せるMCPツール。6つの実際のリポジトリで検証し、中央値で約82倍のトークン削減を達成した。
https://t.co/NFxP9RaT5O

7. CoreBunch/Instatic
WebflowやWordPressの代替になる自己ホスト型のビジュアルCMS。1つのサーバーで編集・管理・公開まで完結し、書き出しはフレームワーク不要の素のHTMLとCSS。
https://t.co/e32ZKpz2kx

8. virgiliojr94/book-to-skill
技術書のPDFをエージェント用のスキルに変換するツール。必要な章だけをそのつど読み込む方式で、全文を渡す場合に比べトークンは24〜51分の1になる。
https://t.co/oYjfjKpJwu

9. blader/humanizer
AIが書いた文章から機械っぽい言い回しを取り除くエージェントスキル。33パターンの検出ルールで、事実を変えずに自然な言葉づかいへ整える。
https://t.co/Twr7m2Pwt8

10. MoonshotAI/kimi-code
ターミナルで動くAIコーディングエージェントのCLI。単一バイナリで配布されて起動が速く、動画入力やエディタ連携にも対応する。
https://t.co/W6pSL14i0v

[数理の弾丸 / 船蔵颯 Ph.D. @_mathbullet]

HTMLをエージェント出力とのインターフェースに使うスタイルが様々な用途に広がっている。過剰なデザイン、場当たり的なデザインを回避し、ストレスなく視認するためのコンポーネント集と規範を整備しています。

知識の吸収、AIによる差分のレビューなど広く使えます。

/html スキル
https://t.co/0vnGlhlncq

[yousukezan @yousukezan]

個人開発でいちばん多い脆弱性「認可漏れ」を、コード付きで理解する https://t.co/PUvIKN8Dip #Qiita

[Tomohisa Takaoka @tomohisa]

herdr+agmsgを使ったオーケストレーションで、intent-cli自身を開発している様子です。人間と話すのはClaudeデスクトップアプリ内の設計スレッドで、herdr内に、オーケストレーションスレッド、設計スレッド、レビュースレッドを置いて、ビデオ内では、レビューがrequest-updateでPRに問題指摘して、実装が修正をし始めるまでの状況を示しています。設計スレッドは作業の指示、設計をするだけなので、いつでも追加のタスクなどについて会話することができます。

[じょーし @paper2parasol]

優先度は変わっていくよなあ

"今後私がプログラミング言語、特定のフレームワークやライブラリの入門書を買うことはほぼ無いでしょう。
最近プログラミングについての本のかわりに読んでいるのは、組織、プロダクト、開発手法、要求定義や設計といったことについての本です。"

https://t.co/oc01Ybmco0

[伊藤由貴(Yoshiki Ito) テスト大事 @yoshikiito]

読んだ

https://t.co/uYGSCqeMdg

[zaru @zaru]

AIにデザインを作ってもらうには、やはりUIコンポーネントをしっかり用意するのが一番安定する。

UIコンポーネント用意するの面倒だったら有名どころのライブラリを指定するだけでいい。仕上がりはとても平凡なテンプレ的な見た目になるけど、AI仕上がり感は減る。

[KAWAI @kawai_design]

Claude Code × Vibe Codingで
「それ何て言えばいい？」を
ゼロにする用語集を作りました

AIにWebサイトを作ってもらうとき、
地味に困るのが
「パーツの名前がわからない」問題。

ヒーロー、モーダル、ブレッドクラム…

名前を知ってるだけでAIへの
指示精度が段違いに変わります。

この用語集では

✅パーツ名/スタイル/インタラクションを網羅
✅各用語に「AIへの指示例」付き
✅ビジュアルUI図鑑で実際の配置も確認できる

Vibe Codingの語彙力、
ここで一気に上げてください。

🔽 用語集はこちら
https://t.co/6fxNw6dLnc

[Torishima / INTP @izutorishima]

見るからにAI臭いんだけどどうしてこの「臭さ」を感じるのだろうな

[山ちゃん｜凡人のAI活用 @yamachan_ai_log]

ChatGPTで作った図解をCodexに渡して「アイコンを少し動かして、GIFにして」と頼むの、良かったです。動く素材は自分には作れないと思ってたので、図解がそのまま動き出した時はちょっと感動しました。新しい技術への挑戦が気軽になってきているのが嬉しいです。