skills.rest
namanchopra
namanchopraCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design-ui-ux

Structure UI/UX design processes for Next.js and React applications.

5|Updated Jun 22, 2026
Search Tags:#user experience#component design#ui/ux design#design methodology#frontend design
One-click install
npx skills add https://github.com/namanchopra/branchwater --skill frontend-design-ui-ux-namanchopra
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-ui-ux
Source: https://github.com/namanchopra/branchwater/tree/main/.claude/skills/frontend-design-ui-ux
Command: npx skills add https://github.com/namanchopra/branchwater --skill frontend-design-ui-ux-namanchopra

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill unit tackles the complex task of frontend UI/UX design, offering a structured methodology and guidelines for creating effective user interfaces and experiences.

Core Features & Use Cases

  • Comprehensive Design Methodology: Provides a thorough process for discovery, information architecture, component design, interaction design, design tokens, and engineer handoff.
  • Design Artifacts Production: Generates specifications, component briefs, and design tokens suitable for handoff to engineering teams.
  • Target Users: Designers creating Next.js and React applications, focusing on UI/UX.

Quick Start

Use the frontend-design-ui-ux skill to start designing a new UI feature by invoking it and following the discovery phase guidelines.

Frequently Asked Questions about frontend-design-ui-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure my UI/UX design process for React applications?▼

A structured UI/UX design process for React applications involves user research, information architecture, component design, and interaction design to produce specifications suitable for engineering handoff.

What is the best way to create design tokens for Next.js component handoff?▼

Creating design tokens for Next.js handoff requires a comprehensive design methodology that generates component briefs and design tokens directly aligned with your interaction design specifications.

Can I use a structured design methodology for both discovery and engineer handoff?▼

A structured design methodology supports both discovery and engineer handoff by producing design artifacts like specifications, component briefs, and design tokens throughout the process.

How do I start designing a new UI feature using a comprehensive design methodology?▼

To start designing a new UI feature using a design methodology, you begin with the discovery phase to gather user research before moving into information architecture and component design.

Does this UI/UX design approach work for Next.js and React applications?▼

This UI/UX design approach is specifically intended for designers creating Next.js and React applications, ensuring the generated design artifacts match the frontend component architecture.

What artifacts do I need for successful frontend UI/UX engineer handoff?▼

Successful frontend UI/UX engineer handoff requires generated specifications, component briefs, and design tokens that translate interaction design into clear engineering guidelines.

Related Skills

Explore More Design & Creative Skills→
pingmepipingmepi

pm-stage-04-design-spec

Generate design specifications with traceability to PRD user stories.

Community
Advanced
ulpi-ioulpi-io
13

frontend-design-ui-ux

Translate UX concepts into design specs, tokens, and component briefs for Next.js and React handoff.

Official
Advanced
rfdiosuaorfdiosuao
30

figma-expert

Guide Figma design systems with auto-layout, variants, and developer handoff.

Community
Advanced
retrip-airetrip-ai
2

base-ui-design

Standardize React UI components with Base UI design guidelines.

Official
Basic