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

create-component

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This scaffold guide provides a repeatable, standards-based process for creating a new Canvas component, ensuring the required files exist and follow project conventions.

Core Features & Use Cases

  • Standardized steps to copy an existing component, create index.jsx and component.yml, and generate a matching Storybook story.
  • Clear naming, import resolution, and dependency handling to ensure a consistent development workflow.
  • Use when a new UI element is needed in canvas/src/components/ and a ready-made scaffold exists as a pattern to follow.

Quick Start

Copy an existing component folder, rename it to the new component, update index.jsx and component.yml, and adapt the props, slots, and story to the new design.

Frequently Asked Questions about create-component

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?▼

To scaffold a new React component with Storybook integration, copy an existing component folder, rename it, and update index.jsx, component.yml, and the Storybook story to enforce consistent structure and predictable behavior.

What files are required to create a Canvas component?▼

Creating a Canvas component requires an index.jsx file for the React UI element, a component.yml file for configuration, and a matching Storybook story to ensure predictable component behavior and integration.

What is the best way to standardize frontend component templates across teams?▼

Standardizing frontend component templates across teams involves using a repeatable scaffold that enforces required files, naming conventions, and story integration, ensuring consistent UI component behavior in projects.

Does scaffolding a Canvas component require existing templates?▼

Scaffolding a Canvas component requires an existing component folder to copy as a pattern. You rename the copied folder and adapt the props, slots, and story to match the new design requirements.

When do I need to generate a component.yml file for my React UI component?▼

You need to generate a component.yml file when creating a new UI element in canvas/src/components/ to maintain project conventions, define slots, and ensure predictable integration within your React workflow.

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
aziontechaziontech
22

storybook-add-component

Create standardized Storybook stories for Vue components with autodocs and build validation.

Official
Advanced
dinoudondinoudon

component-library

Create reusable UI components with React and Storybook.

Community
Advanced
WesleySmitsWesleySmits
6

scaffolding-react-components

Generate React/Next.js component scaffolds with TypeScript, CSS modules, tests, and Storybook.

Community
Advanced