common-region
About
The common-region skill applies the Gestalt principle that elements within a shared, bounded area are perceived as a group. Use it to visually group related UI components like cards, form sections, or content containers by adding borders or distinct backgrounds. This helps create clear, scannable layouts in interfaces.
Quick Install
Claude Code
Recommended/plugin add https://github.com/majiayu000/claude-skill-registrygit clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/common-regionCopy and paste this command in Claude Code to install this skill
Documentation
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 Repository
Related Skills
content-collections
MetaThis 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
MetaThis 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.
langchain
MetaLangChain is a framework for building LLM applications using agents, chains, and RAG pipelines. It supports multiple LLM providers, offers 500+ integrations, and includes features like tool calling and memory management. Use it for rapid prototyping and deploying production systems like chatbots, autonomous agents, and question-answering services.
Algorithmic Art Generation
MetaThis skill helps developers create algorithmic art using p5.js, focusing on generative art, computational aesthetics, and interactive visualizations. It automatically activates for topics like "generative art" or "p5.js visualization" and guides you through creating unique algorithms with features like seeded randomness, flow fields, and particle systems. Use it when you need to build reproducible, code-driven artistic patterns.