设计技能

Windows アプリ開発 (Fluent Design / WinUI 3) のデザインガイドライン。 layout, alignment, spacing, geometry, elevation, breakpoints, Color, materials, Mica, Acrylic, Smoke, Reveal Focus, Reveal Highlight (非推奨), typography, Segoe Fluent Icons, app icons, motion, easing, page transitions, connected animation, parallax, reduce motion, haptics, NavigationView, TitleBar, TabView, CommandBar, menus, keyboard accelerators, access keys, accessibility, high contrast, globalization, RTL, widgets design。

中文简介正在准备中。当前显示原文说明。

Windows アプリ開発 (DirectX / WinRT メディア) のグラフィックス・メディア API リファレンス。 Direct2D (ID2D1Factory, ID2D1DeviceContext, ID2D1Bitmap1, ID2D1Effect, D2D1 Effects, ID2D1PathGeometry), DirectWrite (IDWriteFactory, IDWriteTextLayout, DWriteCore), Direct3D 11/12 (D3D11CreateDevice, D3D11On12, DXGI SwapChain, HLSL, D3D12 PipelineState, D3D12 DRED), Microsoft.UI.Composition (Compositor, Visual, ExpressionAnimation, InteractionTracker, MicaController), カメラ・画面キャプチャ (MediaCapture, MediaFrameReader, GraphicsCaptureSession, Windows Studio Effects, OpenCV)、音声・動画再生 (MediaPlayer, MediaPlaybackSession, AudioGraph, MediaTranscoder, AdaptiveMediaSource, HLS, DASH, CastingDevicePicker, AudioPlaybackConnection)。

中文简介正在准备中。当前显示原文说明。

Windows アプリ開発 (WinUI 3 / XAML) の UI 基盤リファレンス。 Grid, StackPanel, Canvas, RelativePanel, SplitView, ScrollViewer、x:Bind, x:Name, x:Class, StaticResource, ThemeResource、添付プロパティ, 依存関係プロパティ、Style, ControlTemplate, DataTemplate, VisualStateManager, ResourceDictionary、Acrylic, Mica, SystemBackdrop, SystemBackdropElement、compact sizing、Binding, INotifyPropertyChanged, ObservableCollection, IValueConverter, DataContext, MVVM、 Storyboard, DoubleAnimation, EasingFunction, ThemeTransition, ConnectedAnimation, ImplicitAnimation、XamlOptionalChanges。

中文简介正在准备中。当前显示原文说明。

Motion (旧 Framer Motion) アニメーションライブラリ リファレンス。motion/react, vanilla JS, Vue 版 motion-v (v-motion ディレクティブ)。 AnimatePresence, AnimateView, LayoutGroup, LazyMotion, MotionConfig, Reorder, useAnimate, useScroll, useSpring, useTransform, useMotionValue, useInView, motionValue。 animate, animateView, scroll, inView, hover, press, stagger, spring, timeline, transitions, styleEffect, threeEffect。Motion+ Carousel, Cursor, Ticker, Typewriter, AnimateNumber。 layout, drag, gestures, SVG, Tailwind, Lenis 連携。accessibility, performance, bundle 最適化, troubleshooting。

中文简介正在准备中。当前显示原文说明。

Figma REST API / Plugin API / Widget API / Code Connect / MCP Server / Dev Mode リファレンス OAuth / PAT / Plan Access Token, files, folders, variables, VariableComposedColor, webhooks, SCIM, Dev Resources, activity-logs, library-analytics FrameNode, TextNode, ComponentNode, figma.variables, figma.codegen, figma.ui, textWrapStyle, variable fonts Widget useSyncedState, useSyncedMap, usePropertyMenu, AutoLayout Code Connect template files (.figma.ts) / legacy parser / custom parsers / register / Storybook (React / SwiftUI / Compose / HTML) MCP Code to Canvas, Write to Canvas, html_to_figma, generate_image, get_motion_context, generative plugins / shaders, Figma Weave

中文简介正在准备中。当前显示原文说明。

Feature-Sliced Design (FSD、フロントエンドアーキテクチャ手法) リファレンスとルール。 別名 fsd / feature-sliced。layers (app / pages / widgets / features / entities / shared)、 依存方向、Public API、@x 記法 (cross-import)、slice groups (スライスグループ)、 segments (ui / model / api / lib / config)、steiger、Next.js、TanStack Query 連携。 コードレビュー・リファクタリング時に自動参照。

中文简介正在准备中。当前显示原文说明。

