graffiti-best-practices

Map prompts to canonical Graffiti components for UI shells, forms, and content sections.

63|2|Updated Mar 23, 2026

Search Tags:#templates #consistency #accessibility #components #ui-patterns #markup #graffiti

Ready to run

npx skills add https://github.com/stolinski/s-stack --skill graffiti-best-practices

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: graffiti-best-practices
Source: https://github.com/stolinski/s-stack/tree/main/skills/graffiti-best-practices
Command: npx skills add https://github.com/stolinski/s-stack --skill graffiti-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Graffiti Best Practices guide teams to generate markup that adheres to the canonical Graffiti component primitives, promotes accessibility, and reduces inline style debt.

Core Features & Use Cases

System-first mappings to canonical components from the Graffiti docs and templates.
Guidance for layout, tokens, and safety checks to avoid duplicating built-ins or introducing new styling systems.
Real-world usage: generate UI shells, forms, and content sections with correct structure and semantics.

Quick Start

Craft a minimal Graffiti-native section using neutral wrappers and canonical components (e.g., header + nav + main) and avoid inline styles except for approved token overrides.

Frequently Asked Questions about graffiti-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build accessible UI components with consistent Graffiti markup?▼

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.

What are Graffiti UI patterns for structuring forms and content sections?▼

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.

Can I use inline styles when applying Graffiti templates and components?▼

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.

Why does my Graffiti component markup fail accessibility and consistency checks?▼

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.

Does Graffiti support token-based styling for responsive UI shells?▼

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.

What's the best way to map prompts to canonical Graffiti components?▼

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.