graffiti-best-practices
Graffiti Best Practices
Generate high-quality Graffiti markup using current library constraints.
Graffiti is the baseline design layer when this skill is active: it provides the default system for elements, layout primitives, utilities, components, and color/theme tokens.
This skill extends Graffiti patterns; it does not create a parallel styling system.
This skill is strict about class-first composition, minimal inline style usage, semantic HTML, and repeatable quality checks.
It is also strict about template-first adaptation: when a matching hosted template baseline exists, start from that template and customize it.
Quality bar: passing the markup contract is necessary but not sufficient. Output must also clear an aesthetic bar (voice, density, imagery, restraint). Markup that satisfies every contract check but ships with AI-shaped content (generic copy, decorative gradients, invented SVG icons, fake numbers, emoji-as-icons) still fails. See references/AESTHETIC_GUIDE.md.
Audience: developers using Graffiti in real applications and websites.