Professional UI/UX design expertise for full-stack applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design reviews.
⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026⬇️3downloads
The Fullstack UX Designer skill bridges the gap between technical implementation and professional user experience design. It provides expert guidance on UI/UX principles, user psychology (such as Hick's and Fitts's Laws), and visual hierarchy, specifically tailored for modern full-stack frameworks like Next.js and NestJS. By integrating performance-driven design patterns like SSR-safe hydration, optimistic UI updates, and graceful error recovery, this skill ensures that applications are not only aesthetically pleasing but also highly functional, accessible, and user-centric.
Use Cases
Optimizing Full-Stack Performance: Designing hydration-safe skeleton screens and server-side rendering (SSR) patterns to improve perceived load times and Core Web Vitals.
Implementing Optimistic UI: Creating seamless interaction patterns for real-time actions like 'likes' or 'comments' to provide instant feedback while handling background API synchronization.
Advanced Error & Loading State Design: Developing comprehensive loading hierarchies and user-friendly error recovery flows for complex API interactions and form submissions.
UX Auditing & Design Critique: Conducting professional reviews of existing interfaces to identify friction points and apply user psychology laws for better usability and conversion.
Accessibility & Interaction Standards: Ensuring full-stack applications meet accessibility requirements and follow consistent interaction patterns across different devices and states.
name
generic-fullstack-ux-designer
description
Professional UI/UX design expertise for full-stack applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design reviews.
Fullstack UX Designer
Professional UX expertise for Next.js/NestJS full-stack applications.
Extends:Generic UX Designer - Read base skill for design thinking process, research methods, interaction patterns, and critique framework.
Full-Stack UX Considerations
Server-Side Rendering UX
Scenario
UX Pattern
Initial page load
Hydration-safe skeleton screens
Data fetching
Server components for static, client for dynamic
Authentication
Protected routes with redirect UX
Form submission
Progressive enhancement
Hydration-Safe Patterns
// ✓ Avoid hydration mismatch
function Timestamp({ date }: { date: Date }) {
const [formatted, setFormatted] = useState("");
useEffect(() => {
setFormatted(date.toLocaleString()); // Client-side only
}, [date]);
return <span>{formatted || "Loading..."}</span>;
}
// Show immediate feedback, rollback on error
async function toggleLike(postId: string) {
// 1. Update UI immediately
setLiked(true);
setLikeCount((c) => c + 1);
try {
// 2. Call API
await api.like(postId);
} catch {
// 3. Rollback on failure
setLiked(false);
setLikeCount((c) => c - 1);
showToast("Failed to like");
}
}
When to Use Optimistic UI
Action
Optimistic?
Why
Like/favorite
Yes
Low risk, common action
Add comment
Yes
Can show pending state
Delete item
No
Destructive, needs confirm
Payment
No
Critical, must verify
Form submit
Maybe
Depends on complexity
Form Submission UX
Client → Server Flow
User Input → Client Validation → Submit → Server Validation → Response
↓ ↓ ↓ ↓ ↓
Feedback Inline errors Loading... Field errors Success/Error
Multi-Step Forms
// Show progress and allow back navigation
<FormStepper
steps={["Details", "Payment", "Confirm"]}
currentStep={step}
onBack={() => setStep((s) => s - 1)}
/>
