sub-frontend-engineer

Name: sub-frontend-engineer
Availability: InStock
Author: hungrytech

Design, implement, and test React UI components with Vite and TypeScript.

3|Updated Mar 30, 2026

Search Tags:#typescript #testing #frontend #react #vite #state-management #component-design

Ready to run

npx skills add https://github.com/hungrytech/hungrytech-claude-skills --skill sub-frontend-engineer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sub-frontend-engineer
Source: https://github.com/hungrytech/hungrytech-claude-skills/tree/main/plugins/sub-frontend-engineer/skills/sub-frontend-engineer
Command: npx skills add https://github.com/hungrytech/hungrytech-claude-skills --skill sub-frontend-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps frontend teams accelerate UI development by providing a dedicated expert agent that can design components, plan state management, optimize builds, and validate tests.

Core Features & Use Cases

Component tree design and architecture planning for React + Vite + TypeScript projects.
State management strategy selection and integration with TanStack Query, Zustand, and routing strategies.
Build optimization and testing guidance with Vitest, RTL, and Playwright.
Use Case: When starting a new dashboard feature, the agent can propose a complete component tree, data flow, and test scaffolding.

Quick Start

Provide a componentTarget and requirements, and the agent will return a ready-to-implement React/Vite component scaffold with tests.

Frequently Asked Questions about sub-frontend-engineer

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

FAQPage Schema

How do I design a React component tree and state management strategy for a new feature?▼

React component tree design and state management strategy are planned by providing a component target and requirements, which generates a scaffold with routing, data flow, and state integration using TanStack Query and Zustand.

Can I use Vite and Tailwind with this React UI development workflow?▼

Vite and Tailwind are explicitly supported in this React UI development workflow, providing type-safe interfaces, optimized builds, and styled component scaffolds for frontend projects.

What's the best way to scaffold automated tests for React components?▼

The best way to scaffold automated tests for React components is using Vitest, React Testing Library, and Playwright to validate component logic and end-to-end UI behavior across implementation phases.

Does this frontend workflow require TypeScript and jq?▼

This frontend workflow requires TypeScript for type-safe interfaces and component design, while jq is a necessary dependency for processing data during the discovery and implementation phases.

How do I integrate API patterns into a React and Vite application?▼

API integration patterns in a React and Vite application are implemented by designing type-safe interfaces and data flow strategies, leveraging TanStack Query for fetching and state synchronization.

When should I not use this React UI component generation approach?▼

You should not use this React UI component generation approach if your project does not use Vite, TypeScript, or React, as the architecture planning, routing, and testing scaffolds are tailored specifically to that stack.