// This skill should be used when the user asks to "analyze a screenshot", "generate implementation spec", "create SPEC.md from screenshot", "extract design specs", "spec from image", or provides website screenshots and wants detailed implementation guidance.
| name | spec-from-screenshot |
| description | This skill should be used when the user asks to "analyze a screenshot", "generate implementation spec", "create SPEC.md from screenshot", "extract design specs", "spec from image", or provides website screenshots and wants detailed implementation guidance. |
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.
Ensure screenshots are available in the conversation. If no images are present, request them before proceeding.
Analyze all provided screenshots covering these aspects:
1. Layout Architecture
2. Typography System
3. Color Palette
4. Spacing System
5. Component Inventory
6. Visual Design Details
7. Images and Media
8. Interactive Elements (if discernible)
9. Responsive Design (if multiple viewports shown)
10. Accessibility Considerations
Write the specification to ./SPEC.md using this structure:
# Website Implementation Specification
> Generated from screenshot analysis on [DATE]
## Overview
[2-3 sentence summary of the website's purpose and design style]
## Layout Architecture
### Page Structure
### Grid System
## Typography
### Font Families
### Text Styles
## Color System
## Spacing System
## Component Inventory
[Document each component with properties]
## Images and Assets
## Responsive Behavior
## Interactive Elements and States
## Implementation Considerations
### Design Complexity Assessment
### Observable Technical Requirements
### Accessibility Observations
### Cannot Determine from Screenshots
## Open Questions / Assumptions
## Next Steps
After writing SPEC.md, provide a concise summary:
## Screenshot Analysis Complete
### Overview
[1-2 sentence description]
### Key Findings
- **Layout**: [brief description]
- **Components**: [count] distinct components identified
- **Color Palette**: [count] colors in system
- **Typography**: [primary font family], [count] type levels
- **Spacing**: [spacing scale summary]
- **Assets**: [count] images/icons to source
### Output
Full specification: `SPEC.md`
### Recommendations
[1-2 key technical recommendations]
Write bulloak tree specifications (.tree files) for smart contract integration tests. Trigger phrases - write a tree, create test tree, BTT spec, bulloak tree, Branching Tree Technique, or when writing integration tests for contract functions.
Deploy Sablier EVM contracts (Utils, Flow, Lockup, Airdrops, Bob) with full workflow automation. This skill should be used when the user asks to "deploy", "deploy protocol", "deploy to chain", or mentions deployment-related tasks. Handles contract deployment, explorer verification, SDK updates, and initial setup through Init scripts.
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.
Write Foundry-based tests and scripts. Trigger phrases - foundry testing, write test, fuzz test, fork test, invariant test, deploy script, gas benchmark, coverage, or when working in tests/ or scripts/ directories.
This skill should be used when writing content for Sablier, including "write a blog post", "create a case study", "draft a tweet", "write X/Twitter posts", "write an announcement", "create educational content", or any marketing content task for Sablier's brand.
This skill should be used when the user asks about "Tailwind CSS", "tailwind-variants", "tv() function", "CSS-first configuration", "Tailwind breaking changes", mentions styling with Tailwind utilities, gradient syntax, or component variants with TypeScript.