探しているスキルを見つけよう
web-artifacts-builder - 単一ファイル完結型Webアーティファクト高速構築
React、Tailwind CSS、Lucideアイコン、インタラクティブチャートを組み合わせ、外部依存のない単一HTML/JavaScriptコードとして動作する洗練されたWebアーティファクトを迅速に設計・構築するスキルです。
transitions-dev - 本番品質CSSトランジション・マイクロインタラクション設計
GPUアクセラレーション(transform / opacity)、自然なベジェ曲線イージング、prefers-reduced-motion対応を網羅し、60fps/120fpsで滑らかに動作するWebアプリ向けCSSトランジション・アニメーション設計スキルです。
threejs-fundamentals - Three.js基礎基盤設計・シーングラフ・描画ループ最適化
Vanilla JavaScriptおよびTypeScriptにおいて、Three.jsのScene、PerspectiveCamera、WebGLRendererの初期化、Object3Dの親子シーングラフ、60fpsを維持するアニメーションループ、画面リサイズ処理を堅牢に構築するスキルです。
r3f-postprocessing - React Three Fiberポストプロセス演出・視覚効果実装
@react-three/postprocessingを活用し、Web 3D空間に映画のようなブルーム(Bloom)、被写界深度(DoF)、アンビエントオクルージョン(SSAO/N8AO)、色収差(Chromatic Aberration)、カラーグレーディングを実装するスキルです。
r3f-best-practices - React Three Fiber & Poimandresエコシステム設計標準
React Three Fiber(R3F)およびDrei、Zustand、Valtioを組み合わせた本格3D Webアプリケーションにおいて、useFrame最適化、ポインタイベントのデバウンス、GLTFアセットプリロード、宣言的シーン管理を極めるスキルです。
product-showcase - コンバージョン特化型製品紹介LP・Webサイト高速生成
SaaSやデジタル製品向けに、ヒーローセクション、機能ハイライト(インタラクティブデモ)、料金プラン比較表、ユーザーの声(Testimonials)、FAQ、コンバージョンCTAを完全装備したモダンなWebサイトコードを生成するスキルです。
microinteractions - UIマイクロインタラクション詳細設計・触覚フィードバック
ボタン押下、スイッチ切替、ローディング完了、通知トーストなどのUI操作に対し、トリガー(Trigger)、ルール(Rules)、フィードバック(Feedback)、ループ/モード(Loops & Modes)の4要素で極上の手触り(触覚・視覚・音響)を設計するスキルです。
loading-states - ローディング体験・スケルトンUI設計スキル
スピナー、スケルトンスクリーン、楽観的UI更新(Optimistic Updates)、段階的開示(Progressive Reveal)を使い分け、待機時間を心地よい体験に変えるUI設計スキルです。
imagegen-frontend-web - Webフロントエンド特化型画像ディレクション・UI調和生成
モダンWebサイトのUIデザイン(ダークモード、ネオブルータリズム、グラスモフィズム等)に完璧に調和する抽象背景、ヒーロービジュアル、3Dグラスアイコン、テクスチャ画像を厳格なカラーパレットと構図指定で生成するスキルです。
gpt-taste - エリートUI/UX&高度GSAPモーションエンジニアリング
Awwwards受賞サイト級の圧倒的な審美眼(Taste)を持ち、洗練されたタイポグラフィ、計算された余白、GSAP(ScrollTrigger、Flip、SplitType)による流麗なスクロール演出とマイクロインタラクションをWebサイトに吹き込むスキルです。
design-taste-frontend-v1 - 洗練されたUI美学・フロントエンド設計原則
凡庸なMVPデザインを脱却し、厳選されたカラーパレット、視認性の高いタイポグラフィ、繊細なガラスモーフィズム、心地よいマイクロインタラクションを備えた極上のWebUIを設計するスキルです。
apple-design - Apple流 インターフェース設計・流体物理モーション
Appleのヒューマンインターフェースガイドライン(HIG)が体現する流体物理モーション、自然なジェスチャー追従、スプリング物理、繊細なブラーガラス効果をWeb上で完全再現するスキルです。
animation-vocabulary - Webモーション・アニメーション逆引き辞典
「ポップオーバーが開くときのポヨンとした動き」「カードが吸い付く動き」などの曖昧な日常言葉から、正確な業界用語(Pop, Layout Projection, Spring, Shimmer等)を逆引きし、実装コードを導くスキルです。
accessibility - VS Code準拠 アクセシビリティ・ARIA実装スキル
VS Code等のモダンエディタ・Webアプリケーションにおけるスクリーンリーダー対応、キーボードナビゲーション、フォーカス管理、ARIA属性のベストプラクティスを網羅した実装スキルです。