skills.rest
prostoali2207-gif
prostoali2207-gifCOMMUNITY
Explore all skills by this author →
GitHub

frontend-agent

Implements contract-driven frontend changes for a Next.js auto-parts landing page with browser verification.

Updated Aug 10, 2026
Search Tags:#typescript#accessibility#frontend#mobile-first#next.js#form validation#crm integration
One-click install
npx skills add https://github.com/prostoali2207-gif/auto-parts-landing --skill frontend-agent-prostoali2207-gif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-agent
Source: https://github.com/prostoali2207-gif/auto-parts-landing/tree/main/.agents/skills/frontend-agent
Command: npx skills add https://github.com/prostoali2207-gif/auto-parts-landing --skill frontend-agent-prostoali2207-gif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents silent contract drift and broken request flows when implementing approved conversion, UX, and visual decisions on a production landing page that feeds a CRM endpoint. ## Core Features & Use Cases - Contract-Driven Implementation: Reads Conversion, UX, and Visual Director contracts before coding and flags conflicts instead of guessing. - CRM Request Integrity: Keeps frontend validation aligned with the live create-landing-request backend contract, including VIN or make/model/year vehicle identity, part identification, contact data, and photo upload rules. - Verification Discipline: Enforces build checks, real browser verification of critical request scenarios, mobile-first checks at ~390px, accessibility requirements, and a structured QA handoff. - Use Case: After a UX Architect specifies a new form error-recovery behavior, use this Skill to implement the smallest safe change in the Next.js/TypeScript/Tailwind codebase, verify both VIN and non-VIN submission paths in a browser, and hand off known risks to QA. ## Quick Start Implement the approved UX contract for the part request form, verify both vehicle identity paths in the browser at mobile width, and report contract status and remaining risks.

Frequently Asked Questions about frontend-agent

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

FAQPage Schema
How do I implement landing page form changes without breaking the CRM integration?▼

Read the existing create-landing-request contract first, map the smallest affected surface, and keep frontend validation aligned with backend rules for vehicle identity, part information, and contact data. Verify both success and failure paths in a real browser before handoff.

How to prevent duplicate form submissions in a Next.js request flow?▼

Use explicit state transitions for idle, submitting, success, and error, and disable repeated submission while a request is in flight. Show success UI only after a confirmed server response and preserve entered data on retryable failures.

Is client-side validation enough for file upload security?▼

No. Browser MIME, type, and size checks are only UX feedback and can be bypassed. The backend must allowlist file types, validate size server-side, distrust user-supplied Content-Type and filenames, and use safe generated storage names.

What should be verified in the browser before shipping a form change?▼

Verify both VIN and make/model/year submission paths, missing-field corrections, valid and invalid photo handling, request failure with data-preserving retry, double-submit protection, and full completion at roughly 390px mobile width with keyboard navigation.

When should a frontend agent refuse to implement a requested change?▼

Refuse when the request conflicts with a higher-authority contract, rebuilds CRM or ecommerce scope without approval, requires fabricated business claims, or adds a dependency heavier than the problem warrants. Surface it as CONTRACT CONFLICT, OUT OF SCOPE, or NEEDS DECISION.

Related Skills

Explore More Software Engineering Skills→
DagimAlemayehuuDagimAlemayehuu

agentic-engineering-experience

Define user journeys, page purpose, and accessibility behavior before visual design.

Community
Intermediate
einja-inceinja-inc
1

task-qa

Execute mandatory tests and record failure classifications for QA evidence.

Official
Advanced
LukeLambLukeLamb

NeuroForge

Provide authenticated tRPC endpoints for agent publishing and research interactions.

Community
Intermediate
Final-Project-solicode-WebsiteeFinal-Project-solicode-Websitee

architecte-contenu

Generate sitemap, content strategy, and wireframe markdown files for web projects.

Official
Intermediate