メニュー
Design review checklists, accessibility standards, and UX patterns. Use when: "review design", "check accessibility", "design critique", "UX audit"
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use Firecrawl for markdown-first web scraping, crawling, and site mapping. Use when: "firecrawl", "crawl docs", "scrape website to markdown", "map website", "rag crawl".
ThoughtMap pipeline, output interpretation, and MCP vector search tools. Use when: "thoughtmap", "thought clusters", "search thoughts", "what am I thinking about", "semantic search notes", "knowledge base", "vector search", "find context in notes", "cluster distances", "topic map", "thinking patterns".
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.
Create and edit Obsidian Bases (.base files) with views, filters, formulas, and summaries. Use when working with .base files, creating database-like views of notes, or when the user mentions Bases, table views, card views, filters, or formulas in Obsidian.
Interact with Obsidian vaults using the Obsidian CLI to read, create, search, and manage notes, tasks, and properties. Also supports plugin and theme development. Use when the user asks to interact with their Obsidian vault from the command line, manage notes, search vault content, or develop and debug Obsidian plugins and themes.
Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax. Use when working with .md files in Obsidian, or when the user mentions wikilinks, callouts, frontmatter, tags, embeds, or Obsidian notes.
| name | design-review |
| description | Design review checklists, accessibility standards, and UX patterns. Use when: "review design", "check accessibility", "design critique", "UX audit" |
Checklists and standards for reviewing interfaces.
Before deep review, answer:
| Rule | Standard |
|---|---|
| Base unit | 8px grid |
| Touch targets | 44px minimum |
| Breathing room | Adequate around interactive elements |
| Grouping | Related = close, unrelated = far |
| Standard | Requirement |
|---|---|
| WCAG AA text | 4.5:1 contrast ratio minimum |
| WCAG AA large text | 3:1 contrast ratio |
| Color meaning | Consistent (red=danger, green=success) |
| Accessibility | Color not the only indicator |
Every interactive element needs:
| State | Purpose |
|---|---|
| Default | Normal appearance |
| Hover | Desktop feedback |
| Focus | Keyboard navigation (accessibility) |
| Active/Pressed | Click feedback |
| Disabled | Unavailable + explanation why |
| Loading | Processing feedback |
| Error | What went wrong + how to fix |
| Issue | Problem |
|---|---|
| Unlabeled icons | Users shouldn't guess |
| Walls of text | Nobody reads blocks |
| Disabled without explanation | User deserves to know why |
| Inconsistent patterns | Breaks learned behavior |
| No loading states | User doesn't know if action worked |
| Hostile error messages | "Error 500" tells nothing |
| Buried primary actions | Hidden in dropdowns/menus |
| Modal overuse | Every modal is an interruption |
| Rule | Standard |
|---|---|
| Duration | Under 300ms for micro-interactions |
| Easing | Natural curves (ease-out for enters, ease-in for exits) |
| Purpose | Guides attention, not decoration |
| Reduce motion | Respect prefers-reduced-motion |
| Resource | Location |
|---|---|
| Design System | Second Brain/Projects/{project}/design-system.md |
| Brand Guide | Project-specific brand documentation |
"Every interface is a conversation. Make it feel human."
