skills.rest
PT-Perkasa-Pilar-Utama
PT-Perkasa-Pilar-UtamaOFFICIAL
Explore all skills by this author →
Website𝕏@perkasaidGitHub

add-frontend-feature

Implements React and Vite frontend features with API-backed behavior in Axentra.

Updated Sep 16, 2026
Search Tags:#typescript#testing#React#feature development#frontend#vite#React Router
One-click install
npx skills add https://github.com/PT-Perkasa-Pilar-Utama/axentra --skill add-frontend-feature-pt-perkasa-pilar-utama
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-frontend-feature
Source: https://github.com/PT-Perkasa-Pilar-Utama/axentra/tree/main/.claude/skills/add-frontend-feature
Command: npx skills add https://github.com/PT-Perkasa-Pilar-Utama/axentra --skill add-frontend-feature-pt-perkasa-pilar-utama

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a new frontend feature in Axentra requires following a strict project structure, wiring routes correctly, and connecting to real APIs instead of mock data. This Skill guides the AI through the exact conventions so features are consistent, accessible, and testable. ## Core Features & Use Cases - Standardized Feature Structure: Creates the api.ts, presenter.ts, view.tsx, and test file layout under apps/web/src/features/<feature>. - API-Backed Implementation: Ensures every feature calls the real API client with typed responses, never mock data or local-only state. - Accessibility and State Coverage: Covers loading, empty, error, success, keyboard, and mobile states with Bahasa Indonesia user-facing copy. - Use Case: Given a task card with acceptance criteria and a Figma reference, generate a complete routed React feature with React Hook Form and Zod validation, tests per criterion, and a passing bun run complete-check. ## Quick Start Ask the AI to add a new Axentra frontend feature for your task card, following the feature folder conventions and wiring the route in the app router.

Frequently Asked Questions about add-frontend-feature

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

FAQPage Schema
How do I add a new frontend feature in a React and Vite app?▼

Create a feature folder under apps/web/src/features with api.ts, presenter.ts, view.tsx, and a test file, then wire the route in the app router. The presenter owns loading, error, and submit state while the view renders accessible UI.

How to structure API calls in a React feature with TypeScript?▼

Place API calls in an api.ts file that uses the shared API client and maps typed responses. Never replace a required API call with mock data or local-only state, and render API errors without leaking server details.

When should I use React Hook Form with Zod in a feature?▼

Use React Hook Form with Zod only when the task is a form. For non-form features, keep state management in the presenter layer without adding form libraries.

What states should an accessible React feature implement?▼

Implement loading, empty, error, success, keyboard, and mobile states for every feature. Primary actions must be keyboard accessible and visibly disabled while pending.

Why does my feature PR fail the complete-check step?▼

The bun run complete-check command validates tests, types, and linting before a PR. Failures usually come from missing tests for acceptance criteria, untyped API responses, or leftover mock data replacing real API calls.

Related Skills

Explore More Software Engineering Skills→
Yanick-mjYanick-mj

mb-lead-dev

Decompose technical tasks into function-level implementation tasks with API contracts and dependency ordering.

Community
Advanced
runlegionrunlegion
3

legion-review

Reviews open PRs against issue specs using parallel dimension agents and adversarial finding verification.

Official
Advanced
sami-abdulsami-abdul
3

backend-code

Build REST or GraphQL endpoints with database operations and generate API_SUMMARY.md contracts.

Community
Advanced
LowyShinLowyShin
33

phase-3-mockup

Create HTML/CSS UI mockups with JSON data for Next.js component transition.

Community
Intermediate