diff --git a/packages/frontend/src/components/MkAbuseReportResolver.stories.impl.ts b/packages/frontend/src/components/MkAbuseReportResolver.stories.impl.ts
new file mode 100644
index 0000000000..d68457f699
--- /dev/null
+++ b/packages/frontend/src/components/MkAbuseReportResolver.stories.impl.ts
@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import MkAbuseReportResolver from './MkAbuseReportResolver.vue';
+import type { StoryObj } from '@storybook/vue3';
+export const Default = {
+ render(args) {
+ return {
+ components: {
+ MkAbuseReportResolver,
+ },
+ setup() {
+ return {
+ args,
+ };
+ },
+ computed: {
+ props() {
+ return {
+ ...this.args,
+ };
+ },
+ },
+ template: '',
+ };
+ },
+ args: {
+ editable: true,
+ data: {
+ name: 'Sample',
+ targetUserPattern: '^.*@.+$',
+ reporterPattern: null,
+ reportContentPattern: null,
+ expiresAt: 'indefinitely',
+ forward: false,
+ },
+ },
+ parameters: {
+ layout: 'centered',
+ },
+} satisfies StoryObj;