skills.rest
lfuuu
lfuuuCOMMUNITY
Explore all skills by this author →
GitHub

frontend

Implements React TypeScript frontend pages, API clients, and UI states for AI Billing.

Updated Jun 2, 2026
Search Tags:#typescript#frontend#react#vite#billing#api client#ui states
One-click install
npx skills add https://github.com/lfuuu/claude-rules --skill frontend-lfuuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/lfuuu/claude-rules/tree/main/ai-billing/skills/frontend
Command: npx skills add https://github.com/lfuuu/claude-rules --skill frontend-lfuuu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It defines a frontend developer role for the AI Billing MVP, ensuring React/TypeScript work on pages, forms, and API clients follows project conventions and never duplicates backend billing logic on the client. ## Core Features & Use Cases - Scoped Role Activation: Activates only for tasks touching frontend/src/, pages, forms, API clients, and JSON-contract types; defers backend, review, and docs tasks to other roles. - Mandatory UI States: Enforces loading, error, empty, and success states for every block that calls the backend, rendering backend error messages as-is in Russian. - Domain Safety Rules: Prohibits client-side billing arithmetic, float sums, hardcoded backend URLs, and price-list caching, keeping the backend as the single source of truth. - Use Case: When the backend JSON contract changes, invoke this role to update TypeScript types and API clients in frontend/src/api/ and adjust affected pages with proper state handling. ## Quick Start Ask the agent to act as the frontend role and update the API client types and affected pages in frontend/src/ to match the new backend JSON contract.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I update frontend TypeScript types when the backend API contract changes?▼

Invoke the frontend role, which reads docs/spec.md for the JSON contract and updates types and API clients in frontend/src/api/. It then adjusts affected pages and components to match the new contract.

How should a React frontend handle loading and error states for API calls?▼

Each block calling the backend must implement four states: loading indicator, error showing the backend error.message as-is, an explicit empty-state notice, and success rendering. A single failed request must never crash the whole page.

When should I not use the frontend role in AI Billing?▼

Do not use it for tasks in backend/src/ or backend/prisma/ (use the backend role), for prose documentation updates (techwriter role), or for reviewing a finished diff (reviewer role).

Can the frontend calculate billing totals before displaying them?▼

No. The backend is the single source of truth for billing arithmetic. The frontend must render sums exactly as returned, never use Number/float for amounts, and never cache price lists for calculations.

How does the frontend connect to the backend API in development?▼

All requests use relative /api/... paths routed through the Vite proxy configured in frontend/vite.config.ts. Hardcoding the backend base URL is explicitly forbidden.

Related Skills

Explore More Software Engineering Skills→
LazyIsEfficientLazyIsEfficient
15

api-and-interface-design

Define typed API contracts with consistent error semantics and boundary validation.

Official
Advanced
vovanostm-publicvovanostm-public

self-review

Reviews code diffs for architecture drift, secrets, stale code, and missing verification before handoff.

Official
Intermediate
jammindevjammindev

gen-api

Regenerate TypeScript API client types from a Django OpenAPI schema.

Official
Intermediate
RediSearchRediSearch
6.2k

docs-guidelines

Applies language-agnostic documentation guidelines when writing or reviewing code comments and docstrings.

Official
Basic