affordances — community affordances, handwriting-ocr, community, ide skills, Claude Code, Cursor, Windsurf

v1.0

Acerca de este Skill

Perfecto para Agentes de Interacción Humano-Computadora que necesitan capacidades de diseño de interfaz intuitiva basadas en affordances App de reconocimiento de escritura manuscrita personalizada con benchmarking de LLMs

vjrivmon vjrivmon
[0]
[0]
Updated: 1/21/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 7/11

This page remains useful for operators, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution
Review Score
7/11
Quality Score
31
Canonical Locale
es
Detected Body Locale
es

Perfecto para Agentes de Interacción Humano-Computadora que necesitan capacidades de diseño de interfaz intuitiva basadas en affordances App de reconocimiento de escritura manuscrita personalizada con benchmarking de LLMs

¿Por qué usar esta habilidad?

Habilita a los agentes a diseñar interfaces de usuario amigables aprovechando las affordances físicas y cognitivas, utilizando los principios de diseño descritos en 'The Design of Everyday Things' y aplicándolos a través de bibliotecas como p5.js para visualizaciones interactivas

Mejor para

Perfecto para Agentes de Interacción Humano-Computadora que necesitan capacidades de diseño de interfaz intuitiva basadas en affordances

Casos de uso accionables for affordances

Diseñar diseños de botones intuitivos para aplicaciones web
Crear prototipos interactivos para probar la experiencia del usuario
Analizar interfaces existentes para mejoras basadas en affordances

! Seguridad y limitaciones

  • Requiere comprensión de factores humanos y principios de diseño
  • Limitado a aplicaciones donde la interacción del usuario es una preocupación principal

Why this page is reference-only

  • - Current locale does not satisfy the locale-governance contract.
  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is affordances?

Perfecto para Agentes de Interacción Humano-Computadora que necesitan capacidades de diseño de interfaz intuitiva basadas en affordances App de reconocimiento de escritura manuscrita personalizada con benchmarking de LLMs

How do I install affordances?

Run the command: npx killer-skills add vjrivmon/handwriting-ocr/affordances. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for affordances?

Key use cases include: Diseñar diseños de botones intuitivos para aplicaciones web, Crear prototipos interactivos para probar la experiencia del usuario, Analizar interfaces existentes para mejoras basadas en affordances.

Which IDEs are compatible with affordances?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for affordances?

Requiere comprensión de factores humanos y principios de diseño. Limitado a aplicaciones donde la interacción del usuario es una preocupación principal.

How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add vjrivmon/handwriting-ocr/affordances. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use affordances immediately in the current project.

! Reference-Only Mode

This page remains useful for installation and reference, but Killer-Skills no longer treats it as a primary indexable landing page. Read the review above before relying on the upstream repository instructions.

Imported Repository Instructions

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

Supporting Evidence

affordances

Install affordances, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly
Imported Repository Instructions
The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.
Supporting Evidence

Affordances (Prestaciones)

Resumen

Las affordances son propiedades de un objeto que sugieren cómo puede ser usado. Un botón que parece presionable tiene buena affordance. Los usuarios deberían saber qué hacer sin instrucciones.

Origen

  • Autor: James J. Gibson (original), Don Norman (aplicación al diseño)
  • Año: 1966 (Gibson), 1988 (Norman)
  • Fuente: "The Design of Everyday Things" - Don Norman

Tipos de Affordances

Affordances Físicas (Gibson)

  • Propiedades reales del objeto
  • Una silla "afford" sentarse
  • Relación entre actor y objeto

Affordances Percibidas (Norman)

  • Lo que el usuario cree que puede hacer
  • Más relevante para UI digital
  • Señales visuales que sugieren uso

Signifiers

  • Señales explícitas de cómo usar algo
  • Labels, iconos, instrucciones
  • Complementan affordances implícitas

Aplicación en Diseño

Botones

  • Aspecto 3D o sombreado sugiere "presionable"
  • Estados hover que invitan al click
  • Tamaño táctil adecuado
  • Color que indica interactividad
  • Subrayado o color distintivo
  • Cursor que cambia a pointer
  • Estados visited diferenciados
  • Texto que sugiere acción

Formularios

  • Campos con borde que invita a escribir
  • Placeholders que muestran formato esperado
  • Labels claros de qué introducir
  • Checkboxes que parecen marcables

Controles

  • Sliders con affordance de arrastrar
  • Toggle switches que invitan a cambiar
  • Dropdowns con flecha indicativa
  • Drag handles visibles

Ejemplos

  • iOS: Botones con esquinas redondeadas y color
  • Material Design: Elevation para elementos interactivos
  • Scrollbars: Affordance de arrastre
  • Input fields: Borde que invita a escribir
  • Door handles: Push plates vs pull handles

Anti-patterns

  • ❌ Links que no parecen links
  • ❌ Botones planos sin estado hover
  • ❌ Áreas clickeables sin señales visuales
  • ❌ Texto interactivo sin diferenciación
  • ❌ Controles que no sugieren su función

Métricas

  • Discoverability Score: % de usuarios que encuentran funciones
  • First Click Accuracy: Clicks correctos sin ayuda
  • Error Rate: Clicks en áreas no interactivas
  • Time to First Interaction: Tiempo para primera acción

Principios Relacionados

  • [[feedback-principle]] - Confirmar que la affordance funcionó
  • [[nielsen-visibility]] - Hacer visible lo que es posible
  • [[constraints-principle]] - Limitar acciones a las válidas

Referencias

Habilidades relacionadas

Looking for an alternative to affordances or another community skill for your workflow? Explore these related open-source skills.

Ver todo

openclaw-release-maintainer

Logo of openclaw
openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

333.8k
0
Inteligencia Artificial

widget-generator

Logo of f
f

Generar complementos de widgets personalizables para el sistema de feeds de prompts.chat

149.6k
0
Inteligencia Artificial

flags

Logo of vercel
vercel

El Marco de React

138.4k
0
Navegador

pr-review

Logo of pytorch
pytorch

Tensores y redes neuronales dinámicas en Python con fuerte aceleración de GPU

98.6k
0
Desarrollador