Initial commit

skills/nextjs-react-implementation/assets/templates/component.tsx.template

@@ -0,0 +1,33 @@
+/**
+ * {{COMPONENT_NAME}}
+ *
+ * {{COMPONENT_DESCRIPTION}}
+ *
+ * @category {{ATOMIC_CATEGORY}}
+ */
+
+import React from 'react';
+
+export interface {{COMPONENT_NAME}}Props {
+  /**
+   * {{PROP_DESCRIPTION}}
+   */
+  {{PROP_NAME}}{{PROP_OPTIONAL}}: {{PROP_TYPE}};
+}
+
+/**
+ * {{COMPONENT_NAME}} component
+ *
+ * {{USAGE_EXAMPLE}}
+ */
+export const {{COMPONENT_NAME}} = ({
+  {{PROPS_DESTRUCTURED}}
+}: {{COMPONENT_NAME}}Props) => {
+  return (
+    <{{ROOT_ELEMENT}} className="{{TAILWIND_CLASSES}}">
+      {{COMPONENT_CONTENT}}
+    </{{ROOT_ELEMENT}}>
+  );
+};
+
+{{COMPONENT_NAME}}.displayName = '{{COMPONENT_NAME}}';

skills/nextjs-react-implementation/assets/templates/storybook.tsx.template

@@ -0,0 +1,39 @@
+/**
+ * {{COMPONENT_NAME}} の Storybook ストーリー
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { {{COMPONENT_NAME}} } from './{{COMPONENT_NAME}}';
+
+const meta = {
+  title: '{{ATOMIC_CATEGORY}}/{{COMPONENT_NAME}}',
+  component: {{COMPONENT_NAME}},
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    {{ARG_TYPES}}
+  },
+} satisfies Meta<typeof {{COMPONENT_NAME}}>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * デフォルトの {{COMPONENT_NAME}}
+ */
+export const Default: Story = {
+  args: {
+    {{DEFAULT_ARGS}}
+  },
+};
+
+/**
+ * {{VARIANT_DESCRIPTION}}
+ */
+export const {{VARIANT_NAME}}: Story = {
+  args: {
+    {{VARIANT_ARGS}}
+  },
+};

skills/nextjs-react-implementation/assets/templates/test.tsx.template

@@ -0,0 +1,34 @@
+/**
+ * {{COMPONENT_NAME}} のテスト
+ */
+
+import { describe, it, expect } from 'vitest';
+import { page } from '@vitest/browser/context';
+import { render } from 'vitest-browser-react';
+import { {{COMPONENT_NAME}} } from './{{COMPONENT_NAME}}';
+
+describe('{{COMPONENT_NAME}}', () => {
+  it('正しくレンダリングされること', async () => {
+    // Arrange
+    const props = {
+      {{TEST_PROPS}}
+    };
+
+    // Act
+    await render(<{{COMPONENT_NAME}} {...props} />);
+
+    // Assert
+    {{TEST_ASSERTIONS}}
+  });
+
+  it('{{TEST_CASE_DESCRIPTION}}', async () => {
+    // Arrange
+    {{TEST_ARRANGE}}
+
+    // Act
+    {{TEST_ACT}}
+
+    // Assert
+    {{TEST_ASSERT}}
+  });
+});