frontend

Develop and refine web user interfaces with React, Next.js, Vue, or Svelte.

Updated Feb 7, 2026
One-click install
npx skills add https://github.com/mohitmishra786/aurora-dev --skill frontend-mohitmishra786
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/mohitmishra786/aurora-dev/tree/main/.agents/skills/frontend
Command: npx skills add https://github.com/mohitmishra786/aurora-dev --skill frontend-mohitmishra786

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation, management, and optimization of user interfaces, ensuring a seamless and accessible user experience across various devices and platforms.

Core Features & Use Cases

  • Component Development: Build reusable UI elements following atomic design principles.
  • State Management: Implement robust global, server, and local state solutions.
  • Performance Optimization: Enhance application speed through code splitting, lazy loading, and bundle optimization.
  • Accessibility: Ensure applications are usable by everyone, adhering to WCAG standards.
  • Use Case: Develop a responsive e-commerce product listing page with dynamic filtering, optimized image loading, and full keyboard navigation support.

Quick Start

Use the frontend skill to create a new React component for a user profile card.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I build reusable React components for a web application?

Build reusable React components by following atomic design principles to construct modular UI elements. This approach ensures consistent component creation, state management, and seamless API integration for scalable web applications.

What's the best way to implement state management in Next.js?

Implement state management in Next.js using robust libraries like Zustand or Redux. This handles global, server, and local state solutions efficiently, ensuring optimal data flow across your web application components.

How can I optimize frontend performance with code splitting and lazy loading?

Optimize frontend performance through code splitting, lazy loading, and bundle optimization. These techniques reduce initial load times and enhance application speed by loading resources only when needed.

How do I ensure web accessibility and WCAG compliance for UI components?

Ensure web accessibility by adhering to WCAG standards during UI development. This guarantees applications are usable by everyone, implementing full keyboard navigation support and accessible interactive elements.

Can I use TailwindCSS with Svelte or Vue for component styling?

Yes, TailwindCSS can be used with frameworks like Svelte or Vue for styling. The frontend skill supports multiple modern web technologies, allowing flexible styling solutions across different component frameworks.

Why does my frontend application have slow dynamic filtering on large lists?

Slow dynamic filtering often results from unoptimized state management and rendering. Resolve this by implementing performance optimization techniques like code splitting and lazy loading to enhance application speed.