presentational-ui-generation
Installation
SKILL.md
Presentational UI Generation
Purpose
Generate ONLY the presentation layer: stateless, prop-driven React components that render data passed in and raise typed callbacks. This is the primary build step for Presentational stories and the UI foundation for Transactional stories (logic is layered on later by other skills).
⚠️ This skill embeds the complete project responsive, RTL, accessibility, token and Tailwind rules. They are applied as a single unified lens simultaneously with every component — not as separate sequential passes. Skipping any step in the Unified Implementation Lens is a violation.
Scope Boundary (Critical)
Generate:
- Design-system atoms, molecules, organisms.
- Feature display components and view/layout components.
- Typed Props interfaces and typed callback signatures.
- Visual state shells (loading skeleton, empty, error display) driven by props — NOT by data fetching.
- Accessibility contract (roles, labels, keyboard handlers, focus order).
- Responsive + RTL implementation with full token mapping.
- Barrel exports.