frontend-expert

Provides frontend development expertise covering UI/UX, frameworks, responsive design, and web application architecture.

12|1|Updated Dec 22, 2019
One-click install
npx skills add https://github.com/louishuyng/dotfiles --skill frontend-expert-louishuyng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-expert
Source: https://github.com/louishuyng/dotfiles/tree/main/opencode/skills/frontend-expert
Command: npx skills add https://github.com/louishuyng/dotfiles --skill frontend-expert-louishuyng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the complexities and challenges faced in modern frontend development, providing expert assistance for building high-quality, user-friendly web applications.

Core Features & Use Cases

  • UI/UX Design Guidance: Get best practices for intuitive and engaging user interfaces.
  • Framework Expertise: Receive recommendations and insights on popular frameworks like React, Angular, and Vue.js.
  • Performance Optimization: Learn strategies to speed up web applications.
  • Use Case: A developer is struggling to implement a responsive navigation bar that works across all major browsers and devices. They can ask this Skill for best practices and code examples for achieving this.

Quick Start

Assist me with optimizing the performance of my React application by suggesting code splitting techniques.

Frequently Asked Questions about frontend-expert

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

FAQPage Schema
What is the best way to optimize web application performance using code splitting in React?

Code splitting in React optimizes web application performance by lazy loading components to reduce the initial bundle size and accelerate page load times. Dynamic imports allow modules to load only when rendered, improving overall web application responsiveness.

How do I implement a responsive navigation bar that works across all major browsers?

Implementing a responsive navigation bar requires CSS flexbox or grid layouts with media queries to adapt to different screen sizes. Cross-browser compatibility is achieved through standard HTML5 semantics and testing across all major mobile and desktop browsers.

How does state management work in modern JavaScript frameworks like Vue.js and Angular?

State management in modern JavaScript frameworks like Vue.js and Angular centralizes application data within a dedicated store or service. This mechanism ensures predictable state transitions, synchronizes UI updates, and maintains data consistency across various user interface components.

Can I get UI/UX design guidance for building accessible and engaging user interfaces?

UI/UX design guidance for accessible user interfaces involves applying semantic HTML, ARIA roles, and sufficient color contrast. These best practices ensure engaging web applications remain navigable by assistive technologies while meeting modern web accessibility standards.

What are the limitations of relying on modern JavaScript ecosystems for web development?

Relying on modern JavaScript ecosystems introduces limitations like increased build complexity and potential performance overhead from heavy framework abstractions. Strict browser compatibility requirements and over-reliance on tooling can also obscure underlying web standards during web development.