TanStack Table (React Table) v9 ヘッドレステーブル (@tanstack/react-table) の API リファレンス。 ark-ui / chakra-ui のスタイル付き Table とは別。 useTable, createTableHook, tableFeatures, createColumnHelper, flexRender, createCoreRowModel, table.Subscribe, atoms, React Compiler, custom features, sorting, column / global / fuzzy filtering, faceting, pagination, row selection, expanding, grouping / aggregation, column / row の ordering・pinning・sizing・visibility, virtualization。 v8 legacy (useReactTable / getCoreRowModel) と v9 移行。

中文简介正在准备中。当前显示原文说明。

Android Jetpack Compose (Kotlin) の androidx Material3 コンポーネントリファレンス。 Button, IconButton, FloatingActionButton, Checkbox, Switch, Slider, TextField, SearchBar, DropdownMenu, Chip, DatePicker, TimePicker, Card, Scaffold, Dialog, BottomSheet, TopAppBar, NavigationBar, NavigationRail, Tab, Snackbar, ProgressIndicator, Badge, Icon, MaterialTheme, ColorScheme, Typography, Shapes。

中文简介正在准备中。当前显示原文说明。

Ark UI headless / unstyled コンポーネントライブラリ。Zag.js ベース、Chakra UI v3 基盤。 React / Solid / Vue / Svelte 対応。asChild, RootProvider, createListCollection, createTreeCollection, Presence hideMode, useHotkey / useHotkeys, data-* セレクタ。 Navigation Menu, TOC, Tour, Signature Pad, Image Cropper, Floating Panel, Angle Slider 等のコンポーネント API。

中文简介正在准备中。当前显示原文说明。

Biome (Rust 製フォーマッター・リンター) リファレンス。 JavaScript / TypeScript / JSX / CSS / JSON / GraphQL / HTML (Vue, Svelte, Astro) 対応。 biome.json, biome check / lint / format / ci / migrate / upgrade, linter ルール・preset・domains, GritQL プラグイン, assist (organizeImports), suppressions (biome-ignore), LSP / VS Code / Zed, ESLint / Prettier 移行, monorepo, CI。

中文简介正在准备中。当前显示原文说明。

Android Jetpack Compose (Kotlin) の UI 基盤リファレンス。androidx, Material3 土台。 Composable, Modifier, CompositionLocal, remember, mutableStateOf, State, LaunchedEffect。 Column, Row, Box, LazyColumn, Pager, ConstraintLayout, WindowSizeClass, ペインスキャフォールド。 BasicText, BasicTextField, TextStyle, IME, clickable, ジェスチャ, フォーカス, セマンティクス。

中文简介正在准备中。当前显示原文说明。

Android アプリ開発 (Kotlin) の Media3 / CameraX リファレンス。androidx.media3, androidx.camera。 ExoPlayer, HLS / DASH / RTSP / SmoothStreaming, HlsInterstitialsAdsLoader, CMCD, MediaSession, MediaSessionService, MediaLibraryService, DRM, Compose UI (PlayerSurface), ProcessCameraProvider, CameraSelector, ImageCapture, ImageAnalysis, VideoCapture, CameraInfo, CameraX Extensions, Camera2 Interop, Camera1 移行。

中文简介正在准备中。当前显示原文说明。

Chakra UI v3 (React コンポーネントライブラリ) リファレンス。 別名: Chakra, chakra, chakra-ui。 コンポーネント (Button, Input, Modal, Drawer, Toast, Menu, Tabs, Tooltip 等)、 レイアウト、フォーム、オーバーレイ、チャート、テーマ、レシピ、 スタイルプロップ、レスポンシブ、ダークモード、Chakra UI Pro ブロック。

中文简介正在准备中。当前显示原文说明。

Fix the psychologically significant moment, not the logically significant metric — Rory Sutherland on experience. Use when the outcome is fine but the journey feels bad: complaints about waiting, anxiety, uncertainty, or 'it's technically fast/cheap/correct but people still hate it'; when the user asks 'how do we reduce complaints', 'how do we make waiting/onboarding/checkout feel better', 'people are anxious during X', or is about to spend big to shave a number (wait time, load time, steps) when the real pain is how the moment feels. Covers uncertainty reduction, idle vs occupied waiting, and the peak-end rule. Inspired by Rory Sutherland's *Alchemy*. Routed to from psycho-logic. 日本語の相談（「待ち時間のクレームが多い」「手続きの途中で離脱される」「お客様を不安にさせている」）にも使う。中文咨询（“等待时间投诉多”“办理中途流失”“让客户感到不安”）也适用。

中文简介正在准备中。当前显示原文说明。

