back
loading skill details...
Build frontend apps with safe API integration and quality gates.
--- name: frontend-builder description: Build frontend apps with safe API integration and quality gates. metadata: author: RedHat Dev version: 1.0.0 owner: RedHat Dev Agent category: fullstack --- # SKILL: frontend-builder ## Purpose Build frontend applications (React / Next.js / Vite) with predictable structure, accessibility, and safe API integration. ## When to Use - A new UI app/page/component system is required. - The task includes routing, state management, or API consumption. - You need a repeatable scaffold with quality gates (lint/tests/build). ## Inputs - `stack` (required, enum: `react-vite|nextjs|react-spa`). - `ui_requirements` (required, string|object): pages, components, UX constraints. - `api_contract` (optional, object): endpoints/events and schemas. - `constraints` (optional, string[]): theming, perf, accessibility, browser support. ## Steps 1. Confirm scope: - routes/pages - global layout/navigation - state boundaries (server vs client) 2. Scaffold project in the target directory with minimal dependencies. 3. Implement component structure: - `components/`, `pages/`/`routes/`, `lib/`, `styles/` 4. Implement API client layer with: - base URL via env - timeouts - error normalization 5. Add accessibility and UX guardrails: - semantic HTML - keyboard navigation - loading/error states 6. Add tests (where the repo conventions support them). 7. Validate build/lint/test. ## Validation - App builds cleanly. - No secrets in client bundles. - API calls handle errors and cancellations. - Key user flows are covered by at least smoke tests. ## Output - Files created/changed - Run commands (`dev`, `build`, `test`) - Notes about env vars and configuration ## Safety Rules - Never embed API keys in frontend code; use server-side proxy if needed. - Avoid untrusted HTML injection; sanitize where necessary. - Prefer stable, well-maintained libraries. ## Example Input: - `stack`: `react-vite` - `ui_requirements`: “Dashboard page + settings form; calls `/api/me`.†Output: Vite project with `src/pages/Dashboard.tsx`, `src/lib/api.ts`, and build validation commands.
don't have the plugin yet? install it then click "run inline in claude" again.