Fullstack UX Designer

generic-fullstack-ux-designer

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 pro...

majiayu000/claude-skill-registry·0installs663starsDesign

SKILL.md

Full skill instructions

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>;
}

API Loading & Error States

Loading State Hierarchy

Duration	Pattern	Example
< 100ms	No indicator	Button click
100ms - 1s	Subtle spinner	Form submit
1s - 5s	Skeleton screen	Page fetch
> 5s	Progress bar	File upload

Error State Design

API Error → Parse Error → User-Friendly Message → Recovery Action

Error Type	User Message	Recovery
400 Validation	Show field errors	Fix and retry
401 Unauthorized	"Please log in"	Redirect to login
404 Not Found	"Item not found"	Navigate back
500 Server Error	"Something went wrong"	Retry button

Optimistic UI Pattern

// 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)}
/>

Authentication UX

Login Flow Patterns

State	UX
Loading auth	Full-page skeleton
Not logged in	Show login form
Logging in	Disable form, show spinner
Success	Redirect with toast
Error	Inline error, keep form data

Protected Route Pattern

// Redirect unauthenticated users
if (!user && !loading) {
  return <Navigate to="/login" state={{ from: location }} />;
}

Real-Time Updates

Pattern	Use Case
Polling	Low-frequency updates (notifications)
WebSocket	Chat, live collaboration
SSE	One-way server updates

Presence Indicators

Online status dots
"User is typing..." indicators
Collaborative cursors

Full-Stack Design Critique

Aspect	Questions
Loading states	What shows during API calls?
Error recovery	Can users recover from errors?
Offline behavior	What happens without network?
Auth transitions	Smooth login/logout experience?
Data freshness	Is stale data clearly indicated?

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/majiayu000/claude-skill-registry --skill generic-fullstack-ux-designer

View on GitHub

skills/data/generic-fullstack-ux-designer/SKILL.md

More Design skills

View all

Design

gpt-taste

gpt taste

92.7K 355.7K

View

Design

brandkit

Premium brand-kit image generation for high-end identity systems, logo concepts, and visual-world presentations.

92.7K 345.8K

View

Design

image-to-code

Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.

92.7K 341.7K

View

Design

imagegen-frontend-web

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K

View

Design

imagegen-frontend-mobile

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K

View

Design

Emil Design Engineering

Emil Kowalski's philosophy on UI polish, component design, and the invisible details that make software feel good.

43.5K 323.4K

View

Design

impeccable

Frontend design and iteration for production-grade interfaces, from concept to ship.

76.8K 313.3K

View

Design

extract-design-system

Reverse-engineer design tokens from public websites into starter token files for your project.

232 129.9K

View

Design

Animate

Builds an animation from scratch by making the decisions in the order that determines whether it feels right.

43.5K 117.9K

View

Design

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

179.7K 114.2K

View

Design

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K

View

Design

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

179.7K 89.5K

View