skills.rest
HsnSaboor
HsnSaboorCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-development

Provide frontend development guidelines for React, Vue 3, Svelte 5, and Angular.

Updated Jan 21, 2026
Search Tags:#typescript#frontend#react#angular#vue#svelte#ui development
One-click install
npx skills add https://github.com/HsnSaboor/open-engineer --skill frontend-development-hsnsaboor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/HsnSaboor/open-engineer/tree/main/src/skills/bundled/samhvw8-frontend-development
Command: npx skills add https://github.com/HsnSaboor/open-engineer --skill frontend-development-hsnsaboor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for developing modern frontend applications across multiple popular frameworks, ensuring consistency, performance, and maintainability.

Core Features & Use Cases

  • Multi-Framework Support: Covers React, Vue 3, Svelte 5, and Angular with framework-specific patterns.
  • Best Practices: Details on component patterns, state management, routing, data fetching, styling, and performance optimization.
  • Use Case: When starting a new project or refactoring an existing one, use this Skill to choose the right framework and apply its idiomatic patterns for building components, managing state, and fetching data efficiently.

Quick Start

Use the frontend-development skill to generate a new React component following modern best practices.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
What are the best practices for modern frontend development across multiple frameworks?▼

Modern frontend development best practices involve applying framework-specific patterns for component creation, state management, routing, and data fetching to ensure consistency, performance, and maintainability across React, Vue 3, Svelte 5, and Angular.

How do I structure a React component using modern TypeScript best practices?▼

To structure a React component with TypeScript, follow cross-framework architectural principles that cover idiomatic component creation, state management, and styling to build maintainable and type-safe user interfaces.

How do I choose between React, Vue 3, Svelte 5, and Angular for a new UI project?▼

Choosing between React, Vue 3, Svelte 5, and Angular involves comparing framework-specific patterns for state management, routing, and performance optimization to select the architecture that best fits your project requirements.

Does this frontend development approach support state management and routing in Vue 3?▼

Yes, this frontend development approach explicitly supports Vue 3, providing idiomatic guidelines for state management, routing, data fetching, and component creation specific to the framework.

When should I apply cross-framework architectural principles during a frontend refactor?▼

Apply cross-framework architectural principles during a frontend refactor when you need to standardize component patterns, optimize performance, and align data fetching strategies across different frameworks like Svelte 5 and Angular.

Related Skills

Explore More Software Engineering Skills→
quodsolerquodsoler
304

ue-project-context

Create an Unreal Engine project context document capturing engine version, modules, plugins, and conventions.

Community
Advanced
TungND2k2TungND2k2

frontend-design

Generate production-ready frontend UI components and pages across React, HTML/CSS, or similar stacks.

Community
Advanced
HollowvynHollowvyn

presentational-container-pattern

Separate data fetching and state from React view rendering.

Official
Basic
yigitkonuryigitkonur
11

develop-typescript

Develop framework-agnostic TypeScript code with strict type safety and tsconfig.json linting.

Community
Intermediate