Communitygithub.com

lguidolin/interface-craft-and-accessibility

Verwenden Sie diesen Skill beim Erstellen oder Gestalten von UI – Komponenten, Layouts, Formularen, Design-Tokens – oder beim Treffen von Barrierefreiheitsentscheidungen. Schlüsselwörter: a11y, WCAG, Tastaturnavigation, Fokusstatus, Kontrast, Designsystem, minimalistische UI, Wiederverwendung von Komponenten, ARIA, semantisches HTML.

Was ist interface-craft-and-accessibility?

Dieser Skill definiert einen standardisierten Ansatz für UI-Entwicklung und Barrierefreiheit, der auf Zugänglichkeit, Minimalismus und Ästhetik durch konstruktive Einschränkungen setzt – nicht durch nachträgliche Verfeinerung. Er wandelt subjektiven Geschmack in überprüfbare Regeln, Design-Constraints und Eskalationsmechanismen um. Der Skill unterstützt Agenten wie Claude Code, Cursor oder Codex und stellt sicher, dass interaktive Elemente tastaturerreichbar sind, sichtbare Fokuszustände haben, semantisches HTML und ARIA-Landmarken verwenden sowie die WCAG-AA-Kontrastanforderungen erfüllen. Ästhetische Entscheidungen werden nie unabhängig getroffen, sondern entweder durch vorhandene Präzedenzfälle oder durch menschliche Entscheidungen über Eskalation gelöst. Der Skill fördert Konsistenz durch Design-Token, vermeidet ‚Magic Numbers‘ und wendet das DRY-Prinzip auf das UI-Interface an, indem ähnliche Komponenten parametrisiert werden. Die Überprüfung erfolgt über a11y-Linting und Tests in CI sowie über Code-Reviews unter Anwendung der Eskalationsregel.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/lguidolin/agent-skills/tree/main/skills/interface-craft-and-accessibility
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Interface-Gestaltung und Barrierefreiheit

Überblick

Der Standard ist zugänglich, minimalistisch und schön – durch Konstruktion, nicht durch Nachbearbeitung. Geschmack ist als Regel nicht handlungsleitend, daher wird er in Einschränkungen, Präzedenzfälle und Eskalation umgewandelt. Der Agent wird nicht gebeten, Geschmack zu erfinden, sondern nur Einschränkungen zu respektieren und den Rest zu eskalieren.

Barrierefreiheit – eine Anforderung, kein Feinschliff

Überprüfbare Regeln:

  • Jedes interaktive Element ist tastaturerreichbar mit einem sichtbaren Fokuszustand.
  • Jedes Steuerelement hat einen zugänglichen Namen; jedes Formularfeld hat ein zugehöriges Label und klare Fehlermeldungen.
  • Semantisches HTML und Landmarken anstelle von div-Suppe.
  • Farbkontrast erfüllt WCAG AA; Bedeutung wird nie nur durch Farbe vermittelt.
  • Respektieren Sie die reduced-motion-Präferenzen.

Schön und minimalistisch – als Einschränkungen, nicht als Stimmungen

  • Konsistenz durch Einschränkung. Verwenden Sie die Tokens des Designsystems – Abstände, Schriftgrößen, Farbskala. Keine einmaligen Magic Numbers. Kohärenz ist die Ästhetik.
  • Vorhandene Bildschirme sind der Styleguide. Passen Sie die etablierte visuelle Sprache an, bevor Sie etwas erfinden.
  • Zurückhaltung (UI-YAGNI). Jedes Element verdient seinen Platz; entfernen Sie, bis das Entfernen etwas kaputt macht. Hierarchie und Weißraum statt Dichte und Dekoration.
  • Bevorzugen Sie die Muster der Komponentenbibliothek, bevor Sie benutzerdefinierte UI bauen.
  • Zwei ähnliche UI-Elemente → eine parametrisierte Komponente. Unterschiede sind Props/Varianten, niemals Copy-Paste. Eine dritte Kopie ist ein Fehler. (DRY angewandt auf das Interface.)

Die Eskalationsregel

Geschmacksentscheidungen eskalieren; sie werden nie eigenständig getroffen. Wenn eine Wahl wirklich ästhetisch ist und durch Tokens oder Präzedenzfälle nicht eindeutig bestimmt ist, raten Sie nicht stillschweigend:

  1. Folgen Sie dem nächstgelegenen vorhandenen Präzedenzfall, oder
  2. Zeigen Sie Optionen auf (Mockups, Side-by-Side-Vergleiche) für eine menschliche Geschmacksentscheidung.

Kurzreferenz

SituationVorgehen
Neue Komponente ähnelt einer vorhandenenParametrisieren Sie die vorhandene; kopieren Sie nicht
Ein Abstands-/Farbwert ist nicht in den TokensVerwenden Sie den nächstgelegenen Token; erfinden Sie keine Magic Number
Wirklich neuartige visuelle EntscheidungEskalieren Sie mit Optionen; treffen Sie keine eigenständige Entscheidung
Hinzufügen eines interaktiven ElementsTastatur + Fokus + zugänglicher Name, von Anfang an

Durchsetzung: a11y-Linting/Tests in CI (z. B. eslint-plugin-jsx-a11y, axe) für die überprüfbaren Regeln; ästhetische Zurückhaltung ist Ermessenssache des Reviewers gemäß der Eskalationsregel.

