skills.rest
AJV009
AJV009COMMUNITY
Explore all skills by this author →
Website𝕏@alphons009GitHub

canvas-scaffolding

Scaffold new React components with index.jsx, component.yml, and Storybook stories.

1|Updated Mar 22, 2026
Search Tags:#frontend#react#scaffolding#component#storybook#code-generation
One-click install
npx skills add https://github.com/AJV009/drupal-devkit --skill canvas-scaffolding
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-scaffolding
Source: https://github.com/AJV009/drupal-devkit/tree/main/plugins/drupal-canvas/skills/canvas-scaffolding
Command: npx skills add https://github.com/AJV009/drupal-devkit --skill canvas-scaffolding

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a standardized scaffold workflow to create new React components quickly, ensuring consistency with naming, file structure, and Storybook integration.

Core Features & Use Cases

  • Automates creation of component folder, index.jsx, and component.yml from an existing template.
  • Ensures the correct naming conventions (snake_case machineName) and creates a matching Storybook story file.
  • Reuses existing components where possible and guides dependency resolution to keep codebases coherent.

Quick Start

Copy an existing component scaffold, rename to the new component, and generate index.jsx, component.yml, and the Storybook story file.

Frequently Asked Questions about canvas-scaffolding

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

FAQPage Schema
How do I scaffold a new React component with Storybook integration?▼

Scaffolding a new React component involves copying an existing template to generate an index.jsx file, a component.yml configuration, and a matching Storybook story file to ensure consistent structure and documentation.

What file structure does this React component scaffolding approach enforce?▼

The React component scaffolding enforces a formal contract by generating a dedicated component folder containing an index.jsx file, a component.yml metadata file, and an accompanying Storybook story documentation file.

How do I generate a Storybook story file for a new React component?▼

To generate a Storybook story file, the scaffolding process copies an existing component template, applies a snake_case naming convention to the machineName, and automatically creates the matching story documentation.

Can I use this scaffolding workflow if my src/components directory already has existing components?▼

This scaffolding workflow is designed for projects where no existing component exists in src/components, guiding template copying, story creation, and dependency resolution to build new components from scratch.

What is the best way to maintain naming conventions when creating React components?▼

The best way to maintain naming conventions is using an automated scaffolding process that enforces a snake_case machineName format and generates a standardized component.yml file alongside the index.jsx entry point.

Related Skills

Explore More Software Engineering Skills→
acquiaacquia
16

nebula-component-creation

Copy example React components into src/components with dependencies and preview coverage.

Official
Intermediate
ynotradioynotradio

Storybook Best Practices

Validate Storybook stories for React components with Payload CMS UI mocking.

Official
Intermediate
strongeronstrongeron
18

sb-wrappers

Scaffold typed React wrapper components into .storybook/wrappers for audit data visualization.

Community
Intermediate
AJV009AJV009
1

create-component

Scaffold React Canvas components with index.jsx, component.yml, and Storybook stories.

Community
Intermediate