epic-ui-guidelineslisted

# Epic Stack: UI Guidelines ## When to use this skill Use this skill when you need to: - Create accessible UI components - Follow Epic Stack design patterns - Use Tailwind CSS effectively - Implement semantic HTML - Add ARIA attributes correctly - Create responsive layouts - Ensure proper form accessibility - Follow Epic Stack's UI component conventions ## Patterns and conventions ### UI Philosophy Following Epic Web principles: **Software is built for people, by people** - Accessibility isn't about checking boxes or meeting standards. It's about creating software that works for real people with diverse needs, abilities, and contexts. Every UI decision should prioritize the human experience over technical convenience. Accessibility is not optional - it's how we ensure our software serves all users, not just some. When you make UI accessible, you're making it better for everyone: clearer labels help all users, keyboard navigation helps power users, and semantic HTML helps search engines. **Example - Human-centered approach:** ```typescript // ✅ Good - Built for people function NoteForm() { return ( <Form method="POST"> <Field labelProps={{ htmlFor: fields.title.id, children: 'Note Title', // Clear, human-readable label }} inputProps={{ ...getInputProps(fields.title), placeholder: 'Enter a descriptive title', // Helpful guidance autoFocus: true, // Saves time for users }} errors={fields.title.errors} // Clear error me