Vollständige Begründung: Artikel VII der Verfassung, gebündelt in engineering-constitution/references/engineering-constitution.md.

Individual skills in this repo

This repo contains 18 individual skills — each has its own dedicated page.

lguidolin/change-hygiene-and-code-craft

Use when writing or refactoring code, structuring a commit or PR, or deciding whether to abstract duplication. Symptoms — mixing reorg with logic changes, a PR doing several things at once, a file growing large, the second copy of similar code, or unsure whether to DRY something up.

lguidolin/cloud-delivery-aks

Use when deploying to Kubernetes or Azure Kubernetes Service (AKS), configuring cloud secrets, setting up progressive rollout/canary, per-PR ephemeral environments, or k8s health probes. Keywords — Kubernetes, AKS, Key Vault, Argo Rollouts, Flagger, canary, blue-green, liveness, readiness, PodDisruptionBudget, HPA, rollback, GHCR.

lguidolin/commit-history-rewrite

Use when an existing repository has messy commit history that needs to conform to conventional commits before adopting release-please, or when intermediate WIP/fixup/merge commits need to be cleaned up.

lguidolin/conventional-commits-and-releases

Use when committing, writing a commit message, opening a PR that will be squash-merged, or configuring automated versioning/changelogs. Keywords — conventional commits, release-please, semver, feat/fix/chore, breaking change, changelog.

lguidolin/defense-in-depth-security

Use when handling untrusted input, secrets, authentication/authorization, or dependencies — or threat-modeling a new surface. Keywords — STRIDE, threat model, least privilege, secrets management, supply chain, dependency scanning, input validation, audit log, defense in depth.

lguidolin/designing-before-building

Use when starting a feature, fixing a non-trivial bug, or about to write implementation code — before any code exists. Symptoms you need this: "this is simple, I'll just code it", reaching for the editor before a design is approved, or an idea that hasn't been turned into a spec and plan.

lguidolin/engineering-constitution

Use when starting work in a project that follows the engineering constitution, orienting to its rules, or deciding which engineering practice applies to a task — spec writing, commits, testing, security, deploys, database, or UI work.

lguidolin/graphql-contract-testing

Use when writing a GraphQL query/mutation that the UI and a test will share, or building route/schema contract or smoke tests. Symptoms — copying a query into a test, a test asserting on query text, schema change that didn't break the UI build, or RLS/permission drift. Keywords — graphql-codegen, typed document, contract test, route smoke test.

lguidolin/init-repo-CI

Use when setting up a new repository with conventional commits, release-please, and CI automation, or when retrofitting an existing repository that lacks automated versioning and PR validation workflows.

lguidolin/merge-gates-and-automation

Use when setting up or changing CI, pre-push hooks, or a task runner, or deciding what must pass before merge. Symptoms — tempted to put authoritative checks only in a local hook, skip CI, bypass with --no-verify, or unsure what gates a merge vs. runs locally.

lguidolin/observability-and-slos

Use when adding logging, metrics, tracing, health checks, SLOs, or alerting — or when building a service surface that needs to be operable and debuggable. Keywords — structured logs, OpenTelemetry, correlation id, RED metrics, liveness, readiness, SLI, SLO, error budget, alerting.

lguidolin/performance-and-scale

Use when working on hot paths, list endpoints, pagination, data-access in loops, or public interfaces/schemas. Symptoms — unbounded queries, N+1 access, no latency budget, optimizing without measuring, or changing an interface many consumers depend on. Keywords — pagination, N+1, Hyrum's Law, performance budget, bundle size.

lguidolin/postgres-postgraphile-rls-and-sql

Use when writing PostgreSQL, PostGraphile config, Row-Level Security policies, SQL schema files, or working on the Browser→App→PostGraphile→Postgres data path. Keywords — RLS, SECURITY DEFINER, search_path, pgSettings, grants, roles, GraphQL depth limit, query cost, statement_timeout, SQL file organization.

lguidolin/recording-decisions

Use when a design or architecture decision has been made and needs to be captured — writing a decision record or ADR, updating a decision index, noting a deferred idea, or superseding a past decision. Keywords — ADR, decision record, rationale, rejected alternatives, dependency index.

lguidolin/resilience-and-deploy-safety

Use when planning a deploy, designing a rollback, or responding to an incident or writing a postmortem. Keywords — deploy safety, rollback, immutable artifact, progressive delivery, canary, blast radius, incident response, blameless postmortem, error budget.

lguidolin/ship-it

Use when the user wants to ship work — push, PR, archive decision records, merge, and clean up. Handles the full lifecycle from committing final changes through post-merge cleanup including converting specs/plans to compact decision records.

lguidolin/tests-as-a-control

Use when writing or modifying tests, when a test breaks during a refactor, or when testing permission/role rules. Symptoms — tempted to edit a test to make it pass, testing only the happy path, a deny-test that started passing, flaky tests, or unsure what to assert.

lguidolin/zero-downtime-migrations

Use when changing a database schema where data must survive the change — adding/removing/renaming columns, constraints, indexes, or backfilling. Symptoms — a destructive migration bundled with a code deploy, a NOT NULL column with a backfill, a table-locking UPDATE, or a rename. Keywords — expand/contract, parallel change, backfill, NOT VALID, CREATE INDEX CONCURRENTLY, graphile-migrate.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community