skills.rest
hungrytech
hungrytechCOMMUNITY
Explore all skills by this author →
GitHub

sub-frontend-engineer

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
One-click install
npx skills add https://github.com/hungrytech/hungrytech-claude-skills --skill sub-frontend-engineer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
dnnyngyendnnyngyen
332

webapp-building

Scaffold React web applications with TypeScript, Vite, Tailwind CSS, and shadcn/ui.

Community
Intermediate
piers-sinclairpiers-sinclair
1

playwright

Automate end-to-end UI tests for React and Vite applications with Playwright.

Community
Intermediate
MesferAliMesferAli

frontend-react

Develop React, TypeScript, and Next.js applications with state management and testing.

Community
Advanced
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate