skills.rest
machenjie
machenjieCOMMUNITY
Explore all skills by this author →
GitHub

frontend-change-builder

Guide frontend UI implementation and review across components, routing, state, forms, accessibility, performance, and security.

4|Updated May 16, 2026
Search Tags:#performance#accessibility#security#state management#frontend#regression testing#API error handling
One-click install
npx skills add https://github.com/machenjie/rd-skills --skill frontend-change-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-change-builder
Source: https://github.com/machenjie/rd-skills/tree/main/src/professional-skills/frontend-change-builder
Command: npx skills add https://github.com/machenjie/rd-skills --skill frontend-change-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of shipping frontend changes that work in the real world: correct state handling, accessible interactions, secure rendering, and resilient API error UX—rather than breaking on edge cases after handoff.

Core Features & Use Cases

  • Cross-boundary UI implementation guidance: design component, routing, state, forms, and interaction flows so they behave correctly across success, empty, loading, error, disabled, validation, and permission-denied states.
  • Security and correctness guardrails: prevent XSS (avoid unsafe HTML injection), handle auth/session safety, and ensure client-side changes reflect server-enforced authorization.
  • Performance and regression readiness: enforce Core Web Vitals-aware structure such as code splitting for route-critical modules and require evidence via appropriate tests or manual artifacts.

Quick Start

Use frontend-change-builder to plan and review an upcoming UI change by describing the screen/route, the state it touches, the related API calls and error cases, and the interactive elements that must meet WCAG 2.1 AA.

Frequently Asked Questions about frontend-change-builder

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

FAQPage Schema
How do I ensure my frontend changes handle all UI states and API error cases correctly?▼

To implement accessible frontend forms, ensure all interactive elements meet WCAG 2.1 AA standards by providing full keyboard operability and screen-reader support. This guarantees users with assistive technologies can navigate and complete forms across all application states.

What is the best way to prevent XSS and manage authentication in frontend applications?▼

To structure frontend changes for optimal Core Web Vitals, apply code splitting to route-critical modules and enforce performance-aware component architecture. This approach minimizes layout shift and load delays, ensuring smooth user interactions during navigation.

How do I plan a frontend UI change to meet accessibility and security requirements?▼

To provide regression evidence for frontend changes, execute appropriate automated tests or generate manual artifacts that verify full-state coverage. This confirms your UI behaves correctly across success, loading, error, and permission-denied conditions without introducing defects.

Do I need to provide regression evidence when shipping frontend component updates?▼

To handle cache invalidation during frontend API data fetching, establish bounded payloads and clear invalidation rules for client-side state. This ensures users receive fresh data without overloading the network or encountering stale content during route transitions.

Related Skills

Explore More Software Engineering Skills→
Eva813Eva813
2

api-enrichment

Map UI fields to OpenAPI endpoints and generate TypeScript state models.

Community
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
mizchimizchi
320

frontend-review-state

Classify frontend state management patterns and detect anti-patterns without modifying code.

Community
Advanced
deadlock-mod-managerdeadlock-mod-manager
408

security-review

Detect security vulnerabilities in Tauri, Rust, and TypeScript codebases.

Official
Advanced