skills.rest
ludsonaiello
ludsonaielloCOMMUNITY
Explore all skills by this author →
GitHub

frontend

Build Next.js UI components, pages, and forms from verified API contracts.

Updated Jan 2, 2026
Search Tags:#typescript#frontend#react#nextjs#ui-components#production-grade#lead360
One-click install
npx skills add https://github.com/ludsonaiello/lead360 --skill frontend-ludsonaiello
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/ludsonaiello/lead360/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/ludsonaiello/lead360 --skill frontend-ludsonaiello

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds production-ready Next.js UI components, pages, and forms for Lead360, accelerating delivery and quality.

Core Features & Use Cases

  • Production-grade UI components and pages for Lead360 apps built with Next.js + React.
  • Integrates with the Lead360 backend via verified API documentation to ensure UI consistency.
  • Use Case: rapidly ship a new admin UI module with forms, dashboards, and responsive layouts.

Quick Start

Instantiate the Frontend Developer Agent to begin implementing production-grade Next.js UI after API documentation for the module is verified.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I build production-grade Next.js UI components from API contracts?▼

Build production-grade Next.js UI components by consuming verified API contracts to ensure cross-module consistency. The Skill targets admin and client-facing interfaces, adhering to existing API client patterns, TypeScript strict typing, and authentication context.

What is the best way to implement React forms for a Next.js admin module?▼

Implement React forms for a Next.js admin module by using the Frontend Developer Agent after API documentation is verified. It accelerates delivery by validating endpoints before UI work and ensuring integration tests align with the design system.

Does this Skill require verified API documentation before building UI?▼

Yes, this Skill requires verified API documentation before building UI. You must validate endpoints before starting UI work to ensure the Next.js components consume the correct contracts and maintain integration test consistency.

Can I use this to generate TypeScript strict typed pages for Lead360?▼

Yes, you can generate TypeScript strict typed pages for Lead360. The Skill enforces TypeScript strict typing across Next.js pages and components while adhering to the existing authentication context and design system.

Why does the UI generation wait for endpoint validation?▼

UI generation waits for endpoint validation to prevent contract mismatches. Validating endpoints before UI work ensures the Next.js components accurately consume the verified API documentation and pass integration tests.

What limitations exist when building cross-module interfaces with this approach?▼

A key limitation is the dependency on existing patterns; the approach requires adherence to current API client patterns, TypeScript strict typing, and the authentication context. UI work cannot proceed until API documentation is verified.

Related Skills

Explore More Software Engineering Skills→
YuriGarciaRibeiroYuriGarciaRibeiro

api-contract-doc-sync

Align API contracts with OpenAPI/Swagger documentation through automated checks.

Community
Advanced
truongnattruongnat

ui-stack-pro

Validate UI components against 8px grid, color, typography, dark mode, and 5-state rules.

Community
Advanced
thesammykinsthesammykins

typescript-pro

Configure strict tsconfig.json and Zod validation for TypeScript projects.

Community
Advanced
Konadu-Akwasi-AkuokoKonadu-Akwasi-Akuoko
2

add-feature-surface

Scaffold new UI surfaces and register actions in React applications.

Community
Intermediate