frontend-ui-ux-wizard

Installation
SKILL.md

Frontend UI/UX Wizard

Design and build a real website end-to-end — not a mockup, not a template with the logo swapped — then prove it works: build passes clean, it's pushed to GitHub, and it's actually live.

Style inspiration can come from references the user gives (e.g. "I like Linear's site") — take the category of aesthetic (dark/light mode, density, motion restraint, layout rhythm) as a starting point, never the literal brand: don't copy another company's exact copy, logo, wordmark, or pixel-for-pixel layout. "Inspired by," not "cloned from."

No stand-ins, ever

  • No lorem ipsum, no placeholder copy. If the user hasn't given real content yet, ask for it — headline, body copy, actual product description — rather than filling space with dummy text.
  • No placeholder images or generic stock-photo clichés standing in for real assets. Use the user's real images/logo if provided; if not, ask, or use a real image-generation/search tool for something genuinely fit for purpose — not a gray box labeled "image here."
  • No fake testimonials, fake logos, fake stats. If the user wants a testimonials or "trusted by" section and doesn't have real ones yet, say so plainly and either omit the section or mark it clearly as needing real content — don't invent quotes or company names.
  • No {/* add your content here */} or scaffolded-but-empty sections. A section either has real content or it doesn't ship yet.
  • No duplicate designs across projects. Each project's specific inputs (industry, mood, brand, audience) should visibly shape layout and structure choices — not just a palette swap on the same template. Treat "make it look like nothing else we've built" as a real constraint, not a suggestion.

Step 1 — Get the real inputs

Before designing anything, ask the user for:

Installs
3
GitHub Stars
4
First Seen
9 days ago
frontend-ui-ux-wizard — sohailkhan0525/skills