graffiti-best-practices

Build accessible UI components by mapping prompts to canonical Graffiti primitives, ensuring correct semantics, responsive behavior, and token-based styling. This approach guarantees intent fidelity and promotes component reuse across your application.

Graffiti UI patterns for forms and content sections use neutral wrappers and canonical components like header, nav, and main. This structure ensures accessible semantics and responsive behavior without introducing new styling systems.

You can use inline styles with Graffiti templates only for approved token overrides. Restricting inline styles prevents style debt and avoids duplicating built-in styling systems, keeping your UI shells and forms maintainable.

Graffiti markup fails accessibility checks when it deviates from canonical component primitives or introduces unauthorized inline styles. Applying system-first mappings to hosted templates ensures correct structure, accessible semantics, and reduces styling inconsistencies.

Graffiti supports token-based styling for responsive UI shells by applying canonical component mappings. This ensures your layout adapts correctly across devices while maintaining accessibility and avoiding inline style debt.

The best way to map prompts to canonical Graffiti components is using the component-intent matrix. This process matches your desired UI structure to hosted template baselines, ensuring semantic accuracy and maximizing component reuse.