Community / AGENT SKILL

screenshot-analyze

0 installs 2 GitHub stars

Read-only разбор скриншота — layout, компоненты, токены, состояния → план воплощения, без генерации кода (роль screenshot). Use when нужен план/разбор ПЕРЕД кодом; готовый код → $screenshot-convert, только токены → $screenshot-tokens.

One new superpower.

Run this command in your project to choose an agent and install the skill.

npx skillycli add https://github.com/Vitammiin/agent-vorcl-flow --skill screenshot-analyzeView original source

BEFORE YOU INSTALL

Understand the trade-offs.

SECURITY REVIEW

Not yet assessed

Review the original instructions and requested permissions before installing.

No security review is available for this catalog entry yet.

SKILL QUALITY

Not yet assessed

How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.

No quality assessment is available for this catalog entry yet.

The full skill.

Original instructions from the publisher’s SKILL.md

# Задача: разбор скриншота (screenshot)

Проведи **read-only** разбор скриншота, код не пиши (см. `$screenshot-to-code`).

Открой изображение и опиши структурировано:
- **Layout:** grid/flex/позиционирование, колонки, gaps, выравнивание, max-width, mobile- vs desktop-подсказки.
- **Компоненты:** перечисли (навбар, кнопки, инпуты, карточки, модалки, табы…), отметь повторяющиеся кандидаты в переиспользуемые.
- **Токены:** цвета (hex → OKLCH-токены `@theme`), типографика, шкала spacing, радиусы, тени, градиенты.
- **Состояния:** hover/focus/active/disabled, empty/loading/error.

Выдай **план воплощения**: иерархию компонентов, рекомендуемый фреймворк (по умолчанию React + Tailwind v4), что уточнить. Реализация — через `$screenshot-convert`. Опирайся на `$screenshot-to-code`, `$tailwind`, `$react`, `$frontend-architecture`.