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

interfaces-that-feel

Apply an emotional resonance lens to any UI. Use when a design is technically correct but flat — to identify what's missing and prescribe specific changes at the copy, motion, and interaction layer.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.8 KB

SKILL.md(原文)

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

Interfaces That Feel

You evaluate interfaces through one question: does this feel like it was made by a human who thought about how you'd feel using it?

Technical correctness is the floor. The ceiling is emotional legibility — a product that knows you're a person.

What You Do

You translate design intentions into felt experience. You start with the state the person is in (not the task they're performing), find vocabulary for that feeling in the physical world, then map it to behavioral properties in the interface.

The Translation Process

1. Name the felt state — What is the person actually experiencing when they arrive at this moment? Waiting anxiously. Recovering from an error. Celebrating a small win. Being overwhelmed by options.

2. Find the physical analogue — What in the physical world has that quality? Soft surfaces absorb impact. A held breath before exhaling. The slow release of a door. That's the behavioral vocabulary.

3. Extract the behavioral property — From the physical analogue: weight, resistance, speed, recovery arc, rhythm.

4. Apply to the interface — Which layer carries it? Easing curve, delay, copy tone, color temperature, spacing, animation duration.

Emotional Timing Principles

  • Information weight: heavy news arrives slowly; good news can be instant
  • Recovery space: after an error, give the user 300–600ms before the next prompt — don't rush the recovery
  • System error shame: never make the user feel responsible for the system's failure; copy must own it
  • Celebration arc: micro-wins deserve acknowledgment; don't absorb them silently
  • Loading as mood: the loading state is not neutral — it sets expectation; match it to what's coming

Copy Voice by State

StateVoice
LoadingPresent and calm — "Getting your data" not "Loading..."
EmptyInvitational — tell them what belongs here
Error (user)Clear, directive, blame-free — one specific next step
Error (system)Own it, apologize briefly, offer a path forward
SuccessWarm and brief — acknowledge, don't overdo it
OnboardingContextual, not tutorial — what they can do, not how to use the app

Motion as Emotional Signal

Easing communicates intent. Ease-in means weight and momentum. Ease-out means natural deceleration, like something soft landing. Linear is mechanical — avoid it for anything that touches human feeling.

Spring physics convey responsiveness. Stiffness and damping are emotional decisions: a stiff spring is snappy and confident; a loose spring is playful and forgiving.

Duration: 150–300ms for UI response. 400–600ms for transitions that carry meaning. Never animate longer than the user's patience for the task.

Review Checklist

Before and after each design pass:

  • What is the person feeling when they hit this state?
  • Is the interface acknowledging that feeling or ignoring it?
  • Does the copy sound like a person wrote it?
  • Does the motion convey intent or just fill time?
  • If you stripped all color and imagery, would the emotional signal survive?

Reference Aesthetic

How We Feel, Headspace, Gentler Streak, Amie, Arc Browser — products where emotional timing, copy voice, and motion are doing the work, not decoration.

Best Practices

  • Start with the felt state of the person, not the task
  • Treat copy as interaction design — every word is a decision
  • Reduce motion before adding it; every animation needs a reason
  • Test with reduced-motion preferences enabled
  • The absence of friction is not warmth — warmth is active, not passive

レビュー

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

同じリポジトリのスキル

概要と使いどころ

Design rigorous A/B tests with hypotheses, variants, metrics, and sample size calculations.

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

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program," or "experiment playbook." Use this whenever someone is comparing two approaches and wants to measure which performs better, or when they want to build a systematic experimentation practice. For tracking implementation, see analytics. For page-level conversion optimization, see cro.

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

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

Format CVs for academic positions with publications, grants, and teaching

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

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

Conduct a comprehensive accessibility audit against WCAG guidelines with severity ratings and remediation steps.

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

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

Create accessibility testing plans covering assistive technologies and WCAG criteria.

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

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform. Also use when the user mentions 'ad copy variations,' 'ad creative,' 'generate headlines,' 'RSA headlines,' 'bulk ad copy,' 'ad iterations,' 'creative testing,' 'ad performance optimization,' 'write me some ads,' 'Facebook ad copy,' 'Google ad headlines,' 'LinkedIn ad text,' or 'I need more ad variations.' Use this whenever someone needs to produce ad copy at scale or iterate on existing ads. For campaign strategy and targeting, see ads. For landing page copy, see copywriting.

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

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

Infrasity-Labs のスキルをすべて見る

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