skills.rest
pkathmann88
pkathmann88COMMUNITY
Explore all skills by this author →
GitHub

web-frontend-development

Guide React, Vue, and TypeScript web-frontend development with responsive design and security.

Updated Feb 9, 2026
Search Tags:#typescript#ui#performance#web development#frontend#react#vue
One-click install
npx skills add https://github.com/pkathmann88/luigi --skill web-frontend-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-frontend-development
Source: https://github.com/pkathmann88/luigi/tree/main/.github/skills/web-frontend-development
Command: npx skills add https://github.com/pkathmann88/luigi --skill web-frontend-development

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive framework and best practices for building modern, high-performance, and secure web-frontend applications, ensuring cross-browser compatibility and maintainability.

Core Features & Use Cases

  • Technology Stack Guidance: Recommends and demonstrates modern tools like React, Vue, TypeScript, and Vite.
  • Component Development Patterns: Offers examples for building reusable UI components in React, Vue, and Web Components.
  • State Management Solutions: Details patterns for Context API, Zustand, and Redux Toolkit.
  • API Integration: Shows how to effectively integrate with backend services using Fetch API, React Query, and WebSockets.
  • Responsive Design: Employs mobile-first strategies and modern CSS techniques like Flexbox, Grid, and Container Queries.
  • Performance Optimization: Covers code splitting, lazy loading, image optimization, and memoization.
  • Security Best Practices: Includes guidance on XSS prevention, CSP, secure authentication, and input validation.
  • Testing Strategies: Outlines unit, integration, and E2E testing with Vitest and Playwright.
  • Use Case: Develop a new customer-facing dashboard for a SaaS product, ensuring it is fast, secure, responsive across devices, and easy to maintain.

Quick Start

Use the web-frontend-development skill to create a new React + TypeScript project using Vite.

Frequently Asked Questions about web-frontend-development

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

FAQPage Schema
How do I build a responsive web UI with React and TypeScript?▼

Building a responsive web UI with React and TypeScript involves using mobile-first strategies alongside modern CSS techniques like Flexbox, Grid, and Container Queries to ensure interfaces adapt across devices.

What's the best way to manage state in a modern frontend application?▼

The best way to manage state in a frontend application involves applying specific patterns like Context API, Zustand, or Redux Toolkit to maintain predictable state across complex component trees.

How does code splitting improve web frontend performance?▼

Code splitting improves web frontend performance by dividing your bundle into smaller chunks, allowing lazy loading of components and assets to reduce initial load times and optimize resource delivery.

Can I use Vite to scaffold a React and TypeScript project?▼

Yes, you can use Vite to scaffold a React and TypeScript project, providing a modern build setup that streamlines development for fast, responsive web frontend applications.

What testing strategies should I use for web UI components?▼

Testing web UI components requires a combination of unit, integration, and end-to-end testing using tools like Vitest and Playwright to validate functionality, user interactions, and overall application behavior.

How do I prevent XSS and secure authentication in web frontends?▼

Preventing XSS and securing authentication in web frontends requires implementing Content Security Policy (CSP), validating inputs, and following strict security best practices to protect user data and application integrity.

Related Skills

Explore More Software Engineering Skills→
runkidsrunkids
11

web-artifacts-builder

Initialize and bundle React, Tailwind CSS, and shadcn/ui artifacts into single HTML files.

Community
Advanced
congthang12312congthang12312

web-testing

Automate web testing with Playwright, Vitest, k6, and axe-core.

Community
Advanced
michsindlingermichsindlinger
1

API Bridge Building

Design frontend-backend API integrations across React, Vue, and Angular frameworks.

Community
Advanced
dembrandtdembrandt
33

semantic-html-and-seo

Apply semantic HTML and SEO metadata to web interfaces.

Official
Advanced