dev-workflows-frontend

Q: How to install dev-workflows-frontend?

Create the skills directory: mkdir -p .claude/skills. Then run: mkdir -p .claude/skills && curl -o .claude/skills/dev-workflows-frontend.md https://raw.githubusercontent.com/shinpr/claude-code-workflows.git/main/SKILL.md. Finally, /dev-workflows-frontend in Claude Code.

Q: What is dev-workflows-frontend best for?

dev-workflows-frontend is categorized under General. It covers: frontend, agent, typescript, react, workflows, testing, quality, sub-agents.

387Community RegistryGeneralby Shinsuke Kagawa · MIT

Skills + Subagents for React/TypeScript - Use skills for coding guidance, or run recipe workflows for full orchestrated agentic coding with specialized agents

First seen 4/17/2026

Summary

It helps frontend developers streamline their workflow from scaffolding to deployment with consistent, agent-driven processes.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/dev-workflows-frontend.md https://raw.githubusercontent.com/shinpr/claude-code-workflows.git/main/SKILL.md

Invoke in Claude Code

/dev-workflows-frontend

Use Cases

Scaffold a new React/TypeScript component with proper types, styles, and tests.

Run a full code review workflow that checks for linting errors, type safety, and test coverage.

Orchestrate a multi-agent session where one agent writes code, another writes tests, and a third reviews the output.

Automate the setup of a new feature branch with all necessary files and configurations.

Generate unit tests for existing React components using the testing sub-agent.

Refactor a legacy class component to a functional component with hooks, ensuring all tests pass.

Usage Examples

/dev-workflows-frontend generate component Button --with-tests --with-stories

/dev-workflows-frontend run workflow code-review --path src/components/

Use the testing sub-agent to create tests for the UserProfile component.

View source on GitHub

frontendagenttypescriptreactworkflowstestingqualitysub-agents

Security Audits

LicensePassSourceWarnRepositoryPass

Frequently Asked Questions

What is dev-workflows-frontend?

This skill provides structured workflows and sub-agents for React/TypeScript development, enabling you to generate code, run tests, enforce quality standards, and orchestrate multi-agent coding sessions. It helps frontend developers streamline their workflow from scaffolding to deployment with consistent, agent-driven processes.

How to install dev-workflows-frontend?

To install dev-workflows-frontend: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/dev-workflows-frontend.md https://raw.githubusercontent.com/shinpr/claude-code-workflows.git/main/SKILL.md. Finally, /dev-workflows-frontend in Claude Code.

What is dev-workflows-frontend best for?

dev-workflows-frontend is a skill categorized under General. It is designed for: frontend, agent, typescript, react, workflows, testing, quality, sub-agents. Created by Shinsuke Kagawa.

What can I use dev-workflows-frontend for?

dev-workflows-frontend is useful for: Scaffold a new React/TypeScript component with proper types, styles, and tests.; Run a full code review workflow that checks for linting errors, type safety, and test coverage.; Orchestrate a multi-agent session where one agent writes code, another writes tests, and a third reviews the output.; Automate the setup of a new feature branch with all necessary files and configurations.; Generate unit tests for existing React components using the testing sub-agent.; Refactor a legacy class component to a functional component with hooks, ensuring all tests pass..