吉里吉里Z (krkrz) の -replweb HTTP+SSE サーバ (WebServer クラス) にブラウザ UI を載せて、本体アプリの操作/編集/観測パネルをブラウザ側に組み込む方法論。ゲーム本体は 3D 表示やゲーム内 UI に専念させ、編集ツール・インスペクター・ダッシュボード・REPL コンソールをブラウザ (別ウィンドウ/別PC) から使う構成を作るときに読む。プラグインや TJS がサーバへエンドポイントを追加公開する手順 (WebServer.register / serveStatic / broadcast)、ハンドラ呼び出し規約 (req %[method,path,query,body,bytes] → 文字列/octet/整数/辞書)、状態同期パターン (fetch POST + SSE /sub push + throttle + 差分/tick 配信)、既存 REPL コンソール (/events + /cmd) の UI 埋め込み、ブラウザのアプリモード起動 (Chromium --app / -webui)、json.dll 連携、TJS2 由来のハマりどころ (ローカル関数クロージャ不在→クラス化 / ブロックコメントのネスト誤爆 / startup 例外の致命性 / ハンドラは必ずメインスレッド実行) を網羅。エンジン側 WebServer クラスそのものの仕様は krkrz core doc/REPL.md、REPL/Agent 駆動は skill krkrz-repl、Elements ネイティブ UI は skill elements、TJS2 言語は skill tjs2、本体 API は skill krkrz を参照。
デザインのスキル
UI/UX、ロゴ、スライド、画像生成（7,446 件）
概要と使いどころ
吉里吉里Z 上の Elements ベース汎用ダイアログ/画面 UI (cycfi/elements + elements_modal) の作り方リファレンス。TJS で JSON / Dictionary 定義のダイアログを作る・出す・イベントを受ける・複数画面フロー(navigator)や常駐メニューを組む・入力/フォーカス/モーダルを制御する・Agent で動作検証する、といった場面で使う。基本的なダイアログ画面の作り方(最小例・レイアウト JSON スキーマ・ウィジェット一覧)から、モーダル/非モーダル/独立ウィンドウ/常駐フロー、複数インスタンス/z-order、DrawDevice 登録タイミング等のハマりどころまで網羅。Win32 ネイティブの WIN32Dialog(win32dialog プラグイン)とは別物。TJS2 言語仕様は skill `tjs2`、本体クラス API は `krkrz`、REPL/Agent 駆動は `krkrz-repl` を参照。
Use for DESIGN.md visual identity contracts; author, scaffold, lint, diff, and export design contracts with the upstream spec and CLI.
日本語の概要は準備中です。原文の説明を表示しています。
Use when designing, auditing, or redesigning a web UI; select fast, prototype, or studio from the requested scope.
日本語の概要は準備中です。原文の説明を表示しています。
Design original, scalable logos and production-ready asset sets for a specific usage context. Use when Codex needs to create or refine a logo, symbol, wordmark, app icon, repository identity, CLI mark, website brand, social preview, or Codex skill/plugin icon; adapt concepts, formats, dimensions, variants, and delivery checks to the target platform instead of producing a context-free image.
日本語の概要は準備中です。原文の説明を表示しています。
Figmaデザインをノード情報を活用してレビューし、該当箇所に個別コメントを投稿する。Use when (1) ユーザーがFigmaデザインのレビューを依頼した時 (2) 実装者目線、エンジニア視点でのフィードバックが必要な時 (3) デザインに対してFigma上にコメントを残したい時。padding/margin、色のコントラスト、グリッド整合性などベーシックなデザインチェックも実施。Requires Figma MCP connection and FIGMA_TOKEN environment variable.
Design, review, or report a measured performance comparison. Use for benchmark methodology, speedup or regression claims, and performance-based choices; not generic performance discussion, ordinary dependency bumps, local renames, or prose edits.
日本語の概要は準備中です。原文の説明を表示しています。
Use when rating a project with Jevaluate that must stay private -- "/jevaluate-private <link or folder>", "rate this privately", "evaluate my own project", a client's or employer's code, a design doc or a local folder that isn't public, or any rating that must not reach the public ratings or the repo.
日本語の概要は準備中です。原文の説明を表示しています。
Use when a question, review, design or claim involves Jev, TypeSafe, System One, Nouls, or Choice/Score questions, including whether something should be built with Jev, reviewing a Jev design, briefing a subagent on Jev work, or relaying a subagent's Jev finding.
日本語の概要は準備中です。原文の説明を表示しています。
optimize
無料Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.
日本語の概要は準備中です。原文の説明を表示しています。
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, audit-first on redesigns, strict pre-flight check.
日本語の概要は準備中です。原文の説明を表示しています。
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context.
日本語の概要は準備中です。原文の説明を表示しています。
distill
無料Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.
日本語の概要は準備中です。原文の説明を表示しています。
onboard
無料Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows.
日本語の概要は準備中です。原文の説明を表示しています。
One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.
日本語の概要は準備中です。原文の説明を表示しています。
extract
無料Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.
日本語の概要は準備中です。原文の説明を表示しています。
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 need exact backward compatibility.
日本語の概要は準備中です。原文の説明を表示しています。
typeset
無料Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.
日本語の概要は準備中です。原文の説明を表示しています。
Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
日本語の概要は準備中です。原文の説明を表示しています。
quieter
無料Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.
日本語の概要は準備中です。原文の説明を表示しています。
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, or editorial sites that need to feel like declassified blueprints.
日本語の概要は準備中です。原文の説明を表示しています。
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 ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
日本語の概要は準備中です。原文の説明を表示しています。
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 cheap or generic.
日本語の概要は準備中です。原文の説明を表示しています。
bolder
無料Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.
日本語の概要は準備中です。原文の説明を表示しています。