From lugui-ai
Standards for HTML/CSS/JS generated for pages.lugui.ai — semantic markup, basic accessibility, self-contained (no untrusted external deps), CSP-friendly, and no inline secrets. Use when writing or reviewing HTML pages to be published.
How this skill is triggered — by the user, by Claude, or both
Slash command
/lugui-ai:code-best-practicesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
These pages are **public, static, single-file HTML** served from
These pages are public, static, single-file HTML served from
pages.lugui.ai via CloudFront. Optimize for: loads anywhere, no broken
external dependencies, accessible, and safe to expose.
<style> and any JS in
<script>. Do NOT pull in external CDNs, fonts, analytics, or trackers.
They break offline, leak referrers, and create supply-chain risk. If a font
is essential, embed it or fall back to a system stack.fetch() internal Lugui
APIs from a public page; CORS and auth will fail and it exposes endpoints.<!doctype html> + <html lang="pt-BR"> (or the page's real language).<meta charset="utf-8"> and the responsive viewport meta.header, nav, main, section, article,
footer, h1–h6 in order (one h1 per page).<title> — the backend also uses it to derive a permanent slug.<img> has a meaningful alt (or alt="" if purely decorative).<a>/<button> and keyboard-focusable, with a
visible :focus-visible style.prefers-color-scheme and prefers-reduced-motion when adding motion.clamp() for fluid type.<script> block; avoid eval,
new Function, and inline event-handler attributes (onclick="...") so the
page survives a strict Content-Security-Policy. Attach handlers via
addEventListener.<title> and lang.alt; contrast is adequate; focus styles present.Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub lugui-co/lugui-ai-plugin --plugin lugui-ai