skills.rest
elophanto
elophantoCOMMUNITY
Explore all skills by this author →
Website𝕏@elophantoGitHub

frontend-development

Automate frontend project setup and UI implementation guidance for React, Vue, Angular, and Svelte.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams frequently encounter repetitive setup, inconsistent UI implementations, and onboarding friction. This Skill provides structured guidance to accelerate building modern, accessible frontends.

Core Features & Use Cases

  • Build responsive, accessible web applications with React, Vue, Angular, or Svelte
  • Create and enforce a reusable component library and design system for scalable development
  • Optimize performance with Core Web Vitals, code splitting, and lazy loading
  • Use cases include starting a new dashboard, porting legacy UIs, or building a component library

Quick Start

Instantiate a ready-to-run frontend scaffold with a responsive UI using React, Vue, Angular, or Svelte alongside an initial design system.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I scaffold a React or Vue frontend with a built-in design system?▼

To scaffold a React or Vue frontend with a design system, use this Skill to automate project setup and generate ready-to-run starter code. It provides structured guidance for initial responsive UI implementation, component library creation, and design system integration.

What is the best way to optimize frontend performance for Core Web Vitals?▼

Optimizing frontend performance for Core Web Vitals requires code splitting and lazy loading. This Skill provides performance optimization guidance, helping teams improve loading speed and responsiveness across React, Vue, Angular, and Svelte applications.

Does this frontend setup guidance support building accessible web applications?▼

Yes, this frontend setup guidance supports building accessible web applications. It integrates accessibility best practices into the UI implementation process, ensuring responsive designs meet compliance standards across React, Vue, Angular, and Svelte projects.

Can I use this to port legacy UIs into a modern component library?▼

Yes, you can use this to port legacy UIs by creating and enforcing a reusable component library. It accelerates the transition by generating structured guidance and ready-to-run starter code for scalable frontend development.

Do I need modern CSS and state management knowledge to use the generated starter code?▼

Yes, you need familiarity with modern CSS, component libraries, state management, and build tooling to use the generated starter code. This prerequisite knowledge is required to effectively deploy the automated UI implementation guidance.

Related Skills

Explore More Software Engineering Skills→
aresbitaresbit
7

webapp-building

Create React web applications with TypeScript, Vite, Tailwind CSS, and shadcn/ui.

Community
Intermediate
secondskysecondsky
204

web-performance-optimization

Apply code splitting, lazy loading, caching, and Core Web Vitals monitoring to web apps.

Community
Advanced
Kyon147Kyon147
489

shopify-app-integration-testing

Mock Shopify HTTP requests and verify routes and middleware in Laravel tests.

Community
Basic
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate