skills.rest
distribucionesfayosmoreno-sys
distribucionesfayosmoreno-sysCOMMUNITY
Explore all skills by this author →
GitHub

frontend-developer

Guide React 19 and Next.js 15 development with TypeScript and modern frontend tools.

Updated Mar 19, 2026
Search Tags:#React Query#accessibility#web development#state management#React#Next.js#performance optimization
One-click install
npx skills add https://github.com/distribucionesfayosmoreno-sys/programa_aluon --skill frontend-developer-distribucionesfayosmoreno-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/distribucionesfayosmoreno-sys/programa_aluon/tree/main/.agents/skills/frontend-developer
Command: npx skills add https://github.com/distribucionesfayosmoreno-sys/programa_aluon --skill frontend-developer-distribucionesfayosmoreno-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill unit provides expert guidance on building React components, implementing responsive layouts, and managing client-side state, specifically focusing on React 19, Next.js 15, and modern frontend architecture.

Core Features & Use Cases

  • React Expertise: In-depth knowledge of React 19 features, concurrent rendering, advanced hooks, and performance optimization.
  • Next.js Integration: Proficiency in Next.js 15, Server Components, Edge runtime, and API routes.
  • Modern Frontend Architecture: Micro-frontends, design systems, build optimization, and PWA implementation.
  • State Management & Data Fetching: Advanced state management with Zustand, React Query, and SWR.
  • Styling & Design Systems: Tailwind CSS, CSS-in-JS, and responsive design techniques.
  • Performance & Optimization: Core Web Vitals, code splitting, image optimization, and memory leak prevention.
  • Testing & Quality Assurance: React Testing Library, Jest, end-to-end testing, and accessibility testing.
  • Accessibility & Inclusive Design: WCAG compliance, ARIA patterns, and accessible form patterns.
  • Developer Experience & Tooling: Modern development workflows, ESLint, Prettier, and Storybook.
  • Third-Party Integrations: Authentication, payment processing, analytics, CMS, database, email services, and CDN integration.
  • Behavioral Traits: Prioritizes user experience, maintainable code, error handling, TypeScript, and best practices.
  • Knowledge Base: React 19+, Next.js 15+, TypeScript 5.x, modern CSS, web performance, accessibility, build tools, PWA, SEO, and browser APIs.
  • Response Approach: Analyze requirements, suggest solutions, provide code, include accessibility and SEO, implement error boundaries, optimize for Core Web Vitals, and include documentation.
  • Example Interactions: Building server components, creating forms with Server Actions, implementing design systems, optimizing components, setting up Next.js middleware, creating accessible data tables, implementing real-time updates, and building PWAs.

Quick Start

Use the frontend-developer skill to implement a React component for a Next.js application that handles state management and data fetching with React Query.

Frequently Asked Questions about frontend-developer

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

FAQPage Schema
How do I optimize React 19 components for Core Web Vitals in a Next.js 15 application?▼

To optimize React 19 components for Core Web Vitals, you should implement code splitting, image optimization, and memory leak prevention. This Skill provides expert guidance on improving performance using Next.js 15 features and concurrent rendering.

What is the best way to manage state and data fetching in modern React applications?▼

The best way to manage state and data fetching in modern React applications is using advanced libraries like Zustand, React Query, and SWR. This Skill offers expert implementation guidance for efficient client-side state management.

How do I implement Server Components and Server Actions in Next.js 15?▼

Implementing Server Components and Server Actions in Next.js 15 involves leveraging the Edge runtime and API routes for optimized data handling. This Skill provides expert-level code examples and architectural guidance for these features.

Do I need TypeScript knowledge to build accessible web applications with React?▼

Yes, TypeScript knowledge is required to build accessible web applications with React using this guidance. The approach prioritizes WCAG compliance, ARIA patterns, and maintainable TypeScript code for modern frontend architecture.

Can I use Tailwind CSS for responsive design in a micro-frontend architecture?▼

Yes, you can use Tailwind CSS for responsive design within a micro-frontend architecture. This Skill provides proficiency in combining modern CSS techniques, design systems, and build optimization for scalable web applications.

Related Skills

Explore More Software Engineering Skills→
bryanvillamilpragmabryanvillamilpragma
3

eslint-prettier-config

Set up ESLint and Prettier configurations for TypeScript and React projects.

Community
Advanced
hoangminh46hoangminh46

performance-precision

Optimize React/Next.js web performance by improving Core Web Vitals and reducing runtime overhead.

Community
Advanced
tann200tann200

integrations

Manage Replit integrations for authentication, databases, payments, and third-party APIs.

Community
Intermediate
JaivishChauhanJaivishChauhan

frontend-development

Build responsive web interfaces with semantic HTML, CSS, and TypeScript.

Community
Advanced