new-windows-forms-component
Generates Windows Forms-inspired Astro components, including demo mdx pages and navigation integration.
Install
mkdir -p .claude/skills/new-windows-forms-component && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16710" && unzip -o skill.zip -d .claude/skills/new-windows-forms-component && rm skill.zipInstalls to .claude/skills/new-windows-forms-component
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Windows Forms風のAstroコンポーネントとデモページを一貫性を持って自動生成します。コンポーネント名を指定すると、.astroファイル、デモページ、ナビゲーションリンクを自動作成します。Key capabilities
- →Generate Windows Forms-style Astro components
- →Create corresponding demo pages
- →Add navigation links for new components
- →Define TypeScript interfaces for Props
- →Implement Windows Forms-style CSS
How it works
The skill prompts for a component name, then generates an Astro component file with specific styling, a demo page, and adds a navigation link to the BaseLayout.
Inputs & outputs
When to use new-windows-forms-component
- →Creating retro UI components
- →Scaffolding component demos
- →Adding UI components to navigation
About this skill
新規Windows Formsコンポーネント作成
このスキルは、Windows Forms風のAstroコンポーネントとそのデモページを一貫性を持って自動生成します。
実行手順
-
ユーザーにコンポーネント名を質問
- 「作成したいコンポーネント名を入力してください（例: Slider, ListView, DatePicker）」
- コンポーネント名はPascalCaseで受け取る
-
コンポーネントファイルの作成
- ファイルパス:
src/components/ui/{ComponentName}.astro - 以下の要素を含める：
- TypeScriptインターフェースでProps定義（JSDocコメント付き）
- デフォルト値の設定（分割代入）
<slot>による子要素の受け取り- Windows Forms風のスタイル：
font-family: 'Segoe UI', Tahoma, sans-serif- グラデーション背景（
linear-gradient） - 立体的なボーダー（
border: 1px solid #adadad） - ホバー、アクティブ、無効化状態の実装
- フォーカススタイル（
outline: 1px dotted #000）
- 既存コンポーネント（Button.astro等）を参考にする
- ファイルパス:
-
デモページの作成
- ファイルパス:
src/pages/{componentname}-demo.mdx - 内容：
BaseLayoutをimportして使用- コンポーネントをimport
- タイトル（h1）とコンポーネントの説明
- 使用例セクション（複数のバリエーション）
- Props一覧表（マークダウンテーブル形式）
- 既存デモページ（button-demo.mdx等）を参考にする
- ファイルパス:
-
ナビゲーションへの追加
src/layouts/BaseLayout.astroのnavセクションにリンクを追加- 形式:
<a href="/{componentname}-demo">{日本語名}</a> - アルファベット順または適切な位置に挿入
-
確認
- 作成したファイルの内容をユーザーに報告
npm run devで動作確認するよう提案
注意事項
- コンポーネント名は必ずPascalCaseで統一
- デモページのファイル名は小文字のkebab-case
- 日本語のドキュメントを作成
- Windows Formsのデザインパターンに厳密に従う
- 既存コンポーネントとの一貫性を保つ
When not to use it
- →When not creating Astro components
- →When not aiming for a Windows Forms aesthetic
- →When not needing demo pages or navigation updates
Limitations
- →Component names must be PascalCase
- →Demo page filenames are lowercase kebab-case
- →Strictly follows Windows Forms design patterns
How it compares
This workflow automates the consistent creation of UI components, their documentation, and navigation integration, ensuring adherence to a specific design pattern and project structure.
Compared to similar skills
new-windows-forms-component side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| new-windows-forms-component (this skill) | 0 | 9mo | No flags | Beginner |
| threejs-shaders | 4 | 7mo | No flags | Advanced |
| huskarui | 1 | 2mo | Review | Intermediate |
| webf-native-ui | 1 | 7mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
threejs-shaders
CloudAI-X
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
huskarui
mengps
Expert on HuskarUI components. Queries metadata for documentation and examples. Works with or without Python.
webf-native-ui
openwebf
Setup and use WebF's Cupertino UI library to build native iOS-style UIs with pre-built components instead of crafting everything with HTML/CSS. Use when building iOS apps, adding native UI components, or improving UI performance.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
anthropic-frontend-design
chaibuilder
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
threejs-postprocessing
CloudAI-X
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.