メニュー
Design theory and principles — grid systems, proportional logic, dynamic composition, color science, and concept-driven strategy. Use when defining layout systems, building palettes, planning brand strategy, or auditing composition and visual energy.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
Automate browser interactions, test web pages and work with Playwright tests.
Advanced guidelines and best practices for writing tests using Vitest. Apply this skill when generating, reviewing, or refactoring test codes to prevent common pitfalls and ensure high performance.
Fixed 1536×864 touch viewport — grid, margins, 8px rhythm, touch targets, typography, components, vertical rhythm, and QA checklist for panel/kiosk/HMI. Use when designing or implementing UIs for this resolution with touch-first input.
Lists available Cursor agents (planner, architect, tdd-guide, code-reviewer, security-reviewer, build-error-resolver, e2e-runner, refactor-cleaner, doc-updater) and when to use each. Use when the user asks which agent to use, how to delegate work, or what agents are available.
Async parallelization patterns — Promise.all, waterfall prevention, dependency-based parallelism, RSC component composition, deferred await. Use when optimizing async operations, API routes, or data fetching.
| name | design-theory |
| description | Design theory and principles — grid systems, proportional logic, dynamic composition, color science, and concept-driven strategy. Use when defining layout systems, building palettes, planning brand strategy, or auditing composition and visual energy. |
Foundational design theory covering grid systems, dynamic composition, color science, and concept-driven strategy.
The grid is the visual grammar of the page — strategic support for composition, not decoration.
| Component | Role |
|---|---|
| Margins | Container; prevent cramping |
| Columns | Equal width; images spanning N columns relate mathematically to single-column text |
| Gutters | 12–18pt standard. <12pt fails as separator; >18pt disconnects |
| Hang lines | Horizontal anchors; without them, imagery and text "bounce" |
Grid stretches/contracts; proportional relationships and hierarchy stay constant across devices.
Composition bridges idea and message. A successful layout must: attract attention, deliver a clear message, and communicate story/tone.
| Element | Impact |
|---|---|
| Thicker lines | Importance, attention, texture, boundary |
| Rounded shapes | Softness, calm, stability |
| Sharp/angular shapes | Assertiveness, agility, energy |
| Repeated shapes | Recognizable language, familiarity |
Color is a strategic tool for functional requirements and brand personality.
| Type | Character | Use |
|---|---|---|
| Complementary | Max dynamism, contrast | Bold, balanced presence |
| Analogous | Cohesion, harmony | Soothing, unified layouts |
| Triadic | Diversity + consistency | Varieties within one family |
| Monochromatic | Depth, contemporary | Restricted palettes |
The concept is the "soul" and "roadmap" — the North Star that prevents creative drift.
Every creative decision must pass through the central idea. Root the "why" in a story, feeling, or "big idea"; then define the audience.
Translate the central concept into a visual and tactical roadmap:
