spec-from-screenshot
Screenshot Analysis & Spec Generation
Analyze website screenshots and generate detailed implementation specifications. This skill guides creation of
comprehensive SPEC.md files that document design systems extracted from visual references.
When to Use
- User provides website screenshots or design mockups
- Request for implementation specifications from visual references
- Need to extract design systems (colors, typography, spacing) from images
- Creating detailed component inventories from UI screenshots
Workflow
Step 1: Validate Prerequisites
Ensure screenshots are available in the conversation. If no images are present, request them before proceeding.
Step 2: Perform Ultra-Detailed Analysis
More from sablier-labs/agent-skills
effect-ts
This skill should be used when the user asks about Effect-TS patterns, services, layers, error handling, service composition, or writing/refactoring code that imports from 'effect'. Also covers Effect + Next.js integration with @prb/effect-next.
53vitest
This skill should be used when the user asks to "write tests", "add tests", "test coverage", "run tests", "debug failing tests", "mock functions", or mentions Vitest, unit tests, component tests, test-driven development, or testing utilities. Provides comprehensive Vitest v4 guidance for TypeScript React/Next.js projects.
40etherscan-api
This skill should be used when the user asks to "check ETH balance", "query ERC-20 balance", "get wallet balance", "check token holdings", "query Etherscan", or mentions Etherscan API, blockchain balance queries, or multi-chain balance lookups.
38coingecko-api
This skill should be used when the user asks for crypto prices, market data, market cap, trending coins, historical or OHLC data, token lookup by contract address, coin search, token logos, global crypto stats, or mentions CoinGecko API.
30xstate-react
This skill should be used when the user asks to "create a state machine", "add xState", "use xState with React", "implement actor-based state", "manage complex state with state machines", "use xState with Effect", "integrate Effect-ts with xState", mentions xState hooks (useMachine, useActor, useSelector), or discusses finite state machines in React applications.
28sablier-icon
This skill should be used when the user asks to "recolor the Sablier icon", "Sablier icon in orange", "Sablier logo in primary color", "generate Sablier hourglass variant", "change Sablier icon color", "export Sablier icon as PNG", or "generate Sablier favicon". Generates a gradient or flat Sablier icon SVG in any color using brand palette names, hex values, or CSS color names, with optional PNG/JPG/ICO raster export.
17