consistency-principle
About
This skill helps developers apply consistency principles when establishing design patterns or evaluating system coherence. It provides guidelines for maintaining consistent behaviors and appearances to improve usability. Use it during design system creation, pattern definition, or UI consistency reviews.
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/consistency-principleCopy and paste this command in Claude Code to install this skill
Documentation
Principio de Consistencia
Resumen
La usabilidad mejora cuando elementos similares funcionan de manera similar en todo el sistema. La consistencia reduce el aprendizaje, previene errores, y crea confianza.
Origen
- Concepto: Principio fundamental de diseño de interfaces
- Documentado por: Ben Shneiderman (8 Golden Rules), Jakob Nielsen
- Año: ~1980s
Tipos de Consistencia
Consistencia Interna
- Mismo sistema, mismas reglas
- Botones iguales en todas las pantallas
- Terminología uniforme
- Comportamientos predecibles
Consistencia Externa
- Convenciones de plataforma (iOS, Android, Web)
- Patrones de industria
- Estándares de accesibilidad
- Expectativas de otros productos
Consistencia Visual
- Colores con significado consistente
- Tipografía con jerarquía clara
- Espaciado y layout uniforme
- Iconografía coherente
Consistencia Funcional
- Mismas acciones, mismos resultados
- Shortcuts que funcionan igual
- Flujos predecibles
- Feedback consistente
Aplicación en Diseño
Design Systems
- Tokens de diseño documentados
- Componentes reutilizables
- Guidelines de uso
- Patrones de interacción definidos
UX Writing
- Voz y tono consistente
- Terminología estandarizada
- Mensajes de error uniformes
- CTAs con lenguaje predecible
Interacciones
- Gestos con significado fijo
- Animaciones con timing consistente
- Estados (hover, active, disabled) uniformes
- Feedback visual predecible
Ejemplos
- Material Design: Sistema completo de Google
- Apple HIG: Guidelines para iOS/macOS
- Stripe: Consistencia en productos, docs, dashboard
- Slack: Patrones uniformes en toda la app
- Notion: Blocks que funcionan igual en todos lados
Anti-patterns
- ❌ Botones de diferentes colores para misma acción
- ❌ Terminología mixta ("Guardar" vs "Salvar")
- ❌ Navegación que cambia de posición
- ❌ Gestos con significados diferentes
- ❌ Estilos de fecha/hora inconsistentes
Métricas
- Style Guide Compliance: Adherencia a guidelines
- User Expectation Match: Comportamiento vs expectativa
- Learnability Score: Velocidad de aprendizaje
- Error Rate by Inconsistency: Errores por confusión
Principios Relacionados
- [[nielsen-consistency]] - Heurística de consistencia
- [[jakobs-law]] - Expectativas de otros sitios
- [[similarity]] - Gestalt: similitud visual
Referencias
- Shneiderman, B. (1987). "Designing the User Interface"
- Nielsen, J. (1994). "Heuristic Evaluation"
- https://www.nngroup.com/articles/consistency-and-standards/
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.