elegance

\n\n

A Claude skill for beautiful PHP + Bootstrap sites · 🌐 Live demo

\n\nA Claude skill for building good-looking PHP + Bootstrap websites, or turning a\nstatic HTML site into PHP. It sets up the theme and the shared layout, adds a\nmenu, search, and contact page, shrinks the images, and gets everything ready to\ndeploy. The point is that the site looks finished, not just that the PHP runs.\n\nPairs with [Cadence](https://github.com/wuisabel-gif/Cadence): when it is\ninstalled, elegance runs the site copy through Cadence so the writing does not\nread like AI. If it is not, elegance follows the same anti-slop rules by hand.\n\n## Why bother\n\nThe look of a site isn't decoration — it's the first thing a customer reacts to,\nand the numbers are blunt:\n\n- **50 milliseconds** — how long it takes someone to form a first impression of\n your site (Lindgaard et al., 2006).\n- **94%** of that first impression is design, not content (Sweor / ResearchGate).\n- **75%** of people judge a company's credibility on its website design alone\n (Stanford Web Credibility Project).\n- **38%** stop engaging with a site when the layout is unattractive (Adobe).\n- **88%** of visitors are less likely to return after one bad experience.\n- **53%** of mobile visitors leave if a page takes longer than 3 seconds to load\n (Google).\n\nMost small-business sites still look templated — a stock photo and a font nobody\npicked — and the numbers above are what that quietly costs them. Looking better\nused to take a designer, a developer, and a few weeks. It doesn't anymore. elegance\ngives you a site that looks considered, loads fast, runs on plain PHP you can host\nalmost anywhere, and stays easy to change. Look like you meant it — without the\nagency bill.\n\n_{Figures are widely-cited UX and web-credibility findings; treat them as directional.}\n\n## Why PHP instead of plain HTML\n\nWith plain HTML you copy the navbar, the ``, and the footer into every page.\nChange a phone number and you have to edit all of them. PHP lets you write those\nonce and pull them into each page with `require`. You can build a list of forty\nitems from a single array instead of forty copied blocks, and you can add things\nHTML can't do on its own, like a contact form that sends mail or a search box that\nactually filters. The hosting is just as simple either way.\n\n## Install\n\nWorks as a **Claude skill** and a **Gemini CLI extension** — same content, two entry\npoints (`SKILL.md` for Claude, `GEMINI.md` for Gemini).\n\n**Claude** — copy the folder into your skills directory:\n\n```bash\ncp -R elegance ~/.claude/skills/elegance\n```\n\nThe folder name becomes the skill's id; keep the file named `SKILL.md`. Restart\nClaude Code if it's already open.\n\n**Gemini CLI** — install it as an extension:\n\n```bash\ngemini extensions install https://github.com/wuisabel-gif/elegance\n```\n\n…or clone it into `~/.gemini/extensions/elegance`. Gemini reads `gemini-extension.json`\nand loads `GEMINI.md` as context.\n\n## How to use it\n\nAsk for what you want. For example:\n- \"Build me a PHP + Bootstrap site for a coffee shop called Emberhaus.\"\n- \"Use elegance to add a menu and a search page to my site.\"\n\nIt asks a few questions, copies the starter template into an `app/` folder, themes\nit, drops in your content, shrinks the images, checks that everything works, and\nsets up the deploy.\n\n## What's in here\n\n```\nSKILL.md the instructions Claude reads\nreferences/structure-and-conventions.md the full file map and code patterns\nscripts/optimize-images.sh PNG to JPEG, logo shrink, favicon (macOS sips)\nassets/template/ a working starter site to copy\n index.php menu.php gallery.php about.php search.php contact.php\n includes/{head,header,footer,menu-data}.php\n css/style.css\n Dockerfile\n```\n\n## Running a site locally\n\n```bash\ncd app\nphp -S localhost:8000\n```\n\n## Deploying\n\nThe Dockerfile uses `php:8.2-apache` and copies the `app/` folder. Push to GitHub,\nmake a Web Service on Render, Railway, or Fly, and it builds on its own. One catch:\n`mail()` won't send anything until you set up SMTP on the host.\n", "bytes": 4339, "sha": "d013d00ee160d5ba1cf5dc86a1476638e8bcbb75a9d47d7b29e13e835c7fd559", "repo_slug": "wuisabel-gif/elegance", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/plg_wuisabel_gif_elegance_594a9590/readme" }