Rules and conventions for building React components in this repo (composition pattern, no logic in component body, styling tokens, file layout, etc.). Read this before writing or editing any component.
EnglishPort a component from the HTML reference (digital-go-jp/design-system-example-components-html) to this React + Storybook project.
EnglishRun the pre-completion checks before declaring a task done. Executes lint, markup lint, build (tsc), tests, and reminds the user to verify Storybook visually.
EnglishAuthor component documentation in this project. Docs live inside the component's .stories.tsx (Storybook autodocs), translated from the HTML reference's MDX structure into JSX, in Japanese.
EnglishIncludes Component Rules, Port HTML to React, Pre Completion Check, and other workflows.
Supported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Component Rules
Rules and conventions for building React components in this repo (composition pattern, no logic in component body, styling tokens, file layout, etc.). Read this before writing or editing any component.
Port HTML to React
Port a component from the HTML reference (digital-go-jp/design-system-example-components-html) to this React + Storybook project.
Pre Completion Check
Run the pre-completion checks before declaring a task done. Executes lint, markup lint, build (tsc), tests, and reminds the user to verify Storybook visually.
Write Component Docs
Author component documentation in this project. Docs live inside the component's .stories.tsx (Storybook autodocs), translated from the HTML reference's MDX structure into JSX, in Japanese.
Quick start
- Choose your skills. Select individual skills above, or choose the entire pack.
- Copy the install prompt. Use Copy install prompt above the list.
- Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.
Try it with your agent
After installation, start with a request like:
Use the Component Rules skill to help with my task.
Ask me for the context you need before getting started.Requirements & license
- A coding agent that can access your project files and install skills.
- Your agent checks each skill’s instructions, dependencies, and permissions during setup.
- Reported license for the skills shown: MIT. The author’s terms apply.