Communitygithub.com

lguidolin/interface-craft-and-accessibility

UIコンポーネント、レイアウト、フォーム、デザイントークンの構築やスタイリング、アクセシビリティ判断時に使用します。キーワード: a11y、WCAG、キーボードナビゲーション、フォーカス状態、コントラスト、デザインシステム、ミニマリストUI、コンポーネント再利用、ARIA、セマンティックHTML。

interface-craft-and-accessibility とは?

このスキルは、UI構築とアクセシビリティを統合的に管理するためのルールセットです。エージェントは「味覚」を発明するのではなく、定義された制約と先例に従い、判断できない場合は人間にエスカレーションします。アクセシビリティは後付けではなく必須要件として扱い、キーボード操作可能なフォーカス状態、適切なアクセシブルネーム、セマンティックHTML、WCAG AA準拠のコントラスト、アニメーション設定の尊重などをチェック可能なルールとして定義します。デザイン面では、デザインシステムのトークンに厳密に従い、既存画面をスタイルガイドとして参照し、UI-YAGNIの原則で不要な要素を排除します。類似UIはパラメータ化された単一コンポーネントに統合し、コピーペーストを禁止します。主にclaude-codeやcursorなどのAIエージェントツールで活用し、CIでのa11yリンティング(eslint-plugin-jsx-a11y、axe)による自動チェックを行います。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lguidolin/agent-skills/tree/main/skills/interface-craft-and-accessibility

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Interface Craft and Accessibility(インターフェース設計とアクセシビリティ)

概要

標準はアクセシブルで、ミニマルで、美しいこと——それは後付けの「磨き」ではなく、「設計段階からの条件」です。味覚はルール化できないため、制約、先例、エスカレーションに変換されます。エージェントは味覚を発明するのではなく、制約を尊重し、残りをエスカレーションするよう求められます。

アクセシビリティ——後処理ではなく必須要件

チェック可能なルール:

  • すべてのインタラクティブ要素はキーボードで到達可能であり、可視のフォーカス状態を持つこと。
  • すべてのコントロールにはアクセシブルネームが、すべてのフォームフィールドには関連するラベルと明確なエラーメッセージが存在すること。
  • セマンティックHTMLとランドマークを使用し、divの羅列を避けること。
  • カラーコントラストはWCAG AAを満たし、意味を色だけで伝えてはならない。
  • 動きの縮減(reduced-motion) 設定を尊重すること。

美しくミニマル——「雰囲気」ではなく「制約」として

  • 制約による一貫性。 デザインシステムのトークン(スペーシング、タイプスケール、カラースケール)を使用すること。独自のマジックナンバーは禁止。一貫性こそが美観です。
  • 既存画面がスタイルガイド。 新しいものを発明する前に、確立されたビジュアル言語に合わせること。
  • 抑制(UI-YAGNI)。 すべての要素は設置の価値を証明する必要があります。削除しても壊れないものは削除してください。密度や装飾よりも、階層構造とホワイトスペースを優先します。
  • カスタムUIを構築する前に、コンポーネントライブラリのパターンを優先すること。
  • 類似した2つのUI要素 → 1つのパラメータ化コンポーネント。 差異はプロパティやバリアントで表現し、コピーペーストは禁止。3つ目のコピーは欠陥とみなします(DRY原則をインターフェースに適用)。

エスカレーションルール

味覚に関する決定はエスカレーションされ、独断で行われてはなりません。 選択が純粋に美的であり、トークンや先例によって決定されていない場合、黙って推測してはいけません:

  1. 最も近い既存の先例に従うか、
  2. 選択肢(モックアップ、比較表など)を提示し、人間の判断を仰ぐ。

クイックリファレンス

状況やるべきこと
新しいコンポーネントが既存のものに似ている既存のものをパラメータ化する。コピーしない
スペーシングやカラー値がトークンにない最も近いトークンを使用する。マジックナンバーを発明しない
本当に新しいビジュアル判断が必要選択肢とともにエスカレーションする。独断で決めない
インタラクティブ要素を追加する最初からキーボード操作+フォーカス+アクセシブルネームを実装する

強制: チェック可能なルールについてはCIでa11yリンティング/テスト(例: eslint-plugin-jsx-a11y、axe)を実施。美的抑制は、エスカレーションルールによるレビューアーの判断に委ねます。

詳細な根拠: 憲法第7条、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.

関連スキル