Design · Skill set · 15 skills
Frontend and UI design
Design systems, interaction and visual design, responsive layouts, iOS and Android patterns, React state, Next.js, Tailwind and accessibility audits.
Open in PhởSkills in this set
- Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA…
- Design System Patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching…
- Interaction Design
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or…
- Android Mobile Design
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's…
- iOS Mobile Design
Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow…
- React Native Design
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns…
- Responsive Design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces…
- Visual Design Foundations
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or…
- Web Component Design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries…
- Next.js App Router Patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or…
- React Native Architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native…
- React State Management
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state…
- Tailwind Design System (v4)
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design…
- Screen Reader Testing
Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring…
- WCAG Audit Patterns
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations…
Other design sets
Frequently asked questions
What is in the Frontend and UI design skill set?
15 skills: Accessibility Compliance, Design System Patterns, Interaction Design, Android Mobile Design, iOS Mobile Design, React Native Design, and 9 more.
Is the Frontend and UI design skill set free?
Yes. It is published by Seth Hobson under the MIT licence and works with a free Phở account.
How do I add Frontend and UI design to Phở?
Press Open in Phở and add the set once. From then on Phở picks the right skill from it whenever a request matches.
Copied unchanged from wshobson/agents at commit 7e2fb55 and credited to Seth Hobson, who is not affiliated with Phở. The full instructions and licence text ship with the skill inside Phở.