common-region
について
common-regionスキルは、共有された境界付きエリア内の要素がグループとして知覚されるというゲシュタルトの法則を適用します。このスキルを使用して、カード、フォームセクション、コンテンツコンテナなどの関連するUIコンポーネントを、境界線や明確な背景を追加することで視覚的にグループ化します。これにより、インターフェース内で明確でスキャンしやすいレイアウトを作成することができます。
クイックインストール
Claude Code
推奨/plugin add https://github.com/majiayu000/claude-skill-registrygit clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/common-regionこのコマンドをClaude Codeにコピー＆ペーストしてスキルをインストールします
ドキュメント
Principio de Región Común
Resumen
Los elementos que comparten un área cerrada o delimitada se perciben como pertenecientes al mismo grupo, incluso si no comparten otras características.
Origen
- Autor: Stephen Palmer
- Año: 1992
- Fuente: "Common Region: A New Principle of Perceptual Grouping"
Fundamento Psicológico
Los límites visuales crean containers perceptuales que el cerebro interpreta como agrupadores. Es un principio más reciente, agregado a la Gestalt clásica, pero extremadamente relevante para interfaces digitales donde cards y containers son ubicuos.
Aplicación en Diseño
Cards y Containers
- Cards con border o background diferenciado
- Secciones con fondos alternos
- Fieldsets con border visible
- Well components para contenido agrupado
Formularios
- Grupos de campos relacionados en sections
- Fieldsets para datos de contacto, envío, pago
- Inline grouping para campos relacionados
- Step containers en wizards
Dashboards
- Widgets en cards separadas
- Métricas agrupadas por categoría
- Paneles con bordes definidos
- Data visualization containers
Listas y Tablas
- Rows con alternating backgrounds
- Headers en región separada
- Footers delimitados
- Grupos de filas relacionadas
Ejemplos
- Material Design Cards: Elevated containers para contenido
- Bootstrap Wells: Áreas con fondo diferenciado
- Form Fieldsets: Grupos de campos con legend
- Dashboard Widgets: Cada métrica en su card
- Stripe Checkout: Secciones claramente delimitadas
Anti-patterns
- ❌ Contenido relacionado sin container visual
- ❌ Cards con bordes tan sutiles que no delimitan
- ❌ Secciones sin separación clara
- ❌ Formularios sin agrupación de campos
- ❌ Demasiados niveles de nesting confusos
Métricas
- Group Association Accuracy: Usuarios asocian contenido correctamente
- Visual Boundary Clarity: Claridad de delimitaciones
- Container Hierarchy: Niveles de anidamiento comprensibles
- Scan Pattern Efficiency: Eye-tracking respeta regiones
Principios Relacionados
- [[proximity]] - Cercanía dentro de región refuerza grupo
- [[figure-ground]] - Región como figura sobre fondo
- [[similarity]] - Styling de containers consistente
Referencias
- Palmer, S.E. (1992). "Common Region: A New Principle of Perceptual Grouping"
- Lidwell, W. et al. (2010). "Universal Principles of Design"
- https://uxdesign.cc/gestalt-principles-in-ux-design-6-common-region-26ab9d57c8a7
GitHub リポジトリ
関連スキル
content-collections
メタThis skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.
creating-opencode-plugins
メタThis skill provides the structure and API specifications for creating OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It offers implementation patterns for JavaScript/TypeScript modules that intercept and extend the AI assistant's lifecycle. Use it when you need to build event-driven plugins for monitoring, custom handling, or extending OpenCode's capabilities.
polymarket
メタThis skill enables developers to build applications with the Polymarket prediction markets platform, including API integration for trading and market data. It also provides real-time data streaming via WebSocket to monitor live trades and market activity. Use it for implementing trading strategies or creating tools that process live market updates.
cloudflare-turnstile
メタThis skill provides comprehensive guidance for implementing Cloudflare Turnstile as a CAPTCHA-alternative bot protection system. It covers integration for forms, login pages, API endpoints, and frameworks like React/Next.js/Hono, while handling invisible challenges that maintain user experience. Use it when migrating from reCAPTCHA, debugging error codes, or implementing token validation and E2E tests.