メニュー
Add a Dutchy Design System component with its Bun SSR JSX, optional vanilla JavaScript behavior, demo route, registry entry, documentation, styling source, and focused verification.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/skitsanos/dutchy-design-system --skill dutchy-new-componentコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
| name | dutchy-new-component |
| description | Add a Dutchy Design System component with its Bun SSR JSX, optional vanilla JavaScript behavior, demo route, registry entry, documentation, styling source, and focused verification. |
Create the complete component integration while following current repository patterns.
Before editing, read:
AGENTS.md.src/components/.src/routes/components/.src/components/componentRegistry.ts.public/assets/js/ when interactivity is required.docs/01-design-system/components/.Infer naming, props, category, and script requirements from those sources unless the user specified them.
Create only the files the component needs:
src/components/<ComponentName>/index.tsx for server-rendered JSX.public/assets/js/<component>.js when browser behavior is required.src/routes/components/<route-id>/index.tsx for meaningful states and variants.src/components/componentRegistry.ts with exact script dependencies.docs/01-design-system/components/<route-id>.md and relevant component indexes.Keep SSR JSX free of React hooks and JSX event handlers. Wire behavior through stable data-* or ID contracts and vanilla JavaScript. Match accessible names, keyboard behavior, ARIA state, and focus behavior to the interaction.
Reuse existing Dutchy components in demo routes when they represent the intended control or layout. Raw semantic elements remain appropriate when no component equivalent exists.
Put design tokens and custom component CSS in src/styles/dutchy.css. Never edit or commit public/assets/css/styles.css; it is generated by the build.
Confirm that registry IDs, route paths, script paths, and client selectors agree. Run:
bun run buildbun run lintbun run typecheckbun test ./testsFor visual or interactive components, inspect the demo route in the browser at desktop and mobile sizes and check the console for errors.
Report the files changed, behavior added, checks run, and any remaining limitations.