mirror of
https://github.com/magnus919/agent-skills.git
synced 2026-09-14 21:16:36 +03:00
Magnus HedemarkandGitHub
c7c4d3b74f
Engineering: backend-engineering, frontend-engineering, data-engineering, ml-engineering, platform-engineering, qa-methodology Executive: go-to-market, legal-strategy, operational-design, org-design, product-strategy ml-engineering: added missing training-infrastructure.md reference qa-methodology: added test-data-management, performance-testing, security-testing references All frontmatter converted to agent-skills convention. Source: https://github.com/magnus919/hermes-profiles
1.8 KiB
1.8 KiB
Component Architecture
Composition Patterns
| Pattern | When to use | Example |
|---|---|---|
| Atomic design | Design systems with clear hierarchy | Button → FormField → AddressForm → CheckoutPage |
| Compound components | Related components that share implicit state | Select.Trigger, Select.Options, Select.Option |
| Render props | Maximum flexibility in component behavior | Data provider that delegates rendering to consumer |
| Controlled vs uncontrolled | Form inputs, external state management | Controlled: state lives in parent. Uncontrolled: state lives in component |
| Higher-order components | Cross-cutting concerns (auth, logging) | withAuth(Component), withAnalytics(Component) |
Props and State Interface Design
| Aspect | Guideline |
|---|---|
| Props should be minimal | Pass only what the component needs. Avoid prop drilling with context. |
| Defaults for optional props | Every optional prop has a sensible default. |
| Boolean props are named as questions | isLoading, hasError, isDisabled, canSubmit |
| Callback props describe the event | onClick, onSubmit, onChange, onClose |
| Avoid overloaded props | A prop should do one thing. `variant="primary |
Accessibility Fundamentals
Every component must support:
- Keyboard navigation — All interactive elements reachable and operable via keyboard (Tab, Enter, Escape, Arrow keys)
- Focus management — Visible focus indicators, logical tab order, focus trapping in modals
- Screen reader support — ARIA labels, roles, live regions, landmarks
- Color contrast — Text meets WCAG AA (4.5:1 for normal text, 3:1 for large text)
- Reduced motion — Respect
prefers-reduced-motionfor animations and transitions