ワンクリックでManusで任意のスキルを実行

design-system

スター6

フォーク1

更新日2026年5月4日 23:18

Design principles for visual output — color theory, typography, layout, accessibility. Auto-loaded for any design, Canva, or document task.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

GrizzwaldHouse

GrizzwaldHouse/cowork-skills

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Design System — Foundational Principles

Apply these principles whenever creating visual designs (Canva), documents (Excel, Word, PowerPoint, PDF), or advising on design decisions.

Color Theory

Contrast: WCAG AA minimum 4.5:1 for body text, 3:1 for large text (18px+ or 14px bold). Target AAA (7:1) when possible.
60-30-10 Rule: 60% dominant/neutral color, 30% secondary color, 10% accent. Never use more than 3 primary colors plus neutrals.
Avoid pure extremes: Use off-black (#1E293B or #171717) instead of #000000. Use off-white (#F8FAFC or #FAFAFA) instead of #FFFFFF.
Semantic meaning: Blue = trust/corporate, Green = growth/success, Red = urgency/error, Orange = energy/warning, Purple = premium/creative, Yellow = optimism/caution.
Colorblind safety: Never rely on color alone to convey meaning. Pair color with icons, labels, or patterns.
See color-reference.md for ready-to-use palettes.

Typography

Maximum 2 typefaces per design (heading + body). Only add a 3rd if it serves a distinct decorative purpose.
Type scale: Use ratio 1.25 (major third) or 1.333 (perfect fourth). From 16px base: H1=32-43px, H2=25-34px, H3=20-26px, body=16px, caption=13px.
Minimum sizes: 16px body on screen, 10pt body in print. Never go below 12px for any readable text.
Line height: 1.4-1.6x for body text, 1.1-1.2x for headings.
Line length: 45-75 characters per line for optimal readability.
Weight contrast: Minimum 2 weight steps between heading and body (e.g., 700 heading, 400 body).
All-caps: Increase letter-spacing by 2-5%. Use sparingly — only for short labels, never body text.
See typography-reference.md for proven font pairings.

Layout

Visual hierarchy: Size > Color > Contrast > Position > Shape. Lead the eye to the most important element first.
Whitespace: Minimum 20-30% of total canvas should be breathing room. When in doubt, add more space.
Alignment: Use a consistent system. Left-align body text (most readable for LTR languages). Center-align only for short headings or hero text.
Proximity: Related items 8-16px apart. Unrelated groups separated by 24-48px minimum. Sections by 48-96px.
Grid: 8px base unit for all spacing. 12-column grid for complex layouts, 4-column for simple/mobile.
Composition: Rule of thirds for image/focal point placement. F-pattern for text-heavy pages. Z-pattern for landing pages and posters.
Golden ratio (1:1.618): Use for content area proportions, image cropping, and section sizing.
See layout-reference.md for grid templates and spacing scale.

Brand Consistency

Consistent corner radius throughout (0px=corporate, 4-8px=modern, 12-16px=friendly).
Icon style must be uniform: filled OR outlined OR duotone — never mix within one design.
Logo clear space: minimum 1x the logo mark height on all sides.
Maintain the same color palette, type pairing, and spacing system across all deliverables in a project.

Accessibility Checklist

All text meets WCAG AA contrast (4.5:1 body, 3:1 large).
Color is not the sole indicator of meaning.
Text is actual text (not baked into images) when possible.
Tables have header rows. Documents have logical heading hierarchy (H1 > H2 > H3, no skipping).
Font size is never below 12px/10pt for any readable content.

このリポジトリの他の Skills

同じリポジトリ

gsd-driver

GrizzwaldHouse/cowork-skills

Wraps gsd-pi (Get Shit Done coding agent CLI) with Marcus's project constraints and coding standards so gsd tasks inherit observer pattern, no em-dashes, no Co-Authored-By, and AgenticOS event integration automatically. Use when the user says "run this with gsd", "hand this off to gsd", "use gsd-pi for this", "delegate to gsd", or wants to execute a coding task using gsd-pi as the execution engine rather than Claude Code directly. Also trigger when autonomous-workflow needs to fan out a phase to gsd-pi for execution.

2026-05-056

skill-forge

GrizzwaldHouse/cowork-skills

Meta-skill that runs the full skill lifecycle in one command: create, eval, improve, and publish. Use when the user says "forge a skill", "create and improve a skill", "run the skill loop on X", "build and publish a skill", "skill-forge", or wants to go from idea to production-ready skill without manually chaining skill-creator and skill-self-improver. Also trigger when the user wants to combine or upgrade existing skills, write eval.json for a skill, or push skills to GitHub. Wraps skill-creator + skill-self-improver into one /skill-forge command.

2026-05-056

session-recovery

GrizzwaldHouse/cowork-skills

Recover from interrupted AI agent coding sessions by detecting the exact interruption point, reconstructing intent from pre-written step comments, completing unfinished implementations, and validating through build + supervisor review. Use this skill whenever a user mentions session recovery, interrupted work, picking up where an agent left off, completing unfinished code, finding where a session dropped, resuming development, or anything related to detecting and finishing incomplete AI-assisted coding sessions. Also trigger when users mention Claude Code agent sessions that were cut off, lost progress, or need continuation. This skill works across all languages and frameworks — C++, C#, Python, TypeScript, Rust, Java, Go, Unreal Engine, Unity, .NET, React, Node.js. Trigger aggressively — if a user says anything about resuming, continuing, recovering, or picking up work, use this skill.

2026-05-056

agentic-parallel

GrizzwaldHouse/cowork-skills

Agent state-writing protocol for the AgenticOS Command Center. Any Claude sub-agent running in a multi-agent parallel session reads this skill to participate in dashboard tracking, approval gates, and reviewer spawning.

2026-05-046

agentic-parallel

GrizzwaldHouse/cowork-skills

Cross-domain protocol for supervised parallel multi-agent runs against the AgenticOS Command Center. Use whenever Marcus says "spawn parallel agents", "multi-agent task", "review agent output", "approval gate", "monitor sub-agents", "supervised pipeline", "gate the next stage", "run several agents", "watch the agents", or kicks off a session with named AGENT-01, AGENT-02 roster. Defines the AgentState contract, the approval gate handshake, the reviewer-agent pattern, and the parallel etiquette every sub-agent must follow to appear in the Command Center dashboard with no extra wiring.

2026-05-046

automation-orchestration

GrizzwaldHouse/cowork-skills

Workflow automation and multi-agent orchestration tools. Use when the user mentions n8n, Langflow, claude-squad, container-use, Dagger, workflow automation, pipeline orchestration, multi-agent coordination, or wants to set up automated workflows. Also trigger for 'automate this process', 'create a workflow', 'run agents in parallel', or integration of multiple tools into a pipeline.

2026-05-046

Design System — Foundational Principles

Apply these principles whenever creating visual designs (Canva), documents (Excel, Word, PowerPoint, PDF), or advising on design decisions.

Color Theory

Contrast: WCAG AA minimum 4.5:1 for body text, 3:1 for large text (18px+ or 14px bold). Target AAA (7:1) when possible.

60-30-10 Rule: 60% dominant/neutral color, 30% secondary color, 10% accent. Never use more than 3 primary colors plus neutrals.

Avoid pure extremes: Use off-black (#1E293B or #171717) instead of #000000. Use off-white (#F8FAFC or #FAFAFA) instead of #FFFFFF.

Semantic meaning: Blue = trust/corporate, Green = growth/success, Red = urgency/error, Orange = energy/warning, Purple = premium/creative, Yellow = optimism/caution.

Colorblind safety: Never rely on color alone to convey meaning. Pair color with icons, labels, or patterns.

See color-reference.md for ready-to-use palettes.

Typography

Maximum 2 typefaces per design (heading + body). Only add a 3rd if it serves a distinct decorative purpose.

Type scale: Use ratio 1.25 (major third) or 1.333 (perfect fourth). From 16px base: H1=32-43px, H2=25-34px, H3=20-26px, body=16px, caption=13px.

Minimum sizes: 16px body on screen, 10pt body in print. Never go below 12px for any readable text.

Line height: 1.4-1.6x for body text, 1.1-1.2x for headings.

Line length: 45-75 characters per line for optimal readability.

Weight contrast: Minimum 2 weight steps between heading and body (e.g., 700 heading, 400 body).

All-caps: Increase letter-spacing by 2-5%. Use sparingly — only for short labels, never body text.

See typography-reference.md for proven font pairings.

Layout

Visual hierarchy: Size > Color > Contrast > Position > Shape. Lead the eye to the most important element first.

Whitespace: Minimum 20-30% of total canvas should be breathing room. When in doubt, add more space.

Alignment: Use a consistent system. Left-align body text (most readable for LTR languages). Center-align only for short headings or hero text.

Proximity: Related items 8-16px apart. Unrelated groups separated by 24-48px minimum. Sections by 48-96px.

Grid: 8px base unit for all spacing. 12-column grid for complex layouts, 4-column for simple/mobile.

Composition: Rule of thirds for image/focal point placement. F-pattern for text-heavy pages. Z-pattern for landing pages and posters.

Golden ratio (1:1.618): Use for content area proportions, image cropping, and section sizing.

See layout-reference.md for grid templates and spacing scale.

Brand Consistency

Consistent corner radius throughout (0px=corporate, 4-8px=modern, 12-16px=friendly).

Icon style must be uniform: filled OR outlined OR duotone — never mix within one design.

Logo clear space: minimum 1x the logo mark height on all sides.

Maintain the same color palette, type pairing, and spacing system across all deliverables in a project.

Accessibility Checklist

All text meets WCAG AA contrast (4.5:1 body, 3:1 large).

Color is not the sole indicator of meaning.

Text is actual text (not baked into images) when possible.

Tables have header rows. Documents have logical heading hierarchy (H1 > H2 > H3, no skipping).

Font size is never below 12px/10pt for any readable content.

name	design-system
description	Design principles for visual output — color theory, typography, layout, accessibility. Auto-loaded for any design, Canva, or document task.
user-invocable	false