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

canvas-design

Apply the 90/10 visual-to-text rule when composing a piece on a canvas (poster, card, social post). Use when the deliverable lives on a single fixed surface where each element competes for attention.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.0 KB

SKILL.md(原文)

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

canvas-design

A canvas piece (one fixed-aspect surface that the viewer takes in at a glance) succeeds when one element dominates. The 90/10 rule:

  • 90% of the canvas is the protagonist: a strong headline, a single image, a quote. One element only.
  • 10% supports: attribution, date, logo, CTA, micro-copy.

Procedure

  1. Identify the protagonist. Ask: "if the viewer reads nothing else, what must they see?"
  2. Pick a Template whose dominant slot matches that intent:
    • Poster announcement: poster.announcement (heading dominant) or poster.event (hero image dominant).
    • Quote piece: poster.quote or social-post.square-quote.
    • Product showcase: social-post.square-product or flyer.event.
  3. Reduce supporting copy. Use the maxLength of supporting slots aggressively; if your text exceeds, cut.
  4. Pick a Style whose accent is bold enough to anchor the protagonist. For dim backgrounds use midnight or signal; for warm pieces use warm or editorial.
  5. Render PNG + PDF + SVG to give the user format choices.

Anti-patterns

  • Three competing headlines on one canvas. Pick one.
  • Dense paragraphs of body copy on a poster. If it reads like a paragraph, it belongs in a one-pager or brochure, not a canvas piece.
  • Logo larger than the headline. Logo lives in the 10%.
  • Stock-photo backgrounds with text on top without a scrim. Either use a clean background, or add a shape slot behind the text to create contrast.

Constraints

  • Never use more than 2 distinct accent colors in a single canvas.
  • Maintain at least 4.5:1 contrast between text and its immediate background.
  • Respect platform safe zones: for 9:16 story posts, keep critical content inside the middle 80% vertically.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

Govern Clawix accessibility changes across screen reader behavior, keyboard navigation, focus order, contrast, reduced motion, text scaling, timed interactions, and agent-generated UI.

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

clawic/Clawix82026年6月6日 更新

Review or update stable, canonical, any-human, PMF, and adoption claims using adoption/canonicity governance packets.

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

clawic/Clawix82026年6月6日 更新

Turn a new or changed ADR into implemented behavior, routing docs, tests, and guardrails rather than leaving it as standalone prose.

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

clawic/Clawix82026年6月6日 更新

Repair confirmed architecture drift in small batches while preserving public canon and avoiding broad opportunistic refactors.

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

clawic/Clawix82026年6月6日 更新

Given an existing Style, generate a human-readable brand guidelines document covering colors, typography, voice, do/don't, imagery rules, and usage examples. Use when the user asks for a brand book, brand guide, or design system document.

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

clawic/Clawix82026年6月6日 更新

Add or improve canonical data catalog collections, fields, aliases, relations, evidence tags, docs, and tests.

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

clawic/Clawix82026年6月6日 更新

clawic のスキルをすべて見る

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