Borrowing it
Nothing to install: this file belongs to EnriqueLop/quartier. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/EnriqueLop/quartier/main/.claude/skills/business-web-design/SKILL.mdgit clone --depth 1 https://github.com/EnriqueLop/quartierWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/enriquelop/quartier/business-web-design)<a href="https://agentmods.dev/skills/enriquelop/quartier/business-web-design"><img src="https://agentmods.dev/badge/skills/enriquelop/quartier/business-web-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/enriquelop/quartier/business-web-design"><img src="https://agentmods.dev/badge/skills/enriquelop/quartier/business-web-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00137 | $0.02843 |
| Opus 5 | $0.00068 | $0.01422 |
| Sonnet 5 | $0.00027 | $0.00569 |
| Haiku 4.5 | $0.00014 | $0.00284 |
Grade A, and why
business-web-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 210 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Business Web Design
Build static business websites that feel commissioned, not generated. The site must be dynamic (motion with intent), specific (it could only belong to this business), and clean of AI tells (verified mechanically, not by vibes).
Why this skill exists
Left alone, generated pages converge on the statistical center of training data: centered hero with a pill badge and two buttons, three equal feature cards with thin-line icons in rounded boxes, Inter, a purple gradient, a uniform fade-in-up. That convergence IS the "AI look" — it is the most probable output, so producing it requires no decisions at all.
The fix is not "be creative". It is a pipeline that (1) forces decisions to be made before code, derived from the business's real world, and (2) verifies the output after code against a falsifiable banned list. Intent without verification regresses to the mean; verification without intent produces compliant-but-dead pages. You need both.
Read-this-first map
| When | Read |
|---|---|
| Always, before any code | references/banned.md — the AI-tells list with counter-moves |
| Picking the visual direction | references/directions.md — 8 directions with token-locked starting points |
| Writing sections with icons/photos/copy | references/copy-imagery-icons.md |
| Adding any animation | references/motion.md — doctrine + the triple-degradation rule |
| Forms, embeds, analytics, or before delivery | references/compliance-quality.md — cookies/RGPD, contrast, legibility, orthography |
| Appointment-based trade (fisio, dental, estética…) | references/booking-contact.md — the wa.me scheduler pattern |
Workflow
1. Explore the business's world — before any code
Defaults win when you skip straight to layout. Spend the first minutes in the business's physical world, and write the answers down (in conversation or working notes):
- Domain — 5+ concepts, materials, textures, objects from this trade's real world. A fisioterapia: skin tone, kinesio tape, foam, anatomical line drawings, appointment cards. A taller mecánico: brushed steel, oil-stain amber, tread patterns, stamped plates.
- Color world — 5+ colors that exist naturally in that world. If the business already has brand colors (logo, sign, current site), those win — deepen and refine them, never replace them. Never invent a palette a designer would have to justify to the owner.
- Signature — ONE element (visual, structural, or interactive) that could only exist for THIS business. A menu that reads like a chalkboard ticket. A price list typeset like a parts catalog. If you can't name one, keep exploring.
- Rejected defaults — name the 3 most obvious moves for this type of site (e.g. "fisio = soft blue + stock photo of hands + 3 service cards") so you can't sleepwalk into them.
What ships with it
8 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 210 lines · 137 tokens per session scan A a93d1588ffae
business-web-design is a skill published in the GitHub repository EnriqueLop/quartier (24 stars, last pushed 3mo ago), licensed MIT. It adds 137 tokens to every session and 2,843 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
ui-design-engineering
Design, implement, harden, and review production-grade user interfaces for web apps, dashboards, SaaS products, admin tools, forms, and responsive frontend components. Use when building or improving UI/UX, translating Figma or requirements into code, styling React/Vue/Svelte/HTML views, reviewing frontend quality…
glassmorphism
Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.
liquid-glass
Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.
frontend-design
Frontend design skill fused from Impeccable + custom extensions. Covers design philosophy, anti-AI-slop patterns, typography, color (OKLCH), spatial design, motion, interaction, responsive, UX writing, state management, engineering, and 4 style variants. Includes 20 command skills for audit/critique/polish/animate/etc.
adapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
extract
Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.