skills.rest
queen-of-code
queen-of-codeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-web

Guide React, Vue, and vanilla JavaScript frontend architecture with component, state, and performance patterns.

8|13|Updated Apr 13, 2026
Search Tags:#typescript#performance#accessibility#frontend#react#vue#state-management
One-click install
npx skills add https://github.com/queen-of-code/AI-DLC --skill frontend-web-queen-of-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-web
Source: https://github.com/queen-of-code/AI-DLC/tree/main/plugins/ai-dlc-skills/skills/frontend-web
Command: npx skills add https://github.com/queen-of-code/AI-DLC --skill frontend-web-queen-of-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern frontend projects suffer from inconsistent component architectures, fragile state management, and missed performance or accessibility best practices; this guide provides clear patterns and examples to make UI codebases predictable and maintainable.

Core Features & Use Cases

  • Component Architecture: Recommendations for presentational, container, layout, and feature component separation and composition patterns.
  • State Management: Guidance for local, form, server, global UI, and global app state with examples using Context, React Query, and lightweight stores.
  • Performance & Accessibility: Strategies for memoization, code splitting, image optimization, virtual lists, and essential ARIA and focus-management practices for inclusive interfaces.
  • Use Case: Implement a responsive dashboard with paginated server data, optimistic mutations, accessible forms, and route-based code splitting.

Quick Start

Create a responsive React component using composition for UI, Context or a store for global state, accessible semantic markup and ARIA attributes, and lazy-load heavy components to optimize initial load.

Frequently Asked Questions about frontend-web

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

FAQPage Schema
What is the best way to structure React components for maintainability?▼

Structure React components by separating presentational, container, layout, and feature components. This component architecture pattern makes UI codebases predictable by clarifying responsibilities and improving composition across your application.

How do I manage state in a React single-page application?▼

Manage React state by categorizing it into local, form, server, global UI, and global app state. Use Context for UI state and React Query for server data to keep your single-page application state strategy lightweight and maintainable.

How do I optimize frontend performance when building web UIs?▼

Optimize frontend performance using memoization, route-based code splitting, and image optimization. Implement virtual lists for large datasets and lazy-load heavy components to reduce initial load times in your web UIs.

Does this frontend guide provide TypeScript-compatible examples for Vue?▼

Yes, the frontend guide provides TypeScript-compatible examples for both Vue and React. It covers modern frontend architecture patterns including component design, state management, and accessible forms for single-page applications.

How do I make accessible forms with ARIA and focus management?▼

Make accessible forms by using semantic HTML markup and proper ARIA attributes. Apply essential focus-management practices to ensure inclusive interfaces, satisfying accessibility requirements for users navigating with assistive technologies.

Related Skills

Explore More Software Engineering Skills→
ThejanaJayalathThejanaJayalath

bun-runtime

Manage JavaScript and TypeScript projects with the Bun runtime.

Community
Intermediate
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
EngineerWithAIEngineerWithAI
4

react-state-management

Guide React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Official
Intermediate
PMKhaiPMKhai

server-side-rendering

Render React components on the server to generate full HTML for initial load.

Community
Advanced