本文へ移動
cccskills
無料GitHub で公開

ui-reimagine

Reimagine UI posture — bold from-scratch reinvention of a screen. Use when asked to rethink or reinvent a UI, merge screens, change its core interaction model, break the frame rather than polish, or generate surprising new concepts.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.7 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

ui-reimagine — the bold from-scratch reinvention

Your one specialty: reinvention. A restyle of the existing screen is an automatic failure of your job. Your job is not "the old screen, nicer" — it is "what should this be if we designed it fresh today?" If someone who knew the old screen would recognize yours as the same thing rearranged, you didn't do your job. Reconceive the structure and the interaction model — not the paint. Be brave; this posture exists precisely to leave the familiar behind.

The result this gives

The boldest reconception. You ignore the current layout and ask "what should this be?" — a from-scratch design that can genuinely surprise. This is your highest-ceiling, highest-variance posture and your idea generator: run it to break the frame, not to polish. Run it twice and you'll get two different concepts — that's the point, not a flaw.

Read first

  • .claude/ui-skills/shared/ground-rules.md — the non-negotiable floor (above all: build it real, never fake).
  • .claude/ui-skills/shared/design-system-anchors.md — exact tokens / glass / components to reuse.

Interview first — 2-3 questions, in plain conversation, skippable

Only when a person asked you, live, to redesign this page. In a page pass, a campaign, or any run with no one waiting on your reply, skip the interview entirely: answer these questions yourself from the page, its FEATURE.md and the best product doing the same job, log your answers, and go (page-pass step 0).

Ask. Skip if the user said "just go." These three target your specific blind spots:

  1. How far should I push — a bold refresh, or fully reinvent the paradigm (merge screens, change the core interaction model)?
  2. First-glance test: must a brand-new user operate this with zero explanation, or is a power-tool with a short learning curve acceptable? — This calibrates how far toward complexity you may go. Your #1 failure mode is building something powerful that needs a tutorial; this question tells you whether that's allowed.
  3. What in the current version already works well and must be preserved or beaten — never lost? — Your #2 failure mode is reinventing so hard you regress good existing behavior (a working animation, a fast path). Get this list before you start.

How you work

  • Reconceive from the data and the job, not the current layout. Ask: if the ideal tool for this task didn't exist yet, what would it be? Model after the most ambitious real product that fits the job, and name it.
  • Maximize the axes the job rewards: density-with-clarity, capability, streaming-as-experience, fewer clicks, everything-in-one-place when that genuinely serves the user.
  • Honor the approachability answer. Power must not cost the user a tutorial unless they blessed it — build the on-ramp (progressive disclosure, sensible defaults, a calm first screen that deepens on use).
  • Give every surface and state the same ambition. The most common way a reimagine disappoints is a brilliant primary screen shipped beside a weak secondary one, or a stunning happy-path with a broken error/empty/stall state. Equal craft everywhere (ground-rules §2-3).

Guardrail

Bold is never an excuse for unusable, unreal, or regressed. Before you ship, re-read ground-rules §1 (build it real — handle the silent stream, the error, the empty), §2 (don't lose what worked), §3 (every state first-class). The reimagination is only a win if it's also real and complete.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Admin debug system wiring for the floating AdminIndicator's live debug data and Copy Full Context. Use when adding debug visibility to a route or feature, wiring useDebugContext or the debug panel, capturing console errors, or enabling the copy-context workflow for a page.

日本語の概要は準備中です。原文の説明を表示しています。

armanisadeghi/ai-matrx32026年10月13日 更新

Compact two-icon Copy / Copy-for-AI controls (components/agent-copy). Use when adding copy buttons to a row, card, list, or record; merging duplicate Copy/JSON/AI controls; continuing the copy rollout; or writing a Copy-for-AI payload. NOT for markdown content actions (use rich-document-actions).

日本語の概要は準備中です。原文の説明を表示しています。

armanisadeghi/ai-matrx32026年10月13日 更新

Disclosing a surface's existing fixed AI jobs in the shell's top Agents menu. Use when a page, panel, overlay, or window already runs a mandate behind a button, assist, automatic action, or mode; when the agent-disclosure guard names a file; or during a surface check.

日本語の概要は準備中です。原文の説明を表示しています。

armanisadeghi/ai-matrx32026年10月13日 更新

The watch-fix-rerun method for making an existing platform agent or automated process efficient and correct: baseline its ledger, run one unit yourself, fix the class behind every wasted call, rerun, record. Use when asked to improve, optimize, watch, or 'make efficient' an agent, a sandbox session, a sync job, or any recurring automated process.

日本語の概要は準備中です。原文の説明を表示しています。

armanisadeghi/ai-matrx32026年10月13日 更新

Redux state for agent execution and firing agent shortcuts. Use when editing features/agents/redux/, building agent UI, creating a conversation, touching assembleRequest or NDJSON stream state, wiring agent-state selectors, adding a per-conversation capability, or triggering a shortcut from a button, menu, or code (useShortcutTrigger, launchAgentExecution).

日本語の概要は準備中です。原文の説明を表示しています。

armanisadeghi/ai-matrx32026年10月13日 更新

The provision for a call site: the exhaustive menu of values that place in the code can realistically produce. Use before creating or fixing a mandate or agent that reasons about more than its own input, when deciding whether an agent can answer at all with what it is sent, or when its output 'looks right' but nobody checked it could be. NOT for building the agent (use create-agent).

日本語の概要は準備中です。原文の説明を表示しています。

armanisadeghi/ai-matrx32026年10月13日 更新

armanisadeghi のスキルをすべて見る

このスキルの問題を報告する