Agent skill
lovable-app-creator
Generates clickable Lovable.dev build URLs when users ask to build, create, or make any app, website, landing page, dashboard, or store.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/lovable-app-creator
Metadata
Additional technical details for this skill
- openclaw
-
{ "emoji": "\ud83d\udc9c" }
SKILL.md
Lovable App Creator
When a user asks to build any app, website, or page:
Step 1: Compose a prompt
Write an app description (200-500 chars). Include app name, theme, colors, pages, features, and "Use shadcn/ui, Tailwind CSS, Framer Motion. Mobile-first responsive."
Step 2: Build the redirect URL
Use the redirect server running on port 3456. Build this URL with your prompt as plain text (NO URL encoding needed — the server handles it):
http://localhost:3456/build?prompt=YOUR PROMPT TEXT HERE
Step 3: Reply with the URL
🚀 Your app is ready to build!
📋 App: [Name] — [Type]
🎨 Style: [Theme]
👉 Click to create: http://localhost:3456/build?prompt=[YOUR PLAIN TEXT PROMPT]
🔗 Auto-builds on Lovable.dev. You need a Lovable account.
Example
User: "Build me a portfolio for a photographer, dark theme"
Reply:
🚀 Your portfolio is ready to build!
📋 App: NoirFrame — Photographer Portfolio
🎨 Style: Dark minimal, gold accents
👉 Click to create:
http://localhost:3456/build?prompt=Build a dark minimal photographer portfolio called NoirFrame with hero section, photo gallery grid with lightbox, about page, and contact form. Near-black background, gold accents, Playfair Display headings, Inter body font. Use shadcn/ui, Tailwind CSS, Framer Motion. Mobile-first responsive.
🔗 Auto-builds on Lovable.dev. You need a Lovable account.
Rules
- ALWAYS include the redirect URL in your reply
- NEVER tell user to copy/paste
- NEVER write code files
- Keep prompts under 500 characters
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?