front-end developer

Build scalable Vue 3 and Nuxt 3 frontends with component libraries and state management.

3|Updated Mar 2, 2023
One-click install
npx skills add https://github.com/nightrunner91/listify --skill front-end-developer-nightrunner91
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: front-end developer
Source: https://github.com/nightrunner91/listify/tree/main/.agents/skills/frontend%20developer
Command: npx skills add https://github.com/nightrunner91/listify --skill front-end-developer-nightrunner91

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building scalable Vue 3/Nuxt 3 frontends requires solid architecture, reusable components, robust state management, and accessible, responsive UI patterns.

Core Features & Use Cases

  • Vue 3 components & composition API: Create reusable components with proper props, emits, and lifecycle patterns.
  • Nuxt 3 hybrid rendering: Design for SPA, SSR, and SSG with efficient data fetching and routing strategies.
  • State management & data fetching: Implement client- and server-state strategies (Pinia, useAsyncData, useFetch) with hydration and caching.
  • Accessibility & responsive design: Build accessible components and responsive layouts across devices.

Quick Start

Initialize a new Vue 3 and Nuxt 3 project and scaffold a responsive component library to get started.

Frequently Asked Questions about front-end developer

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

FAQPage Schema
How do I build scalable Vue 3 frontends with proper state management?

To build scalable Vue 3 frontends, implement Pinia for client-state and useFetch or useAsyncData for server-state, ensuring proper hydration and caching across your components using the Composition API.

What is the best way to handle hybrid rendering in Nuxt 3 applications?

The best way to handle Nuxt 3 hybrid rendering is designing for SPA, SSR, and SSG simultaneously by applying efficient data fetching and routing strategies tailored to each page's specific requirements.

How do I create reusable Vue 3 components using the Composition API?

Create reusable Vue 3 components using the Composition API by defining proper props, emits, and lifecycle patterns to ensure maintainable and accessible interfaces across your application.

Does this approach support building accessible and responsive UI components?

Yes, this approach supports building accessible and responsive UI components by applying accessibility best practices and responsive layout patterns across devices within your Vue 3 and Nuxt 3 projects.

Can I use Pinia for state management in a Nuxt 3 SSR application?

Yes, you can use Pinia for state management in a Nuxt 3 SSR application by implementing client- and server-state strategies that handle data hydration and caching effectively during server-side rendering.

How do I scaffold a responsive component library in Vue 3 and Nuxt 3?

To scaffold a responsive component library in Vue 3 and Nuxt 3, initialize a new project and structure your reusable components with proper props, emits, and accessible layout patterns.