Ui From Mockup
Create a React component based on a provided mockup or screenshot.
# Implement UI from Mockup
Create a React component based on a provided mockup or screenshot.
Usage: /project:ui-from-mockup <component_name>
Process:
1. Analyze the provided mockup/screenshot for $ARGUMENTS
2. Identify UI patterns already in use in the codebase
3. Plan component structure and props interface
4. Create the component following existing patterns
5. Implement responsive design
6. Add proper TypeScript types
7. Take a screenshot of the implementation
8. Compare with original mockup
9. Iterate until matching (max 3 iterations)
10. Write unit tests for the component
11. Update component documentation
Requirements:
- Use existing Material-UI components
- Follow project's styling patterns
- Ensure accessibility (ARIA labels, keyboard navigation)
- Mobile-first responsive design
Maintain Ui From Mockup?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[Ui From Mockup on getagentictools](https://getagentictools.com/loops/belumume-implement-ui-from-mockup?ref=badge) Related loops
Ultra Ultra work-until-done — bounded Team RAM execution until validation passes
Update Results Find the next unplayed group match and ask the user for the score, then write it to src/tournament-results.ts. Repeat until the u…
Verify Claims Verify every clinical claim in an article body against primary sources. Blocks publish until all claims are verified.
Video You are managing the full lifecycle of a video project inside the video-toolkit plugin. Follow every step below precisely.
Triage Turn a batch of findings, requests, and issue-tracker items into grounded change-request bundles — self-contained work packages t…
Tv Pine Generate Generate a Pine Script indicator from my natural language description. Read skills/pine-generator/SKILL.md for the full workflow.…