Communitygithub.com

lguidolin/interface-craft-and-accessibility

À utiliser lors de la création ou du stylisme d'UI — composants, mises en page, formulaires, jetons de conception — ou lors de décisions d'accessibilité. Mots-clés — a11y, WCAG, navigation clavier, état de focus, contraste, système de conception, UI minimaliste, réutilisation de composants, ARIA, HTML sémantique.

Qu'est-ce que interface-craft-and-accessibility ?

Cette compétence est destinée aux développeurs et agents IA travaillant avec Claude Code, Cursor, Codex et des plateformes similaires, afin d'appliquer une approche systématique pour construire des interfaces accessibles, minimalistes et esthétiquement cohérentes. Elle transforme le « goût » subjectif en contraintes vérifiables et en règles d'escalade. La compétence impose que toute interaction soit accessible au clavier, que chaque élément possède un nom accessible, que les contrastes respectent le niveau AA des WCAG, et que les préférences de mouvement réduit soient honorées. L'esthétique est gérée par la cohérence : utilisation exclusive des jetons du système de conception, respect des écrans existants comme guide de style, et application du principe UI-YAGNI (chaque élément doit justifier sa présence). En cas de décision esthétique sous-déterminée par les tokens ou le précédent, la règle d'escalade s'applique : suivre le précédent existant ou présenter des options pour une décision humaine. Des outils concrets comme eslint-plugin-jsx-a11y et axe sont recommandés pour l'application automatique des règles d'accessibilité dans l'intégration continue.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/lguidolin/agent-skills/tree/main/skills/interface-craft-and-accessibility
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Interface Craft et Accessibilité

Aperçu

La norme est accessible, minimaliste et belle — par construction, pas par polissage. Le goût est inactionnable en règle générale, il est donc converti en contraintes, précédents et escalade. L'agent n'est pas invité à inventer du goût, seulement à respecter les contraintes et à escalader le reste.

Accessibilité — une Exigence, Pas une Couche de Finition

Règles vérifiables :

  • Chaque élément interactif est atteignable au clavier avec un état de focus visible.
  • Chaque contrôle a un nom accessible ; chaque champ de formulaire a une étiquette associée et des messages d'erreur clairs.
  • HTML sémantique et points de repère plutôt que des div à gogo.
  • Le contraste des couleurs respecte WCAG AA ; la signification n'est jamais transmise par la seule couleur.
  • Respecter les préférences de mouvement réduit.

Beau et Minimaliste — en Tant que Contraintes, Pas de Vibes

  • Cohérence par la contrainte. Utiliser les jetons du système de conception — espacement, échelle typographique, échelle de couleurs. Pas de nombres magiques uniques. La cohérence est l'esthétique.
  • Les écrans existants sont le guide de style. Suivre le langage visuel établi avant d'inventer.
  • Retenue (UI-YAGNI). Chaque élément mérite sa place ; supprimer jusqu'à ce que la suppression casse quelque chose. La hiérarchie et les espaces blancs plutôt que la densité et la décoration.
  • Préférer les motifs de la bibliothèque de composants avant de construire une UI personnalisée.
  • Deux éléments d'UI similaires → un composant paramétré. Les différences sont des props/variantes, jamais du copier-coller. Une troisième copie est un défaut. (DRY appliqué à l'interface.)

La Règle d'Escalade

Les décisions de goût escaladent ; elles ne sont jamais prises en freelance. Lorsqu'un choix est véritablement esthétique et sous-déterminé par les jetons ou le précédent, ne devinez pas en silence :

  1. Suivre le précédent existant le plus proche, ou
  2. Présenter des options (maquettes, comparaisons côte à côte) pour une décision humaine sur le goût.

Référence Rapide

SituationFaire
Nouveau composant ressemble à un existantParamétrer l'existant ; ne pas copier
Une valeur d'espacement/couleur n'est pas dans les jetonsUtiliser le jeton le plus proche ; ne pas inventer de nombre magique
Décision visuelle véritablement nouvelleEscalader avec des options ; ne pas faire en freelance
Ajout d'un élément interactifClavier + focus + nom accessible, dès le départ

Application : linting/tests d'accessibilité dans l'intégration continue (p.ex. eslint-plugin-jsx-a11y, axe) pour les règles vérifiables ; la retenue esthétique relève du jugement du relecteur via la règle d'escalade.

Raisonnement complet : Article VII de la constitution, regroupé dans 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.

Skills associés

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