design-io

Plugin design-io from marketplace hamidun in JHamidun/claude-code-config-pack. Commands read from the repo's manifest — 26 days ago.

Skills (20)

• a11y-audit

  Прогон axe-core в headless: отчёт по WCAG-нарушениям готовой страницы. Триггеры: «проверь accessibility», «WCAG», «контраст AA». НЕ как размечать форму→forms-a11y.

• claude-design

  Claude Design (claude.ai/design): от AI-мокапа до production-кода, handoff-bundle. Триггеры: «claude design», «перенеси мокап в код».

• design-guardrails

  QA-гейт дизайн-артефакта: Visual Diff PASS/FAIL против референса, редизайн без поломки логики. Триггеры: «повтори сайт в коде». Вкус ДО → design-taste.

• dev-handoff

  Handoff-пакет разработчику из готового HTML: токены, компоненты, README. Триггеры: «пакет для разраба», «передать разработчику», «хендофф».

• document-import

  Извлечь текст и картинки из PDF/DOCX/PPTX/скетча для прототипа или дека. Триггеры: «из PDF в слайды», «DOCX в лендинг». НЕ переверстать дек 1-в-1→pptx-import.

• export-pdf

  Печать HTML-макета или дека в PDF через headless Chrome (Playwright), слайд = страница. Триггеры: «html в pdf», «сохрани в pdf».

• export-png

  PNG-скриншоты слайдов/экранов через Playwright: кадр на слайд или по селектору. Триггеры: «html в png», «выгрузи слайды картинками», «социалки cover». НЕ тест UI→webapp-testing.

• export-pptx

  HTML-дек в PPTX: режим картинок (надёжный) или редактируемый (нативный текст, pptxgenjs). Триггеры: «html в pptx», «выгрузи в PowerPoint».

• github-import

  Импорт файлов GitHub-репо как контекст: токены, компоненты, стили. Триггеры: «сделай в стиле этого репо», «из репо токены», «воссоздай UI».

• i18n-stress-test

  Стресс-тест локализации перед сдачей макета: немецкий, арабский RTL, японский, emoji-переполнение. Триггеры: «длинные слова», «RTL тест».

• miro

  Доски Miro: MCP (чтение/саммари, layout-DSL, диаграммы, комменты) + REST v2 (коннекторы, теги — чего MCP не умеет). Триггеры: «миро», «что на доске».

• miro-code-explain-on-board

  Use when the user wants to explain or visualize a codebase on a Miro board — produces a minimal, notation-correct set of architecture / structure / behavior diagrams (flowchart, UML class, UML sequence, ERD) plus a short companion document, grounded in real repo artifacts.

• miro-code-review

  Use when the user wants to create a visual code review on a Miro board from a pull/merge request (GitHub, GitLab, or any forge), local uncommitted changes, or a branch comparison — produces a file-changes table, summary/architecture/security docs, and architecture diagrams, then links them back from

• miro-code-spec

  Use when the user wants to extract a Miro board's specs (documents, diagrams, prototypes, tables, frames, images) to local `.miro/specs/` files for AI-assisted planning and implementation — accepts a board URL or single-item URL.

• onboarding-ux

  Паттерны первого запуска: welcome, tour, empty-states. Триггеры: «первый запуск», «setup wizard», «TTV». НЕ активация Academy→onboarding-cro-ru.

• perf-audit

  Lighthouse в headless перед публикацией страницы: LCP, CLS, TBT, размер бандла, конкретные советы. Триггеры: «Core Web Vitals», «оптимизация перформанс».

• proto-smoketest

  Smoke-тесты прототипа: 5-10 критичных путей не отвалились, не unit. Триггеры: «playwright smoke», «happy path тест». НЕ разовая проверка файла→verifier.

• screenshot-test

  Pixel-diff скриншота с эталоном в репо — падает при визуальной поломке; CI/pre-commit. Триггеры: «pixel diff», «визуальный регресс». НЕ разовая проверка→verifier.

• verifier

  Готовый файл в headless перед сдачей: console-ошибки, скриншот, матрица проверок. Триггеры: «проверь артефакт», «screenshot verify». НЕ dev-сервер→webapp-testing; WCAG→a11y-audit.

• version-snapshots

  Копии одного файла в .snapshots/ + MANIFEST.md — откат правки без git. Триггеры: «сделай снапшот», «откати к baseline». НЕ откат упавшей фазы→rollback-changes.

Slash commands (1)

• /design-io:userflow

  Design user flow and wireframes

Subagents (3)

• accessibility-tester

  Use proactively for comprehensive web accessibility testing (WCAG 2.1 AA/AAA compliance, screen reader validation, keyboard navigation, ARIA labels, color contrast). Generates detailed accessibility audit reports with actionable remediation steps.

• mobile-fixes-implementer

  Use proactively to automatically implement mobile responsiveness fixes from test reports. Specialist for systematically applying CSS, JavaScript, and viewport optimizations to resolve mobile UX issues.

• mobile-responsiveness-tester

  Use proactively for comprehensive mobile responsiveness testing across multiple viewports, detecting layout issues, validating touch targets, and generating actionable fixes for mobile UX problems

Similar plugins