skills.rest
malston
malstonCOMMUNITY
Explore all skills by this author →
𝕏@marsguitarsGitHub

frontend-web-dev-expert

Architect React, Vue, or Angular projects with UI/UX, performance, and CI/CD integration.

Updated Aug 23, 2026
Search Tags:#architecture#performance#frontend#web-development#ci-cd#uiux
One-click install
npx skills add https://github.com/malston/claude-config --skill frontend-web-dev-expert-malston
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-web-dev-expert
Source: https://github.com/malston/claude-config/tree/main/skills/frontend-web-dev
Command: npx skills add https://github.com/malston/claude-config --skill frontend-web-dev-expert-malston

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured, expert-driven approach to frontend development, turning scattered tasks into a collaborative automation system that designs architecture, UI/UX, performance, and tooling.

Core Features & Use Cases

  • Modern Frontend Architecture: Architecture selection, framework evaluation, and scalable component design
  • UI/UX Implementation: Design systems, accessible UI, responsive layouts, and integration with modern frameworks
  • Performance Optimization: Load performance, runtime efficiency, and Core Web Vitals improvements
  • Engineering Setup: Tooling, code quality, testing strategies, and CI/CD integration
  • Cross-Platform Development: Progressive Web Apps, mobile development, and modern Web APIs
  • Use Case: Build a scalable React app with TypeScript, establish a design system, and set up a CI/CD workflow.

Quick Start

Use the frontend-web-dev-expert skill to architect a modern React app with TypeScript, implement a design system, optimize performance, and configure CI/CD pipelines.

Frequently Asked Questions about frontend-web-dev-expert

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

FAQPage Schema
How do I architect a modern React application with TypeScript and performance optimization?▼

Modern frontend architecture involves selecting frameworks, designing scalable components, and optimizing Core Web Vitals. This Skill provides end-to-end architecture design, component-driven patterns, performance tuning, and testing strategies tailored to React, Vue, or Angular projects.

What's the best way to implement a design system with accessibility and responsive layouts?▼

A design system codifies UI patterns, accessibility standards, and responsive behavior across components. This Skill guides design system creation, accessible UI implementation, and integration with modern frameworks to ensure consistent, usable interfaces.

Can I set up CI/CD pipelines and code quality tooling for a frontend project?▼

CI/CD integration automates testing, linting, and deployment workflows for frontend code. This Skill covers tooling configuration, testing strategies, and pipeline setup to streamline code quality and cross-platform delivery.

How do I optimize frontend performance and improve Core Web Vitals?▼

Performance optimization targets load time, runtime efficiency, and Core Web Vitals metrics. This Skill provides techniques for load performance analysis, optimization strategies, and measurement approaches specific to modern web applications.

Does this approach work for Progressive Web Apps and cross-platform development?▼

Yes. This Skill supports Progressive Web Apps, mobile-ready development, and modern Web APIs to enable cross-platform capabilities. It addresses responsive design and platform-agnostic architecture patterns.

What prerequisites do I need before starting a frontend architecture project?▼

Prerequisite setup includes framework familiarity, development environment configuration, and baseline tooling knowledge. This Skill assumes working knowledge of React, Vue, or Angular and guides the remaining architecture, design, and CI/CD decisions.

Related Skills

Explore More Software Engineering Skills→
elophantoelophanto
116

agency-phase-2-foundation

Scaffold frontend and backend skeletons with CI/CD pipelines and design tokens.

Community
Advanced
NagyViktNagyVikt
2

observability

Configure structured logging, tracing, and performance monitoring for Vercel-hosted applications.

Community
Advanced
AskTinNguyenAskTinNguyen

frontend-design

Generate production-ready frontend interfaces with design systems and accessible color tokens.

Community
Advanced
GamezarGamezar

sdd-brainstorm

Transform nascent ideas into designs and specifications through structured questioning.

Community
Intermediate