skills.rest
signalbeam-io
signalbeam-ioOFFICIAL
Explore all skills by this author →
GitHub

add-feature

Generate React and TypeScript frontend feature modules with pages, components, API stubs, and route wiring.

2|Updated Dec 9, 2025
Search Tags:#typescript#frontend#react#scaffold#codegen#feature
One-click install
npx skills add https://github.com/signalbeam-io/signalbeam-edge --skill add-feature-signalbeam-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-feature
Source: https://github.com/signalbeam-io/signalbeam-edge/tree/main/.claude/skills/add-feature
Command: npx skills add https://github.com/signalbeam-io/signalbeam-edge --skill add-feature-signalbeam-io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scaffold a new frontend feature module to standardize the creation of feature pages, components, API services, and hooks, reducing boilerplate and ensuring consistent project structure.

Core Features & Use Cases

  • Auto-generate the feature directory structure under web/src/features/{feature}/ with pages, components, and an API service file.
  • Provide a consistent pattern for integrating the new feature with routing and existing conventions.
  • Use Case: A developer needs to add a new UI feature named "alerts" following the project's React + TypeScript conventions.

Quick Start

Provide the feature name to scaffold a new frontend feature with the standard structure.

Frequently Asked Questions about add-feature

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

FAQPage Schema
How do I scaffold a new frontend feature module in React?▼

Scaffold a frontend feature module by providing a feature name to auto-generate a directory structure under web/src/features/{feature}/ with pages, components, API service stubs, hooks, and route wiring.

What is the standard directory structure for adding a new UI feature in TypeScript?▼

A standard UI feature structure organizes files under web/src/features/{feature}/, containing dedicated subdirectories for pages, components, API service files, and hooks to maintain consistent project conventions.

Can I auto-generate API service stubs and route wiring for a new React feature?▼

Yes, you can auto-generate API service stubs and route wiring alongside pages and components, ensuring the new React feature integrates immediately with existing project conventions.

Does this feature scaffolding tool work with React and TypeScript projects?▼

Yes, this feature scaffolding tool works specifically with React and TypeScript projects to generate UI pages, components, API service files, and hooks following standardized conventions.

What's the best way to reduce boilerplate when creating React feature pages?▼

Reduce boilerplate when creating React feature pages by using a scaffolding tool to auto-generate the initial directory structure, API service stubs, and route wiring according to standard project conventions.

How do I integrate a newly scaffolded feature into my existing React routing?▼

Integrate a newly scaffolded feature into existing React routing automatically during generation, as the tool applies consistent patterns to wire new feature pages directly into the project route setup.

Related Skills

Explore More Software Engineering Skills→
kinneyyankinneyyan
2

react-native-architecture

Scaffold scalable React Native apps with Expo Router and React Query.

Community
Advanced
fpindejfpindej
230

new-feature

Generate full-stack features with C# backend and SvelteKit frontend.

Community
Advanced
thapaliyabikendrathapaliyabikendra
24

react-development-patterns

Extract React 18+ development patterns for type-safe, accessible UI components.

Community
Intermediate
spuneiarturspuneiartur
1

component-factory

Generate reusable React components with JSX files and barrel exports.

Community
Intermediate