skills.rest
myoshi2891
myoshi2891COMMUNITY
Explore all skills by this author →
GitHub

ec-frontend-expert

Develop e-commerce front-ends with Next.js 14, Tailwind CSS, and Zustand.

1|Updated Apr 28, 2025
Search Tags:#ui#frontend#next.js#tailwind#zustand#ecommerce
One-click install
npx skills add https://github.com/myoshi2891/Multi-Vendor-E-Commerce --skill ec-frontend-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ec-frontend-expert
Source: https://github.com/myoshi2891/Multi-Vendor-E-Commerce/tree/main/.agent/skills/ec-frontend-expert
Command: npx skills add https://github.com/myoshi2891/Multi-Vendor-E-Commerce --skill ec-frontend-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the development and modification of the e-commerce platform's user interface, ensuring a consistent and high-quality user experience.

Core Features & Use Cases

  • UI Development: Create new user interface components and features using Next.js, Tailwind CSS, and Radix UI.
  • State Management: Implement and manage global state, particularly for the shopping cart, using Zustand with local storage persistence.
  • Form Handling: Develop and validate forms using react-hook-form and zod.
  • Use Case: When a request comes to add a new product filtering option to the main shop page, this Skill will be used to design the UI, implement the filtering logic, and ensure it integrates seamlessly with the existing state management.

Quick Start

Use the ec-frontend-expert skill to create a new product card component for the main shop page.

Frequently Asked Questions about ec-frontend-expert

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

FAQPage Schema
How do I build an e-commerce UI with Next.js 14 App Router and Tailwind CSS?▼

You can build e-commerce UIs using Next.js 14 App Router, Tailwind CSS, and Radix UI. This approach streamlines component creation and ensures a consistent, high-quality user experience across the platform.

How do I persist a shopping cart state to localStorage using Zustand?▼

To persist shopping cart state to localStorage using Zustand, you implement global state management with local storage persistence. This ensures cart data remains available across user sessions in the e-commerce platform.

What is the best way to validate forms in a Next.js e-commerce application?▼

Validating forms in a Next.js e-commerce application is best handled using react-hook-form combined with zod. This approach manages form state and enforces schema validation for reliable data submission.

Can I use Radix UI components with Tailwind CSS for a multi-vendor marketplace?▼

Yes, you can use Radix UI components with Tailwind CSS for a multi-vendor marketplace. This combination allows you to build and refine accessible, customizable user interface components seamlessly.

How do I add product filtering to a shop page using Next.js and Zustand?▼

Adding product filtering to a shop page using Next.js and Zustand involves designing the UI and implementing filtering logic that integrates with existing state management. This ensures dynamic updates across the interface.

Related Skills

Explore More Software Engineering Skills→
bear2ubear2u
905

nextjs15-init

Automate Next.js 15 App Router project initialization with a modern stack.

Community
Intermediate
dt418dt418

E-commerce Pack

Implement e-commerce features including product catalogs, shopping carts, checkout, and Stripe payments.

Community
Advanced
myoshi2891myoshi2891
1

ec-backend-expert

Develop backend systems for multi-vendor e-commerce with Prisma and Clerk.

Community
Advanced
kyamsSRLkyamsSRL

react-state-management

Manage React state across local, global, and server data.

Community
Intermediate