skills.rest
hdkz-dev
hdkz-devCOMMUNITY
Explore all skills by this author →
GitHub

component-triad

Scaffold TSX implementation, tests, and Storybook files for frontend components.

1|Updated Feb 6, 2026
Search Tags:#automation#testing#react#component#storybook#triad
One-click install
npx skills add https://github.com/hdkz-dev/multi-game-engines --skill component-triad
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-triad
Source: https://github.com/hdkz-dev/multi-game-engines/tree/main/.agent/skills/component-triad
Command: npx skills add https://github.com/hdkz-dev/multi-game-engines --skill component-triad

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enforces the project-wide Strict Rule by ensuring that for every component the three essential artifacts—implementation, tests, and Storybook stories—are developed and kept in sync, reducing drift and missed coverage.

Core Features & Use Cases

  • Triad Generation: when creating a new component, ensure the three artifacts exist: a TypeScript/TSX implementation file, a corresponding test file under tests (e.g., Component.test.tsx), and a Storybook story file (e.g., Component.stories.tsx). When modifying a component, verify that related tests and stories are present and up to date.
  • Triad Verification: propose and enable running targeted commands to execute tests for the specific component and validate the presence and consistency of its triad artifacts.
  • Missing Triad Check: scan the repository to surface components missing one or more triad artifacts and surface remediation tasks.

Quick Start

Create a new component and let the Triad system generate the implementation, tests, and Storybook artifacts.

Frequently Asked Questions about component-triad

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

FAQPage Schema
How do I ensure React component tests and Storybook stories are generated together?▼

Component triad automation scaffolds the TSX implementation, test file, and Storybook story simultaneously. It enforces a strict rule requiring all three artifacts for every component, reducing drift and ensuring consistent test coverage across your React project.

What is the best way to find React components missing Storybook stories or test files?▼

A missing triad check scans your repository to surface components lacking implementation, test, or Storybook artifacts. It identifies incomplete component setups and provides remediation tasks to synchronize missing files.

How do I keep Storybook stories in sync when modifying a React component?▼

When modifying a component, the triad system verifies that related tests and stories are present and up to date. It enforces synchronization across the implementation, test, and story files to prevent drift during component updates.

Can I run targeted tests for a specific React component and validate its artifacts?▼

Triad verification proposes and enables running targeted commands to execute tests for specific components. It validates the presence and consistency of the component's implementation, test, and Storybook artifacts.

Do I need Storybook configured to automate React component triad generation?▼

The triad system targets frontend UI workflows and scaffolds Storybook story files alongside component implementations and tests. Storybook is an integral part of the artifact triad, ensuring consistent creation and upkeep of all three files.

Why does my React component workflow have missing test files?▼

Missing test files occur when components are created without enforcing the triad of implementation, tests, and stories. The triad system scans the repository to surface these missing artifacts and provides remediation tasks for complete coverage.

Related Skills

Explore More Software Engineering Skills→
nirukk52nirukk52
1

e2e-testing

Automate ScreenGraph end-to-end UI validation with Playwright and .env configuration.

Community
Intermediate
gaia-reactgaia-react
21

new-component

Scaffold React component structures with Vitest tests and Storybook stories.

Official
Intermediate
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
Dragoon0xDragoon0x
4

storybook

Generate Storybook configuration and story files for React components.

Community
Intermediate