Unity 6 UI development guide. Use when building user interfaces, menus, HUD, buttons, or any UI elements. Covers UI Toolkit (recommended for new projects — USS, UXML, UI Builder, data binding), uGUI/Canvas (legacy runtime UI), and IMGUI. Based on Unity 6.3 LTS documentation.

中文简介正在准备中。当前显示原文说明。

Capture Unity Editor windows or Game View rendering as PNG. Use for visual checks, debugging, documentation, or annotated UI element coordinates.

中文简介正在准备中。当前显示原文说明。

Simulate Mouse.current input in PlayMode through Unity Input System. Use for gameplay clicks, mouse delta, or scroll; use simulate-mouse-ui for EventSystem UI elements.

中文简介正在准备中。当前显示原文说明。

Simulate PlayMode EventSystem UI mouse actions using top-left Game View coordinates. Use for UI clicks, long-presses, or drags from annotated screenshots.

中文简介正在准备中。当前显示原文说明。

デザイン（Figma MCP出力・HTML/CSS・デザイン仕様）からUI Toolkit用UXML/USSを生成し、Unityへのインポート・シーン配置・コンパイル・スクショ検証・ゲームロジック結線検証まで自動で行う。「この画面をUnityに取り込んで」「UXML/USSにして」で使う。

中文简介正在准备中。当前显示原文说明。

Interact with UI Toolkit (UXML/USS) runtime UI in PlayMode. Use INSTEAD OF uloop-simulate-mouse-ui / uloop-simulate-mouse-input whenever the target UI is UI Toolkit — those tools only reach uGUI and report 'no UI element hit' or silently do nothing on UI Toolkit panels.

中文简介正在准备中。当前显示原文说明。

ソースドキュメント（議事録・提案書・ディスカッション資料等）からスライドのページ構成をMarkdownで設計するスキル。各スライドをタイトル・メッセージ・ボディの3層構造で定義し、1スライド1メッセージを厳守する。情報量が多い箇所はバーバラ・ミントのピラミッド構造でサマリ→詳細に分割する。「スライド構成を設計して」「ページ構成を考えて」「スライドの骨子を作って」「プレゼンの構成を設計して」「スライド構成をMDで作って」などのリクエスト時に使用。スライド制作の前段階として機能し、出力MDをスライド制作スキルに渡してスライド化する。

中文简介正在准备中。当前显示原文说明。

修正完了後に agent-review-kit でレビューHTMLを生成し、ユーザーがブラウザで書いた差分コメントを Codex または Claude Code の同一セッションで受け取り、回答・修正・resolve を未解決0件まで繰り返すレビューループ。AIレビューの指摘を add-comment でブラウザ上のコメントとして表示し、ユーザーが返信した指摘だけ修正する「AIレビューモード」も含む。実装プラン・設計書などの任意HTMLを publish-html でレンダリング済みのまま表示し、要素クリック・テキスト範囲でコメントを受け取る「HTMLレビューモード」も含む。他のレビュースキルの結果の出力先として agent-review-kit が指定された場合も、このスキルを読んで AI レビューモードの手順に従うこと。Use when the user wants to review changes in a browser (GitHub-like diff review), review a rendered HTML doc (plan/design doc) in a browser, iterate on fixes with inline comments, or display AI review findings as browser comments (output target: agent-review-kit).

中文简介正在准备中。当前显示原文说明。

日本語のUI文言（ボタン・見出し・ラベル・入力欄の説明・空状態・エラー・確認ダイアログ・完了通知・チャットbotの応答文）を書く・直すときの規則。画面やbotがユーザーに見せる日本語を新しく書く時、既存の文言を見直す・統一する時、英語のまま残った表示を日本語にする時、サーバーのエラーメッセージを画面に出す経路を作る時に使用。公開されている日本語UIガイドライン（SmartHR・デジタル庁・Microsoft・Apple・公用文）の一致点を規則にし、食い違う点は採否と理由を定めてある。境界: 人に宛てた文章（PR本文・メッセージ・ドキュメント）は ukwhatn-writing、画面に何を出すかと提示前の完了基準は context/ui-artifact-standards.md、ナビゲーション・重ね方・通知の型とレイアウトは designing-ui、コードの実装原則は writing-code。

中文简介正在准备中。当前显示原文说明。

抽象的な要件・事業側の要求を深掘りし、既存実装との整合を確認して実装マスタとシステム要件書を作成する。「こういう機能を作りたい」「この要求を満たす機能を設計して」等の抽象要件の提示時、既存機能の拡張や Phase 分割の要件定義開始時、/design-feature 実行時に使用。境界: 要件確定後の実装計画書・PR 分割と実装進行は plan-feature-prs。

中文简介正在准备中。当前显示原文说明。