hakushun/frontend-component
.cursor/skills/frontend-component/SKILL.md
新規 React コンポーネントの追加手順。コンポーネント追加時や「Button を追加して」と依頼されたときに使用する。
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add hakushun/ai-dev-starter frontend-componentInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 1:21 PM8.9s1 file scanned
SKILL.md
- name:
- frontend-component
- description:
- 新規 React コンポーネントの追加手順。コンポーネント追加時や「Button を追加して」と依頼されたときに使用する。
新規コンポーネント追加
手順
- 配置:
src/components/<Name>.tsxにファイルを作成。関数コンポーネントで、props は型付きで定義する。 - スタイル: Tailwind のユーティリティクラスを使用する。
- ストーリー:
src/components/<Name>.stories.tsxを作成。Jotai を使う場合はProviderとcreateStore()でデコレータをかける。 - 単体テスト:
src/components/<Name>.test.tsxを作成。within(render(...).container)でクエリをスコープする。Jotai 利用時はProviderでラップする。 - export: 必要に応じて
src/components/index.tsなどから re-export する。
ひな形
- コンポーネント: 関数、props 型、return で JSX。
- ストーリー:
Meta<typeof Component>,StoryObj,Defaultストーリーを 1 つ。 - テスト:
describe,it,render+within(container)で 1 件以上。
Related Skills
hakushun/web-design-guidelines
development
VerifiedTrustedCommunity
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
SKILL.mdUpdated Apr 16, 2026
hakushun/vitest
development
VerifiedTrustedCommunity
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
SKILL.mdUpdated Apr 16, 2026
hakushun/vite
tools
VerifiedTrustedCommunity
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
SKILL.mdUpdated Apr 16, 2026
hakushun/vercel-react-best-practices
development
VerifiedTrustedCommunity
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
SKILL.mdUpdated Apr 16, 2026