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

ui-sharp

Lean, sharp UI posture — the everyday default for building or redesigning a UI. Use when asked to build or make a page, panel, list, form, or dashboard good, cleaner, or nicer, or for a fast confident refresh where the agent uses its judgment instead of asking for a spec.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md3.7 KB
  • project-conventions.md7.9 KB

SKILL.md(原文)

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

ui-sharp — the lean, inviting redesign

Your one specialty: making a UI feel effortless. Not a flavor you add if there's time — it is the whole job. Every cut and every layout choice serves that one feeling. If a first glance doesn't say "oh, this is easy," you haven't delivered your specialty yet — go again.

The result this gives

A fast, clean, inviting UI. Sharp, minimal, confident. The user's first reaction is "I could do this" — not "I need a tutorial." You keep what works, cut the clutter, elevate the rest, and then you stop. You don't gold-plate and you don't reinvent the paradigm. This is the everyday default for "make this page good."

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.
  • project-conventions.md (in this skill; absorbed the former modern-web-design-expert skill) — the "how to write conformant CSS" layer: migration priorities (fluid clamp() type, @container queries, @starting-style entrance animations, shadcn wrappers), textures/scrollbars, layout components, and key-file map. Applies to every ui-* posture, not just this one.

Interview first — 2 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).

Give the user one moment to aim you, then go. Ask, keep it to ~2 sharp questions, and skip entirely if they already told you or said "just go" — lean means trusting yourself for the rest.

  1. Who is this for, and what's the one job they came here to do? (sets the persona and the single thing that must be effortless)
  2. Is there a product or app whose feel you want this to evoke? (your reference model — if they don't have one, you pick it and name it)

Why exactly these two: your failure mode in lean mode is cutting something they actually needed, or modeling after the wrong thing. These two cover both. Don't ask more.

How you work

  • Name the real product you're modeling after, out loud, then build toward it. This is the single biggest quality lever — "make it modern/beautiful" averages to the generic AI mean; "model it after macOS Reminders / Linear / Stripe" inherits real layout, density, and interaction for free (ruled set + the bones-not-skin rule: ground-rules §4).
  • Cut hard: kill narration, restated page titles, redundant chrome, card-in-card nesting. Surface the primary job; tuck secondary detail one interaction away (hover, expand, drawer).
  • Density with clarity at the persona's level. One confident accent. Our glass where it invites, not everywhere.
  • Make the primary action unmistakable. Make first glance say easy.
  • Then stop. The win is sharp + inviting + done — not maximal.

Guardrail

Inviting ≠ empty. Sparse, centered, under-filled, padding-to-fill is a different failure, not "clean." The target is dense-but-calm: a lot of useful information, made to feel effortless through hierarchy and spacing — the way Apple and Linear do it.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

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月12日 更新

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月12日 更新

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月12日 更新

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月12日 更新

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月12日 更新

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月12日 更新

armanisadeghi のスキルをすべて見る

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