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

responsive-recomposition

Use for dedicated mobile, tablet, ultrawide, touch, or breakpoint design passes where content priority, layout, navigation, imagery, interaction, and motion must be recomposed rather than simply resized.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md1.4 KB
  • agents/openai.yaml252 B

SKILL.md(原文)

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

Responsive Recomposition

Principle

Responsive design is a change in priority and composition, not only width.

For each major section ask:

  • What must remain above the fold on small screens?
  • Which desktop relationship must become sequence, carousel, disclosure, or separate screen?
  • Does imagery need a different crop or art direction?
  • Does hover behavior have a touch equivalent?
  • Should motion simplify or disappear?
  • Does type wrapping preserve hierarchy in both Korean and English if applicable?

Default test widths

Use the repository viewport matrix, including a 320px edge case and representative mobile/tablet/desktop widths. Add domain-specific sizes when the product requires them.

Mobile priorities

  1. identity/context;
  2. primary user job/action;
  3. critical information;
  4. supporting imagery/story;
  5. secondary evidence.

Do not preserve desktop order when it conflicts with mobile task priority.

Touch

Ensure controls have adequate size/spacing, drag interactions have alternatives when required, sticky UI does not obscure focus/content, and thumb reach is considered for frequent primary actions.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

Use for release-level accessibility and performance review, including WCAG 2.2 AA, keyboard/focus, target size, reduced motion, semantic controls, Core Web Vitals, images/fonts/JavaScript, and animation or 3D performance budgets.

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

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use to audit a generated or heavily templated interface for generic AI aesthetics, unjustified trend patterns, component-registry residue, vague copy, repetitive motion, novelty theater, or visual decisions that lack brand/UX rationale.

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

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when a website needs a strong visual point of view, distinct concept routes, composition, typography, color/materiality, imagery direction, spatial rhythm, or a memorable signature idea.

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

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when deciding whether to implement UI from native HTML/CSS, accessible primitives, shadcn-style source components, or visual component registries such as 21st.dev, Aceternity, React Bits, Motion Primitives, Magic UI, or Animate UI.

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

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use after substantial web projects or repeated design defects to convert evidence into reusable skill improvements through root-cause analysis, regression scenarios, and controlled proposals without silently changing the core OS.

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

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when the design concept calls for Three.js or React Three Fiber 3D, WebGL/WebGPU, Rive, Spline, Theatre.js, SVG, canvas, shaders, particle systems, or other immersive creative-web techniques.

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

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Lrinvl1203 のスキルをすべて見る

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