skills.rest
yasinnerten
yasinnertenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-implementation

Provide frontend development patterns for React, Vue, and JavaScript.

Updated Jan 15, 2026
Search Tags:#typescript#performance#frontend#react#javascript#vue#ui development
One-click install
npx skills add https://github.com/yasinnerten/temporal-openai-agents-sdk --skill frontend-implementation-yasinnerten
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-implementation
Source: https://github.com/yasinnerten/temporal-openai-agents-sdk/tree/main/skills/frontend-implementation
Command: npx skills add https://github.com/yasinnerten/temporal-openai-agents-sdk --skill frontend-implementation-yasinnerten

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for building robust, performant, and accessible modern frontend applications using React, Vue, and JavaScript.

Core Features & Use Cases

  • Framework-Specific Patterns: Detailed examples for React (Components, Hooks, State Management, Routing) and Vue (Composition API, Reactive State, Pinia, Vue Router).
  • Modern JavaScript: Covers ES Modules, Async/Await, and robust error handling.
  • Performance Optimization: Techniques like code splitting, lazy loading, and virtual scrolling.
  • TypeScript Integration: Demonstrates type definitions and generic types.
  • Styling & Accessibility: Explores CSS-in-JS, CSS Modules, ARIA labels, keyboard navigation, and focus management.
  • Testing & Deployment: Includes examples for unit, component, and E2E testing, as well as Vite and Next.js build configurations.
  • Use Case: A developer needs to implement a complex user interface with dynamic data fetching, state management, and ensure it's accessible and performant across devices. This Skill provides the patterns and code examples to achieve this.

Quick Start

Generate a React component for a user profile with state management and API integration.

Frequently Asked Questions about frontend-implementation

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

FAQPage Schema
How do I structure React components for scalable frontend development?▼

Scalable React component architecture relies on reusable component patterns, Hooks for side effects, and proper state management. This approach ensures maintainable user interfaces by separating data fetching from presentation logic.

What's the best way to integrate TypeScript with Vue and React?▼

Integrating TypeScript with React and Vue involves defining type definitions and utilizing generic types for component props and state. This integration ensures robust type safety and reduces runtime errors in modern JavaScript applications.

How does lazy loading and code splitting improve frontend performance?▼

Lazy loading and code splitting improve frontend performance by deferring the download of non-critical JavaScript bundles. This optimization technique significantly reduces initial load times for complex user interfaces.

Can I use Pinia and Vue Router for state management and routing?▼

Yes, you can use Pinia for reactive state management and Vue Router for navigation within the Composition API. These tools provide robust patterns for building dynamic, maintainable Vue applications.

How do I add ARIA labels and keyboard navigation for UI accessibility?▼

Adding ARIA labels and keyboard navigation requires managing focus and semantic HTML within your component architecture. These styling and accessibility practices ensure user interfaces remain navigable for assistive technologies.

Does this approach cover unit and E2E testing for modern JavaScript?▼

Yes, this approach covers unit, component, and E2E testing alongside Vite and Next.js deployment strategies. Testing ensures your dynamic user interfaces remain performant and reliable across devices.

Related Skills

Explore More Software Engineering Skills→
981029l981029l
228

webnovel-init

Initialize a new webnovel project with structured files and directory templates.

Community
Intermediate
AloisHAloisH

vite

Configure Vite, add plugins, and build production bundles for web apps.

Community
Intermediate
teocraftersteocrafters

ssr-data-fetching

Implement SSR-compatible data fetching in Nuxt 4 with useFetch or useAsyncData.

Official
Advanced
curiositechcuriositech
181

frontend-architect

Recommend frontend stacks and Cloudflare deployment patterns for web applications.

Official
Advanced