skills.rest
tedeuxx
tedeuxxCOMMUNITY
Explore all skills by this author →
Website𝕏@tedeuxxGitHub

frontend

Implements React and Vite SPA features covering routing, state, auth, forms, SEO, and Playwright E2E.

Updated Jun 4, 2026
Search Tags:#react#playwright#vite#spa#tailwind#react-query#cognito
One-click install
npx skills add https://github.com/tedeuxx/tadeumendonca-skills --skill frontend-tedeuxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/tedeuxx/tadeumendonca-skills/tree/main/skills/frontend
Command: npx skills add https://github.com/tedeuxx/tadeumendonca-skills --skill frontend-tedeuxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a React single-page application involves dozens of cross-cutting decisions — routing, state ownership, authentication, pagination, SEO, analytics, and testing — that are often made inconsistently across features. This Skill provides one consolidated implementation guide so every SPA feature follows the same conventions and architecture. ## Core Features & Use Cases - Full SPA Stack Guidance: Covers React 18 + TypeScript + Vite bootstrap, react-router routing with guards, React Query for server state, Zustand for UI state, and Cognito SDK authentication with Bearer-token BFF calls. - Cross-Cutting Concerns: Defines conventions for cursor pagination, forms with zod validation, a Tailwind-based design system with Storybook, async UX states, markdown rendering, SEO with JSON-LD, GA4 analytics, and Playwright E2E tests. - Use Case: When adding a new articles page to the SPA, use this Skill to wire the route, fetch paginated data via the typed BFF client with React Query, render markdown content, set per-route SEO meta, and ship a Playwright spec in the same PR. ## Quick Start Ask the agent to build a new SPA feature, such as an articles list page with cursor pagination and SEO meta, following the frontend skill conventions.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I structure a React + Vite SPA with authentication?▼

Bootstrap providers in main.tsx with Amplify configured for Cognito, wrap the app in QueryClientProvider and HelmetProvider, and define routes in router.tsx with a RequireAuth guard. The Cognito SDK holds and refreshes tokens, and every BFF call attaches the access token as a Bearer header.

How do I manage server state vs UI state in React?▼

Server state belongs in React Query, which caches, dedupes, and invalidates API data. UI state like modals and filters goes in Zustand or local component state, and auth session state stays in the Cognito SDK. Never mirror server data into Zustand because it goes stale.

How do I implement cursor pagination with React Query?▼

Use useInfiniteQuery with a queryFn that passes the pageParam as a cursor query string and getNextPageParam returning last.next_cursor. The API returns items plus a next_cursor that is null at the end, and the frontend only echoes the cursor back without computing offsets.

Can a CSR React SPA handle SEO without SSR?▼

Yes, through per-route meta tags with react-helmet-async including title, description, canonical, and JSON-LD, plus a build-time sitemap.xml and robots.txt. Crawler heavy-lifting is handled by edge prerendering, and client meta must stay consistent with the prerendered output.

Why is client-side route guarding not enough for security?▼

Client-side authorization is cosmetic and only decides what to render, not what is allowed. Real enforcement happens server-side through the API Gateway authorizer and backend RBAC, so every protected call is re-checked on the server regardless of hidden UI.

When should Playwright E2E tests run in the pipeline?▼

Playwright E2E runs on the PR gate against a local vite preview of the built app, and any failure blocks the merge. The same specs can run as a post-deploy smoke test against the live apex domain, with only the base URL changing between targets.

Related Skills

Explore More Software Engineering Skills→
sitharaj88sitharaj88
1

aws-cognito

Generate AWS Cognito User Pool and Identity Pool configurations for authentication.

Community
Advanced
grzmolgrzmol
2

sf-post-deploy-verification

Verifies deployed Salesforce metadata, Apex tests, data, and configuration against a live org.

Community
Advanced
saranskumarsaranskumar

api-designer

Define API contracts with endpoints, schemas, validation, and error handling.

Community
Advanced
ngxtmngxtm

Next.js Rendering Strategies

Explain Next.js rendering strategies including SSG, ISR, SSR, and PPR.

Community
Intermediate