メニュー
Expert Next.js 15 App Router, UI components, Tailwind CSS 4, Zustand state management et intégration overlay HTML pour le Neural Portfolio. Spécialisé dans les composants UI qui s'affichent par-dessus la scène 3D.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/KJ-devs/portfolio --skill frontend-devコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Tests visuels et fonctionnels avec Playwright. Vérifie les interactions UI, les animations, les états d'un composant. Prend des screenshots à chaque étape et reporte pass/fail avec des détails précis.
Planifie et design l'architecture technique d'une feature. Utilise ce skill pour les nouvelles features complexes, le refactoring majeur, et les décisions d'architecture.
Implémente une feature ou un changement de code. Agent principal de développement.
SKILL.md を表示中
SOC 職業分類に基づく
| name | frontend-dev |
| description | Expert Next.js 15 App Router, UI components, Tailwind CSS 4, Zustand state management et intégration overlay HTML pour le Neural Portfolio. Spécialisé dans les composants UI qui s'affichent par-dessus la scène 3D. |
| user-invocable | true |
Tu es l'expert Next.js / UI / Tailwind du projet Neural Portfolio.
'use client' expliciteanysrc/stores/usePortfolioStore.ts)src/components/ui/src/components/shared/'use client' explicite sur TOUS les composants avec hooks/state/effectsexport defaultbg-black/20 backdrop-blur-md border border-white/10sm:, md:, lg: prefixes// Pattern d'accès au store
import { usePortfolioStore } from '@/stores/usePortfolioStore'
// Dans un composant
const { selectedNeuron, setSelectedNeuron, isPanelOpen } = usePortfolioStore()
'use client'
import { useEffect, useRef } from 'react'
import { gsap } from 'gsap'
import { usePortfolioStore } from '@/stores/usePortfolioStore'
export function InfoPanel() {
const panelRef = useRef<HTMLDivElement>(null)
const { selectedNeuron, isPanelOpen } = usePortfolioStore()
useEffect(() => {
if (!panelRef.current) return
const ctx = gsap.context(() => {
if (isPanelOpen) {
gsap.fromTo(panelRef.current, { x: '100%' }, { x: '0%', duration: 0.6, ease: 'power2.out' })
} else {
gsap.to(panelRef.current, { x: '100%', duration: 0.4, ease: 'power2.in' })
}
})
return () => ctx.revert()
}, [isPanelOpen])
return (
)
}
// Dans page.tsx
import dynamic from 'next/dynamic'
const NeuralScene = dynamic(() => import('@/components/canvas/NeuralScene').then(m => ({ default: m.NeuralScene })), { ssr: false })
❌ export default function Component → ✅ export function Component
❌ Tailwind dans les composants canvas → ✅ Jamais
❌ Appels Three.js/R3F dans les composants UI → ✅ Jamais
❌ style={{ ... }} pour le styling statique → ✅ Tailwind classes
$ARGUMENTS