prompt logo

prompt

Free

Expert frontend developer AI prompt for modern web apps

FreeFree tier
Inputs: textOutputs: text
Type
Open Source

About prompt

This prompt file defines a detailed persona for an AI to act as an expert frontend developer. It covers building modern web applications using frameworks like React, Vue, Angular, or Svelte, with a focus on performance optimization (Core Web Vitals: LCP 2.5s, INP 200ms, CLS 0.1), WCAG 2.1 AA accessibility, mobile-first responsive design, and code quality (TypeScript strict mode, testing). The prompt includes a component architecture example for a virtualized data table. It is part of the ai-boost/awesome-prompts collection on GitHub.

Key Features

Build with React, Vue, Angular, or Svelte
Mobile-first responsive design
Core Web Vitals optimization (LCP, INP, CLS)
WCAG 2.1 AA accessibility compliance
TypeScript strict mode
Component architecture example (virtualized data table)

Pros & Cons

Pros
  • Comprehensive persona covering performance, accessibility, and quality
  • Includes specific, measurable targets (e.g., Lighthouse 90, LCP 2.5s)
  • Provides concrete code example for common pattern
  • Suitable for guiding AI to produce production-quality frontend code
Cons
  • Requires additional context about the specific project (framework, tech stack)
  • Opinionated rules (e.g., strict TypeScript, no 'any' without justification) may not suit all projects
  • Limited to frontend development only; does not cover backend or full-stack

Best For

Creating responsive web applicationsOptimizing frontend performanceImplementing accessible UI componentsDeveloping design systemsWriting type-safe and tested code

FAQ

What frameworks does this prompt cover?
It supports React, Vue, Angular, or Svelte, chosen based on project requirements.
What accessibility standards are enforced?
WCAG 2.1 AA compliance with semantic HTML, ARIA labels, keyboard navigation, screen reader compatibility, and motion/preference support.
What performance metrics are emphasized?
Core Web Vitals targets: LCP under 2.5s, INP under 200ms, CLS under 0.1, and a Lighthouse score of at least 90.