사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/rasengan-dev/agent-skills --skill rasengan-ecosystem시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
Rasengan.js Ecosystem Package Patterns
When to Activate
- Adding state management with
@rasenganjs/kurama - Optimizing images with
@rasenganjs/image - Implementing light/dark/system theming with
@rasenganjs/theme - Adding internationalization with
@rasenganjs/i18n - Setting up MDX content with
@rasenganjs/mdx - Creating guided product tours with
@rasenganjs/kage-demo
State Management — @rasenganjs/kurama
ts
import { createStore } from '@rasenganjs/kurama';
const useStore = createStore(({ set }) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
reset: () => set({ count: 0 }),
}));
// In a component:
function Counter() {
const count = useStore(state => state.count);
const increment = useStore(state => state.increment);
return <button onClick={increment}>{count}</button>;
}
// Subscribe to multiple values:
const { count, increment } = useStore();Rules:
- Create stores outside components to avoid re-creation on re-render
- Use selectors (
useStore(state => state.count)) for granular subscriptions and to avoid unnecessary re-renders - Call
set()with a partial state or updater function (Zustand-like API)
Image Optimization — @rasenganjs/image
tsx
import { Image } from '@rasenganjs/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
placeholder="blur" // or "wave"
lazy // enable lazy loading
/>Rules:
- Always provide
widthandheightto prevent Cumulative Layout Shift (CLS) - Use
placeholder="blur"for production — generates a blurred placeholder - Use
placeholder="wave"for a lighter, animated wave placeholder - Use
lazyprop to defer offscreen images (recommended for most images) - Import from
@rasenganjs/image, not a generic<img>tag
Theming — @rasenganjs/theme
tsx
import { ThemeProvider, useTheme } from '@rasenganjs/theme';
// Wrap in root App component:
<ThemeProvider defaultTheme="system">
<Component router={AppRouter}>{children}</Component>
</ThemeProvider>
// In any component:
function ThemeToggle() {
const { theme, setTheme } = useTheme();
return (
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
{theme === 'dark' ? '☀️' : '🌙'}
</button>
);
}Rules:
- Wrap at the App root level (inside
src/main.tsx) defaultTheme="system"respects OS preference (recommended)- Theme is persisted to
localStorageautomatically useTheme()returns{ theme, setTheme, toggleTheme }
Internationalization — @rasenganjs/i18n
tsx
import { I18nProvider, useLocale, useTranslation } from '@rasenganjs/i18n';
// Wrap in root App component:
<I18nProvider defaultLocale="en" locales={['en', 'fr', 'de']}>
<Component router={AppRouter}>{children}</Component>
</I18nProvider>
// Translate in components:
function Greeting() {
const { t } = useTranslation();
return <h1>{t('welcome')}</h1>;
}
// Switch locale:
function LocaleSwitcher() {
const { locale, setLocale } = useLocale();
return (
<select value={locale} onChange={e => setLocale(e.target.value)}>
<option value="en">English</option>
<option value="fr">Français</option>
</select>
);
}Rules:
- Locale is auto-detected from URL by default;
setLocaleupdates the URL - Use flat key structures for translation files (e.g.,
{ "welcome": "Hello" }) - Wrap
I18nProviderat the App root, insidesrc/main.tsx useTranslation()loads translations for the current locale automatically
Guided Tours — @rasenganjs/kage-demo
Creates interactive step-by-step tours and onboarding experiences:
tsx
import KageDemoContainer, {
useKageDemo,
KageDemoStep,
} from '@rasenganjs/kage-demo';
import Step01 from '@/components/demo/step-01';
import Step02 from '@/components/demo/step-02';
const steps: KageDemoStep[] = [
{
target: '#get-started',
render: (props) => <Step01 {...props} />,
},
{
target: '#end',
render: (props) => <Step02 {...props} />,
},
];
export default function Page() {
const props = useKageDemo(steps);
return (
<section>
<KageDemoContainer {...props} />
<button id="get-started">Get Started</button>
<button onClick={props.start}>Start tour</button>
<p id="end">End demo</p>
</section>
);
}Step Component Props
ts
interface StepProps {
next: () => void; // go to next step
prev: () => void; // go to previous step
end: () => void; // end the tour
}Core API
| API | Description |
|---|---|
KageDemoContainer | Main container — renders overlay and spotlight on the target element |
useKageDemo(steps) | Hook that initializes the tour system. Returns { start, end, ... } |
KageDemoStep | { target: string; render: React.FC<StepProps> } — CSS selector + step component |
Rules:
- Define steps with a
targetCSS selector and a customrendercomponent for each step - Each step component receives
next,prev,endcallbacks for navigation - Call
props.startto begin the tour (e.g., from a "Start tour" button) - The container renders a spotlight effect over the target element automatically
- Steps are type-safe with full TypeScript inference
Rules:
@rasenganjs/kage-demouses CSS selectors for element targeting — ensure target IDs/classes exist in the DOM- All ecosystem packages require
"type": "module"inpackage.json
