UI-01
apple-design
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible
1ファイル / 22KB
TOOLBOX
内部用。部品 2,917点が下にそのまま並んでいます。
その先に、道具 142本の棚（番号で引ける。「MO-20 の FX-11」のように）。
絞るためではなく、選べるようにするための棚。合うものが無ければ使わない。
いろんなサイトに使える部品を、2,917点。全部いま動いています。
クラス名は付け替えてください（container checkbox のような汎用名を使っています）。
スクロールで、そのカテゴリに来たときだけ読み込みます。上の目次を押すとそこへ飛びます。
スクロールすると読み込みます
スクロールすると読み込みます
スクロールすると読み込みます
スクロールすると読み込みます
スクロールすると読み込みます
スクロールすると読み込みます
スクロールすると読み込みます
スクロールすると読み込みます
スクロールすると読み込みます
UI-01
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible
1ファイル / 22KB
UI-02
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultu
1ファイル / 16KB
UI-03
Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its pale
2ファイル / 11KB
UI-04
サイト・LP・UIの見た目を決める前に、案件のブリーフから「方向」を3つだけ決めて、開ける引き出しを指名する。誰に向けるか／どう感じてほしいか／やらないこと、を確定させてから作風・書体・動き・部品を選ぶ。サイトを作る・作り直す・デザインの相談が始まったとき、まだ方向が決まっていないなら必ず最初に通す。「サイトを作りたい」「LPを」「デザインを」「作り直したい」「かっこよくして」と言われた時点で起動する。方向が決まらないうちに taste
1ファイル / 7KB
UI-05
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, a
1ファイル / 85KB
UI-06
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you
1ファイル / 21KB
UI-07
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
1ファイル / 27KB
UI-08
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic
1ファイル / 4KB
UI-09
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP
1ファイル / 8KB
UI-10
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look che
1ファイル / 10KB
UI-11
Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios,
1ファイル / 8KB
UI-12
Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create prof
見本を開く →12ファイル / 117KB
UI-13
Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
1ファイル / 8KB
UI-14
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla
1ファイル / 16KB
UI-15
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion,
2ファイル / 23KB
MO-01
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupt
2ファイル / 19KB
MO-02
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands
2ファイル / 34KB
MO-03
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-
1ファイル / 13KB
MO-04
Add and use anime.js v4 (Julian Garnier) for web animations — fade/slide-in, scroll-triggered reveals, stagger, timelines, SVG and 3D-walkthrough UI/caption motion. Use when the user wants to animate a web page/LP, add s
3ファイル / 14KB
MO-05
Canvas UI (canvasui.dev) — 35 WebGL/canvas visual-effect components that render your live HTML through fluid, glass, shatter, particle, dither, VHS and glitch effects, installed via shadcn CLI, name-picked as CANVAS-01–3
1ファイル / 9KB
MO-06
404（Not Found）ページのアニメーション42種を名前と番号で引いて案件に組み込む。純CSSのみでJavaScript不要、42本すべて prefers-reduced-motion 対応。「404ページを作って」「エラーページ」「Not Found のページ」「404を入れておきたい」と言われたときに使う。サイトを新規に作るとき・公開前の仕上げのときは、名指しがなくても404ページの有無を確認して提案する。
見本を開く →45ファイル / 188KB
MO-07
Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "wh
1ファイル / 9KB
MO-08
隣り合ったUI要素がくっついて溶けあう「gooey / メタボール」効果を、SVGフィルタで実装する。文字を鮮明に保ったまま融合させ、接地の影と内側のハイライトまで作る。素のCSS/SVGで書くので静的サイトでも動く。「gooey」「ぷにっと」「くっつく」「溶ける」「メタボール」「液体のUI」「FABメニューが分かれる」と言われたとき、またはローダー・トグル・スピードダイヤルに有機的な質感が要るときに使う。React案件では liqui
1ファイル / 10KB
MO-09
Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library,
1ファイル / 14KB
MO-10
Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelt
1ファイル / 10KB
MO-11
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smoot
1ファイル / 4KB
MO-12
Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce,
1ファイル / 21KB
MO-13
Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React
1ファイル / 6KB
MO-14
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger,
1ファイル / 18KB
MO-15
Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animat
1ファイル / 4KB
MO-16
Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities
1ファイル / 12KB
MO-17
スクロールに連動して動画の中へ「ズンズン入っていく」没入型ヒーロー/ページを作る確定手法。AI動画(Higgsfield/Seedance等)を500vhセクション+sticky全画面+lerp追従でスクラブする。ユーザーが「イマーシブ」「没入」「スクロールで動画が動く」「スクロールで中に入っていく」「イマーシブ体験ページ」と言ったら必ず使用。出典: SuguruKun_ai (X/2079036143363121474) のVikto
記事「スクロール演出」→1ファイル / 7KB
MO-18
Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source
3ファイル / 18KB
MO-19
Kinetics (kinetics.colorion.co) — 99 spring-physics micro-interactions catalog with copy-paste CSS + React code. Use when the user wants a spring/bouncy micro-interaction (magnetic button, rubber-band, drag-to-dismiss, t
見本を開く →8ファイル / 441KB
MO-20
自作の動きカタログ FX-01〜24 を番号で引く。登場・スクロール・ホバー/カーソル・テキスト・Canvas生成・SVG・マイクロの7分類。実際に動く見本が1枚のHTMLにあるので、選ぶときはそれを開いて見せられる。実装は anime.js v4。「どんな動きがある？」「動きの候補を見せて」「見本を見たい」「FX-12で」と言われたとき、またはサイトに動きを付ける場面で候補を出すときに使う。
見本を開く →記事「看板になる動き」→2ファイル / 6KB
MO-21
建築パース（静止画レンダリング）を Monid 経由の Seedance で動画化し、繋いで顧客プレゼン用のシネマティック動画に仕上げるワークフロー。建物の形・素材・オブジェクトは一切変えずカメラだけを動かすのが鉄則。Use when the user wants to turn architectural renderings / パース / 外観CG / 内観CG into a presentation video, asks fo
3ファイル / 14KB
MO-22
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.
2ファイル / 18KB
MO-23
Remotion（Reactで動画を作る）の部品23本を名前で引く。文字アニメ・焼き込み字幕・カラオケ字幕・ロゴ・端末フレーム・ターミナル再現・AIの画面。コードで動画を組み立てるときに使う。「Remotionで」「コードで動画を作りたい」「字幕を焼き込みたい」「端末のフレームに動画を入れたい」「ターミナルの操作を動画にしたい」と言われたときに使う。★Premiere/FCPで編集する案件には使わない（そちらは cut / housin
2ファイル / 10KB
MO-24
SwiftUI-Animations (Shubham0812) — 29 polished SwiftUI animations (loaders, toggles, cards, cart, chat bar, scratch-to-reveal, etc.) + 7 Metal shaders (glitch, ripple, halftone, chromatic aberration…), full Swift source
117ファイル / 401KB
MO-25
日本語のテキストアニメーション。文字を1つずつ／文節ごとに出す、タイプライター、シャッフル、ブラー・イン、字間で見せるなどの効果を、和文で破綻しない分割の上に実装する。「文字を1つずつ出したい」「タイポのアニメーション」「見出しを順に光らせる」「タイプライター」「テキストアニメーション」と言われたときに使う。英語向けの split('') や SplitText をそのまま和文に当てると壊れるので、必ずこれを通す。
記事「和文の文字アニメ」→1ファイル / 12KB
MO-26
Create, edit, or fix Lottie/Bodymovin JSON animations for the local Skia Skottie player. Use for text-to-Lottie, SVG/logo/type animation, loaders/icons, state feedback, UI microinteractions, lower thirds, diagrams, data/
23ファイル / 140KB
MO-27
Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar g
見本を開く →29ファイル / 147KB
PT-01
日本語サイトの「アクセス」「地図」「所在地」「行き方」「会場案内」セクションを作る。16のレイアウト型（MAP-01〜16）を引き出しとして持ち、地図そのものの調達方法（タイル/静的画像/手描きSVG）と、モノクロで統一する視覚言語、和文の住所・時間表記の規則を定める。「地図を作って」「アクセスのセクション」「行き方を載せたい」「会場案内」「駐車場の案内図」「拠点一覧」と言われたとき、またはLP・コーポレートサイトに所在地の情報を置くと
見本を開く →記事「アクセスの地図」→2ファイル / 64KB
PT-02
Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and
2ファイル / 11KB
PT-03
beUI（beui.dev）の React 部品76本を名前で引いて案件に組み込む。motion 38・blocks 21・agents 17。とくに agents 17本（会話・ストリーム出力・承認カード・ツール実行・引用・活動ストリーム）は他に持っていない引き出し。React 19＋Tailwind 4＋Motion の案件で使う。「beui」「AIのチャット画面を作りたい」「ストリーミングの表示」「承認カード」「コマンドパレット」
2ファイル / 21KB
PT-04
Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, bar
見本を開く →記事「図をつくる」→259ファイル / 2230KB
PT-05
dither-kit (tripwire.sh/dither-kit) — composable dithered React charts for shadcn/ui: area, line, bar, pie, radar + Sparkline on a tiny canvas engine (no recharts). Ordered-dither fills, entrance animations, scrub toolti
36ファイル / 117KB
PT-06
- Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme d
7ファイル / 41KB
PT-07
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state,
1ファイル / 10KB
PT-08
Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presenta
8ファイル / 21KB
PT-09
Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly i
2ファイル / 3KB
PT-10
Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user explicitly invokes html-p
2ファイル / 3KB
PT-11
Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly i
2ファイル / 6KB
PT-12
Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly i
2ファイル / 5KB
PT-13
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In C
1ファイル / 36KB
PT-14
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, s
1ファイル / 39KB
PT-15
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections pro
1ファイル / 36KB
PT-16
Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more.
1ファイル / 5KB
PT-17
Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right.
2ファイル / 15KB
PT-18
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with
15ファイル / 95KB
PT-19
WebのUIに効果音を付けるかどうかを判断し、付けるなら安全に実装する。「音をつけて」「クリック音」「効果音」「サウンド」「インタラクション音」と言われたとき、または成功・エラー・完了の合図を強めたいときに使う。判断が本体で、実装は従。ライブラリは cuelume（MIT・依存ゼロ）。
1ファイル / 7KB
WR-01
Audit and rewrite content to remove AI writing patterns ("AI-isms"). Use this skill when asked to "remove AI-isms," "clean up AI writing," "edit writing for AI patterns," "aud
1ファイル / 92KB
WR-02
説明的な文章に緩急を設計するための規範。緩急を装飾ではなく認知モードの切替（観察→逡巡→断定→再観察）と未回収の緊張の管理として扱い、文の拍、段落の密度波形、節の入り方、緩みと駄文の判別、執筆後の機械的な点検手順を定める。読み物として読ませたい章・記事・解説文を生成するとき、または「密度はあるが平坦でおもしろくない」文章を診断・修正するときに使用する。
1ファイル / 17KB
WR-03
Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.
1ファイル / 1KB
WR-04
日本語の技術文書・書籍原稿の文章規範。整形（一文一行、引用ブロック、脚注、コラム記法）、段落と論証の構成（パラグラフライティング）、論証の厳密さ（ツッコミどころの除去）、読み手の負荷の管理、視点と語り、演出の抑制、LLM っぽい空句の禁止、冗長の排除を定める。日本語で技術書の章、草稿、記事、解説文を書くとき、または推敲・リライトするときに使用する。
1ファイル / 19KB
WR-05
withrasu.com「建築を巡る旅。」(/journey/)の旅ページを新規作成・追記するときの必須ハーネス。「旅ページ」「journey」「建築を巡る旅」「旅行ったから作って」で必ず起動。本人の語り(音声/コラム)を全量反映した良質な紀行ページを、どのモデルでも同じ品質で作るための工程・基準・テンプレ・チェックリスト。
1ファイル / 6KB
WR-06
"Complete system for building high-converting landing pages: intake questions, page structure, layout selection, conversion copywriting, SEO/AEO, plus a strict visual system for typography, spacing, corner radius, b
記事「LPの型」→2ファイル / 44KB
WR-07
withrasu.com の「よく聞かれること」(/qa/) に質問を1本追加する、または既存を更新する。既存コラム23本から材料を複合的に引いて答えを組む。「QAを増やしたい」「この質問をQAにして」「コラムからQAを作って」「QAを更新して」と言われたときに使う。コラムを公開・更新したあとにも必ず一度通す。
1ファイル / 15KB
WR-08
withrasu.comコラムの公開オペレーション。記事の新規公開・更新・note派生のたびに必ず実行するSEO+note最適化のルーティン。コラム記事を書く/直す/公開する/noteに載せる作業のすべてで使う。
2ファイル / 48KB
PR-01
Optimizes agent context setup. Use when starting a new session, when agent output quality degrades, when switching between tasks, or when you need to configure rules files and context for a project.
1ファイル / 11KB
PR-02
Subjects every non-trivial decision to a fresh-context adversarial review before it stands. Use when correctness matters more than speed, when working in unfamiliar code, when stakes are high (production, security-sensit
1ファイル / 16KB
PR-03
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions
1ファイル / 1KB
PR-04
Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan
3ファイル / 8KB
PR-05
Compact the current conversation into a handoff document for another agent to pick up.
1ファイル / 1KB
PR-06
Refines raw ideas into sharp, actionable concepts through structured divergent and convergent thinking. Use when an idea is still vague, when you need to stress-test assumptions before committing to a plan, or when you w
5ファイル / 39KB
PR-07
Delivers changes incrementally. Use when implementing any feature or change that touches more than one file. Use when you're about to write a large amount of code at once, or when a task feels too big to land in one
1ファイル / 9KB
PR-08
Extracts what the user actually wants instead of what they think they should want. Achieves this through one-question-at-a-time interview until ~95% confidence about the underlying intent. Use when an ask is underspecifi
1ファイル / 14KB
PR-09
Breaks work into ordered tasks. Use when you have a spec or clear requirements and need to break work into implementable tasks. Use when a task feels too large to start, when you need to estimate scope, or when parallel
1ファイル / 7KB
PR-10
Reference-driven workflow for building premium, agency-grade animated websites (portfolios, landing pages) with Claude Code. Use when the user wants to build a high-end / "expensive-looking" site, a portfolio,
2ファイル / 15KB
PR-11
Grounds every implementation decision in official documentation. Use when you want authoritative, source-cited code free from outdated patterns. Use when building with any framework or library where correctness matters.
1ファイル / 8KB
PR-12
Creates specs before coding. Use when starting a new project, feature, or significant change and no specification exists yet. Use when requirements are unclear, ambiguous, or only exist as a vague idea.
1ファイル / 8KB
PR-13
GitHub 公式の Spec-Driven Development 一式（★130,270・MIT）。仕様→計画→タスク→実装を、テンプレートと10個のコマンドで固定して回す。案件の「憲法（constitution）」を先に置き、曖昧な仕様を /clarify で潰してから作る。「仕様から作りたい」「要件定義してから」「spec駆動で」「タスクに割って」「作る前に固めたい」と言われたとき、または規模が大きくて途中で迷子になりそうな案件
18ファイル / 155KB
PR-14
Break a plan, spec, or PRD into independently-grabbable issues on the project issue tracker using tracer-bullet vertical slices. Use when user wants to convert a plan into issues, create implementation tickets, or break
1ファイル / 3KB
PR-15
Turn the current conversation context into a PRD and publish it to the project issue tracker. Use when user wants to create a PRD from the current context.
1ファイル / 3KB
PR-16
Triage issues through a state machine driven by triage roles. Use when user wants to create an issue, triage issues, review incoming bugs or feature requests, prepare issues for an AFK agent, or manage issue workflow.
3ファイル / 15KB
PR-17
Watch a video (URL or local path). Downloads with yt-dlp, extracts auto-scaled frames with ffmpeg, pulls the transcript from captions (or Whisper API fallback), and hands the result to Claude so it can answer questions a
10ファイル / 103KB
PR-18
Tell the agent to zoom out and give broader context or a higher-level perspective. Use when you're unfamiliar with a section of code or need to understand how it fits into the bigger picture.
1ファイル / 0KB
CQ-01
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundarie
1ファイル / 10KB
CQ-02
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance,
1ファイル / 14KB
CQ-03
Automates CI/CD pipeline setup. Use when setting up or modifying build and deployment pipelines. Use when you need to automate quality gates, configure test runners in CI, or establish deployment strategies.
1ファイル / 11KB
CQ-04
Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to assess code quality across multiple dimensions before it enters
1ファイル / 20KB
CQ-05
Simplifies code for clarity. Use when refactoring code for clarity without changing behavior. Use when code works but is harder to read, maintain, or extend than it should be. Use when reviewing code that has accumulated
1ファイル / 13KB
CQ-06
Guides systematic root-cause debugging. Use when tests fail, builds break, behavior doesn't match expectations, or you encounter any unexpected error. Use when you need a systematic approach to finding and fixing th
1ファイル / 10KB
CQ-07
Manages deprecation and migration. Use when removing old systems, APIs, or features. Use when migrating users from one implementation to another. Use when deciding whether to maintain or sunset existing code.
1ファイル / 12KB
CQ-08
Disciplined diagnosis loop for hard bugs and performance regressions. Reproduce → minimise → hypothesise → instrument → fix → regression-test. Use when user says "diagnose this" / "debug this", report
2ファイル / 8KB
CQ-09
Records decisions and documentation. Use when making architectural decisions, changing public APIs, shipping features, or when you need to record context that future engineers and agents will need to understand the codeb
1ファイル / 9KB
CQ-10
Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they execute. Use when user wants to prevent destructive git operations, add git safety hooks, or block git pus
2ファイル / 3KB
CQ-11
Structures git workflow practices. Use when making any code change. Use when committing, branching, resolving conflicts, or when you need to organize work across multiple parallel streams. Use when cutting a release, cho
1ファイル / 14KB
CQ-12
Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tight
5ファイル / 22KB
CQ-13
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components
10ファイル / 173KB
CQ-14
Migrate test files from `as` type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace `as` in tests, or needs partial test data.
1ファイル / 3KB
CQ-15
Instruments code so production behavior is visible and diagnosable. Use when adding logging, metrics, tracing, or alerting. Use when shipping any feature that runs in production and you need evidence it works. Use when p
1ファイル / 11KB
CQ-16
Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement,
1ファイル / 11KB
CQ-17
Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.
1ファイル / 4KB
CQ-18
Hardens code against vulnerabilities. Use when handling user input, authentication, data storage, or external integrations. Use when building any feature that accepts untrusted data, manages user sessions, or interacts w
1ファイル / 20KB
CQ-19
Sets up an `## Agent skills` block in AGENTS.md/CLAUDE.md and `docs/agents/` so the engineering skills know this repo's issue tracker (GitHub or local markdown), triage label vocabulary, and domain doc layout. Run b
6ファイル / 13KB
CQ-20
Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typ
1ファイル / 2KB
CQ-21
Prepares production launches. Use when preparing to deploy to production. Use when you need a pre-launch checklist, when setting up monitoring, when planning a staged rollout, or when you need a rollback strategy.
1ファイル / 10KB
CQ-22
Test-driven development with red-green-refactor loop. Use when user wants to build features or fix bugs using TDD, mentions "red-green-refactor", wants integration tests, or asks for test-first development.
6ファイル / 10KB
CQ-23
Drives development with tests. Use when implementing any logic, fixing any bug, or changing any behavior. Use when you need to prove that code works, when a bug report arrives, or when you're about to modify existin
1ファイル / 15KB
DB-01
Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.
1ファイル / 1KB
DB-02
Create, analyze, proofread, and modify Office documents (.docx, .xlsx, .pptx) using the officecli CLI tool. Use when the user wants to create, inspect, check formatting, find issues, add charts, or modify Office document
1ファイル / 25KB
DB-03
- Guides Stripe integration decisions — API selection (Checkout Sessions vs PaymentIntents), Connect platform setup (Accounts v2, controller properties), billing/subscriptions, Treasury financial accounts, integration su
7ファイル / 26KB
DB-04
Use when the user wants to provision infrastructure or third-party services using Stripe Projects. Triggers: "I need a database", "set up auth", "add caching", "give me a Postgres"
1ファイル / 6KB
DB-05
"Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr)
4ファイル / 20KB
DB-06
"Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill BEFORE writing or changing anything that lives in a Postgres database: creating or altering tables and columns (includi
36ファイル / 61KB
DB-07
Zero-shot time series forecasting with Google's TimesFM foundation model. Use this skill when forecasting ANY univariate time series — sales, sensor readings, stock prices, energy demand, patient vitals, weather, or
29ファイル / 2065KB
DB-08
Guide for upgrading Stripe API versions and SDKs
1ファイル / 5KB
AV-01
Generate or analyze poetic paper-texture minimal zine posters with large negative space, a small editorial collage or visual anchor, experimental typography, and one clear color accent. Use when the user gives a theme, s
19ファイル / 1192KB
AV-02
Generate Guizang-style social card image sets, Live Photo motion cards, material-first Live Photo puzzle layouts, triple Live Photo collages, long-video-to-Live-Photo treatments, and WeChat official account cover pairs f
46ファイル / 2250KB
AV-03
Use when creating Japanese housing/architecture video telops from scratch from source audio or transcript, including Whisper transcription, mandatory strong-AI semantic proofing, 20-character SRT drafting, speaker-separa
11ファイル / 99KB
AV-04
Use for the final double-check of Japanese housing/architecture telop XML after an editor manually typed, adjusted, or re-exported captions from Premiere. Verifies XML syntax, text consistency, gap-free display, track ma
6ファイル / 30KB
AV-05
Use when proofreading Japanese housing/architecture video telops, SRT subtitles, or Premiere/FCP XML captions. Handles mandatory strong-AI semantic review, context-first correction, 20-character telop splits, proper/prod
5ファイル / 30KB
AV-06
'Typeset professional documents and product landing pages: resumes, one-pagers, white papers, letters, portfolios, slide decks, landing pages. Warm parchment, ink-blue accent, serif-led hierarchy. CN uses TsangerJin
見本を開く →109ファイル / 1438KB
AV-07
Use when cutting silence from Premiere Pro Final Cut Pro XML exports for video editing. Handles natural-pause silence cutting, automatic audio-track detection/protection, multi-track mic layouts, and safe XML output befo
4ファイル / 42KB
AV-08
工務店の営業がスマホ録音した商談・打ち合わせ音声(1〜3時間)を、各自のWindows PCのClaude Code内で全文文字起こし＋多段サブエージェント校正校閲＋タスク/次回アクション/顧客情報の抽出まで一発で行う。音声ファイルのパスを渡された/商談・打合せの文字起こし・議事録・書き起こしを頼まれた/「/shodan-minutes」で即実行。
記事「商談の議事録」→9ファイル / 30KB
AV-09
Lightroom Classicの写真レタッチをClaudeが実行する。空気質の宣言→立ち位置の判断→XMP直書き→LrC適用→機械ゲート→納品まで。建築写真メイン(風景・ポートレート対応)。「レタッチして」「現像して」「写真を仕上げて」/sizzle-retouch で起動。
45ファイル / 208KB
AV-10
音声をリアルタイムで文字にする（話している最中に、途中経過が出る）。WebSocketで音の断片を送ると、部分結果が0.5秒前後で返ってくる。ローカル完結でクラウドに音を送らない。「リアルタイムで文字起こし」「喋りながら文字にしたい」「ライブで字幕」「商談中に画面に出したい」と言われたときに使う。★録音ファイルを後から起こすだけなら、これではなく通常のWhisper（batch）を使う。
1ファイル / 7KB
AV-11
YouTube動画を切り抜き用に加工する。動画と字幕を落とし、AIが中身を読んで2〜5分の章に分け、 選んだ章だけを切り出し、字幕を日本語に訳して二か国語にし、映像に焼き込み、要約文まで作る。 「この動画を切り抜きたい」「YouTubeから切り出して」「英語の動画に日本語字幕を付けて」 「参考動画を分析して」「二か国語字幕を作って」と言われたときに使う。
17ファイル / 95KB
OP-01
Ultra-compressed communication mode. Cuts token usage ~75% by dropping filler, articles, and pleasantries while keeping full technical accuracy. Use when user says "caveman mode", "talk like caveman",
1ファイル / 2KB
OP-02
| Claude Code の /compact 実行前に、現セッションの作業状態を一時 state file へ保存する。 MANDATORY TRIGGERS: /compact-prep, compact-prep, 圧縮準備, compact 準備, コンパクト準備, 圧縮前状態保存。 DO NOT TRIGGER: compact 後の復旧、通常の進捗報告、plan 作成、context 使用率の雑談。 strict_proc
1ファイル / 3KB
OP-03
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
1ファイル / 3KB
OP-04
Index and launcher for the 10 trending GitHub AI tools cloned under github-trending-ai/. Use when the user wants to run, set up, or recall what one of these does — Meetily (local meeting AI), Orca (parallel agent orchest
5ファイル / 4KB
OP-05
'Shape output for a reader with ADHD: lead with the next action, number multi-step work, restate state across turns, suppress tangents, give specific time estimates, make wins visible. Invoke with /i-have-adhd; stay
4ファイル / 11KB
OP-06
「地域 × 商材」の検索(大阪 注文住宅、浜松 工務店 等)で上位に出ているページを、感覚でなく同じ物差しで実測して比べ、自分のサイトに持ち帰れる型だけを抜き出す。「なんでこのサイト強いの」「この検索語で上を取りたい」「競合のSEOを調べて」と言われたときに使う。
2ファイル / 7KB
OP-07
Mine the user's local AI agent session history (~/.claude/projects, ~/.codex/sessions, etc.) through a 6-phase guided analysis (Excavate → Distill → Interview → Mirror → Leverage → Residue) that produces evidence.md
2ファイル / 10KB
OP-08
ドキュメントサイト・GitHubリポジトリ・PDF・動画・Wikiなど18種類の素材から、スキルの下ごしらえを自動生成する。「このサイトをスキルにして」「このPDFを読み込ませたい」「このリポジトリを取り込んで」と言われたときに使う。生成はあくまで下ごしらえで、採否と和文対応の判断は tool-scout の基準で人が行う。
記事「資料を道具に変える」→1ファイル / 6KB
OP-09
withrasu.com「販売中のホームページ」(/store/)の在庫=販売用完成品サイトを1点作って棚に並べるまでの量産ライン。参考リンク起点→要件定義→実装→デモ公開→台帳掲載。Use when the user says 販売できるサイトを作る/在庫を作る/No.00Xを作る, or works on the-builder-brand の store 在庫制作.
1ファイル / 10KB
OP-10
Look up the documented/leaked system prompts of major AI chatbots (Claude, ChatGPT/GPT-5.x, Gemini, Grok, Perplexity, Cursor, Copilot, Qwen, Mistral, Notion AI, etc.) as a local reference for prompt design. Use when the
1ファイル / 2KB
OP-11
新しいスキル・ライブラリ・ツールを能動的に探して、採用候補と見送り理由を報告する。「何かいいの探して」「最近いいツールある？」「トレンド見て」「〜まわりで使えるもの探して」と言われたとき、または本人が新しい領域の作業を始めて手持ちのスキルで埋まっていないと気づいたときに使う。星の数を根拠にしない。
1ファイル / 10KB
OP-12
Discovers and invokes agent skills. Use when starting a session or when you need to discover which skill applies to the current task. This is the meta-skill that governs how all other skills are discovered and invoked.
1ファイル / 10KB
OP-13
Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.
1ファイル / 3KB
スキルではなくスラッシュコマンド（/icons /uiverse）。実物を並べてある。
スキルにはなっていないが、「道具のはなし」として書いてあるもの。