Menu
UI/UX screen design (Apple HIG) + design-to-code translation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Comprehensive code review with security, patterns, and quality focus
Parallel execution using multiple Claude instances in Kitty terminal
Agile/Waterfall project planning, tracking, and delivery management
McKinsey-level strategic analysis with MECE frameworks and quantitative prioritization
Update project documentation (ADRs, CHANGELOG, running notes) in compact Claude-friendly format
Audit and harden any repository with standardized quality gates, hooks, and scripts
| name | ui-design |
| description | UI/UX screen design (Apple HIG) + design-to-code translation |
| allowed-tools | ["Read","Glob","Grep","WebSearch","Write","Edit"] |
| context | fork |
| user-invocable | true |
| version | 1.0.0 |
Workflow from jony-creative-director: UI Design (Apple HIG) + Design-to-Code
| Parameter | Required | Description |
|---|---|---|
| Platform | Yes | iOS / macOS / web |
| App type | Yes | e.g., fintech dashboard, social app, e-commerce |
| Primary user persona | Yes | Demographics, goals, context |
| Top 3 user goals | Yes | Priority tasks |
| Current pain points | Yes | Problems to solve |
| Tech stack (for code) | If code | React / Vue / Svelte / Next.js / Tailwind / etc. |
| Pattern | Specification |
|---|---|
| Navigation | Tab bar / Sidebar / Navigation stack |
| Modals | Presentation guidelines |
| Gestures | Swipe, pinch, pull-to-refresh definitions |
| Context menus | Action sheets, context menus |
| # | Screen | Purpose |
|---|---|---|
| 1 | Onboarding/Welcome | First-run experience |
| 2 | Home/Dashboard | Primary landing |
| 3 | Primary task | Core user action |
| 4 | Detail view | Content deep-dive |
| 5 | Settings/Profile | User preferences |
| 6 | Search/Filter | Content discovery |
| 7 | Checkout/Completion | Action flow end |
| 8 | Error/Empty state | Edge cases |
| Aspect | Detail |
|---|---|
| Wireframe | Layout structure description |
| Components | Every element inventory |
| Interactions | Tap, swipe, long-press behaviors |
| Empty state | What shows with no data |
| Error state | Failure handling UI |
| Loading | Skeleton screens, indicators |
| Requirement | Standard |
|---|---|
| Dynamic Type | Font scaling to 310% |
| VoiceOver | Labels + hints for every interactive element |
| Color contrast | WCAG AA: 4.5:1 text, 3:1 UI components |
| Reduce Motion | Alternatives for all animations |
| Focus indicators | Visible keyboard navigation |
| Aspect | Specification |
|---|---|
| Transitions | Duration, easing curves (ease-in-out, spring) |
| Haptics | Feedback mapping per interaction type |
| Sound | Design guidelines (optional) |
Breakpoint adaptations (mobile → tablet → desktop), orientation handling, foldable device considerations.
Per component: complete copy-paste ready code, responsive (mobile-first), ARIA attributes, error boundaries, loading states, animations.
| Aspect | Specification |
|---|---|
| CSS/Tailwind | Classes mapped to design tokens |
| CSS variables | Theming support |
| Dark mode | Implementation strategy |
| Breakpoints | Responsive rules |
| States | hover / focus / active implementations |
Map tokens to CSS variables: colors, typography (sizes, weights, line heights), spacing (padding, margin, gap), shadows, border-radius.
| Type | Scope |
|---|---|
| Unit | React Testing Library, per component |
| Visual regression | Snapshot comparison scenarios |
| Accessibility | axe-core integration |
| Responsive | Breakpoint test cases |
JSDoc for all props, 3 usage examples per component, Do's and Don'ts.
Include "Designer's Intent" comments explaining why code decisions preserve design vision.
| Deliverable | Format |
|---|---|
| Screen designs | 8 detailed screen specs |
| Component specs | Hierarchy + interaction definitions |
| Accessibility | Full compliance checklist |
| Production code | Copy-paste components + styles |
| Design tokens | CSS variables / JSON |
| Test suite | Unit + visual + a11y tests |
/design-systems (token foundation) | /design-quality (critique + a11y audit) | /brand-identity (visual language)
