Skip to main content
The lovable skill translates a Lovable preview into working code within your application. It implements complete features—frontend, backend, API routes, database—connected to real data, not mocks.

​
Command

/lovable [preview-url] [github-url] [additional-details]
ArgumentRequiredDescription
preview-urlYesThe Lovable preview URL
github-urlNoGitHub repo with Lovable source code
additional-detailsNoExtra requirements or context

​
How it works

​
Discovery phase (first run)

  1. Clones Lovable source (if GitHub URL provided)
  2. Explores the prototype via browser automation
  3. Screenshots every route, state, and interaction
  4. Creates a feature inventory
  5. Populates initial TODO with gaps

​
The loop (subsequent runs)

1. Read TODO.md
2. If empty → Run E2E verification to find more gaps
3. Screenshot current implementation, compare to reference
4. Add any new gaps discovered
5. Re-evaluate priorities
6. Pick highest-priority gap
7. Fix it (must edit files)
8. Verify the fix works
9. Remove fixed item from TODO
10. Repeat

​
Priority order

When multiple gaps exist, they’re fixed in this order:
  1. TypeScript errors — code must compile
  2. Mock data — wire real APIs before visual polish
  3. Missing features — implement all inventory items
  4. Missing states — empty, loading, error
  5. Broken interactions — buttons, forms, navigation
  6. Layout/spacing — structural issues
  7. Visual refinement — fine-tuning

​
TODO format

# TODO

- [TypeScript] Component missing required prop
- [Wiring] User list uses mock data
- [Feature] Delete button not implemented
- [States] No loading state on save
- [Interactions] Modal doesn't close on backdrop click
- [Layout] Card spacing inconsistent
- [Visual] Button hover state missing

​
Design system rule

The agent translates UX patterns, not CSS. It uses your app’s design system exclusively (<Button>, .card, var(--ui-*)) rather than copying Lovable’s styles.

​
Example

/lovable https://preview.lovable.dev/abc123 https://github.com/org/lovable-proto "Integrate with our existing user management"
Agent:
  1. Clones the Lovable repo
  2. Opens the preview in the browser
  3. Screenshots every page and interaction
  4. Creates feature inventory
  5. Identifies where this fits in your app
  6. Starts implementing, fixing gaps one by one
  7. Reports progress after each iteration

​
Tips

  • Provide the GitHub URL if available for better source analysis
  • The agent will ask questions if requirements are unclear
  • Review TODO.md to see what gaps remain