frontend-coding

Guide frontend architecture, state management, performance, accessibility, and testing for React, Vue, Angular, and TypeScript projects.

14|11|Updated Dec 1, 2025
One-click install
npx skills add https://github.com/DauQuangThanh/hanoi-rainbow --skill frontend-coding-dauquangthanh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-coding
Source: https://github.com/DauQuangThanh/hanoi-rainbow/tree/main/skills/frontend-coding
Command: npx skills add https://github.com/DauQuangThanh/hanoi-rainbow --skill frontend-coding-dauquangthanh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provide concise, expert frontend development guidance to reduce guesswork and accelerate delivery of robust web applications.

Core Features & Use Cases

  • Cross-framework guidance for React, Vue, Angular, and TypeScript, plus modern web APIs.
  • Best-practice guidance on architecture, state management, performance, accessibility, and testing.
  • Use Case: a frontend team designing a new feature can consult this Skill to outline component structure, data flow, and accessibility considerations.

Quick Start

Provide a production-ready frontend blueprint for a React project including components, state management, performance considerations, and accessibility.

Frequently Asked Questions about frontend-coding

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

FAQPage Schema
How do I structure a React project for production with state management and performance in mind?

To structure a React project for production, outline component structures, establish data flow, and implement state management patterns alongside performance optimization and accessibility considerations to ensure maintainable delivery.

What is the best way to choose a state management pattern across different frontend frameworks?

Choosing state management patterns requires cross-framework guidance for React, Vue, and Angular, evaluating architecture choices, data flow, and maintainability requirements to select the most appropriate approach for your web application.

Can I use TypeScript with modern web APIs for frontend architecture design?

Yes, TypeScript integrates with modern web APIs for frontend architecture design, providing expert guidance applicable from initial architecture through production delivery to ensure robust web application development.

Does this frontend guidance cover accessibility and testing for Vue and Angular?

Yes, the frontend guidance covers accessibility and testing best practices for Vue and Angular, addressing architecture choices, performance optimization, and maintainability requirements across React, Vue, Angular, and TypeScript projects.

What's the best way to optimize frontend performance during the transition to production?

To optimize frontend performance for production, apply best-practice guidance on performance optimization, architecture choices, and maintainability requirements, ensuring robust web applications meet accessibility and testing standards.

When do I need to reconsider architecture choices for maintainability in frontend development?

You need to reconsider architecture choices for maintainability when building robust web applications, evaluating state management patterns, performance optimization, and accessibility requirements across React, Vue, Angular, or TypeScript projects.