skills.rest
alvarovillalbaa
alvarovillalbaaCOMMUNITY
Explore all skills by this author →
Website𝕏@alvarovillalbapGitHub

frontend

Implement React and Next.js frontend UI with accessibility and performance checks.

Updated Feb 13, 2026
Search Tags:#performance#accessibility#frontend#react#nextjs#ui architecture#signup onboarding
One-click install
npx skills add https://github.com/alvarovillalbaa/plugins --skill frontend-alvarovillalbaa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/alvarovillalbaa/plugins/tree/main/engineering/skills/frontend
Command: npx skills add https://github.com/alvarovillalbaa/plugins --skill frontend-alvarovillalbaa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Frontend changes often fail silently: accessibility breaks, performance regresses, state/route ownership gets muddled, and UI polish turns into inconsistent “decoration.” This Skill provides a structured way to implement browser-facing UI depth correctly, including auth/signup/onboarding surfaces and CRO-critical page behavior.

Core Features & Use Cases

  • Component & UI architecture ownership: Define and preserve route ownership, state ownership, and design-system integration for React/Next.js work.
  • Correctness for user-facing behavior: Implement loading/empty/error/success states, keyboard paths, mobile behavior, and performance expectations as part of “done.”
  • Auth, signup, verification, onboarding slice: Handle validation, recovery, instrumentation seams, and mobile-first behavior without faking server logic.
  • Polish with guardrails: Apply shadcn/ui design constraints, animation/performance rules, and anti-slop UI quality checks during implementation and refactors.
  • Guided delivery workflow: Use the bundled references and scripts to follow a repeatable delivery loop and reduce regressions.

Quick Start

Use the frontend skill to implement a signup-related UI change by following the “Start Here” steps, then apply the correct frontend-development workflow to the component, route, or page section you’re updating.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I implement accessible loading and error states in a React component?▼

Implement accessible loading, empty, error, and success states in React by treating UI correctness as a core delivery requirement. This includes defining keyboard paths, mobile behavior, and performance expectations as part of the completion criteria.

What is the best way to handle signup and onboarding flow validation in Next.js?▼

Handle signup and onboarding flow validation in Next.js by implementing client-side checks, recovery paths, and instrumentation seams. This approach ensures mobile-first behavior without fabricating server logic, delegating backend needs appropriately.

How do I preserve state and route ownership when building a React UI architecture?▼

Preserve state and route ownership in React UI architecture by defining clear boundaries for component integration. Maintaining explicit ownership prevents muddled routes and ensures consistent design-system integration during refactoring.

Can I use shadcn/ui constraints to prevent UI polish regressions?▼

Yes, you can apply shadcn/ui design constraints to prevent UI polish regressions. Using these guardrails during implementation applies animation and performance rules to enforce anti-slop UI quality checks.

Why does my frontend performance regress after adding new UI features?▼

Frontend performance regresses after adding UI features when implementation lacks structured delivery workflows. Applying bundled best-practice rules and repeatable delivery loops reduces silent performance drops and accessibility breaks.

Does this frontend workflow handle backend API creation for auth flows?▼

No, this frontend workflow does not handle backend API creation for auth flows. It strictly implements browser-facing UI depth and delegates any server-side needs to a backend skill instead of fabricating APIs.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
oakossoakoss
1

auth

Configure Better Auth for signup, login, OAuth, and route protection.

Official
Advanced
abhijeetkakade1234abhijeetkakade1234
1

access-control-auditing

Detect and remediate IDOR, BOLA, and BFLA access control vulnerabilities in backend code.

Community
Advanced
RomualdPRomualdP

React State Management

Implement Zustand stores and custom hooks for React client-side state.

Community
Intermediate