ワンクリックでManusで任意のスキルを実行

raiden-panel-standards

スター1

フォーク0

更新日2026年5月19日 16:56

Standards for RaidenShinBoot admin panel work. Use for React 19, Refine v4, Tailwind CSS v4, Hono typed client integration, runtime status UX, resource tables, dashboard components, and panel validation.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

XueHua-s

XueHua-s/RaidenShinBoot

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Raiden Panel Standards

Use this as the default skill for packages/panel work.

Architecture

React entry: src/main.tsx
Workbench UI: src/App.tsx
API boundary: src/lib/apiClient.ts
Refine data boundary: src/lib/dataProvider.ts
Reusable panel primitives: src/components/*
Styling: Tailwind CSS v4 via src/styles.css

API Integration

Use hc<AppType> from hono/client; import AppType from @raiden/server/app.
Do not duplicate server response types when the typed client can infer them.
If adding a new resource, update:
1. server route
2. shared schema/type if cross-package
3. panel data provider
4. panel UI state

Refine Rules

Keep Refine as the data orchestration layer, not the visual design system.
Data provider should adapt API payloads to Refine's { data, total } shape.
Keep generic casting at the data-provider boundary only; avoid spreading casts through UI components.

UI/UX Rules

Admin panel is a workbench, not a landing page.
Prioritize dense but readable status, data, and actions.
Every data surface should cover loading, empty, error, and disabled states.
Environment faults such as missing DATABASE_URL should be explicit and non-spammy.
Use lucide-react icons for buttons and status affordances.
Keep cards to actual repeated items, panels, and tool surfaces; avoid nested decorative card stacks.
Text should fit on mobile and desktop; test narrow width after layout changes.

React Performance

Prefer derived values during render over effect-driven mirrored state.
Use primitive dependencies for hooks where possible.
Avoid defining components inside components.
Load skills/vercel-react-best-practices/SKILL.md for performance or bundle work.

Validation

Type check: pnpm --filter @raiden/panel check
Build: pnpm --filter @raiden/panel build
Dev: pnpm --filter @raiden/panel dev
If route types changed, also run pnpm --filter @raiden/server check.
For visual/layout changes, verify desktop and mobile screenshots against the running Vite app.

このリポジトリの他の Skills

同じリポジトリ

plan-task

XueHua-s/RaidenShinBoot

Refine, parallelize, and verify a draft task specification into a fully planned implementation-ready task. Also triggered by SDD模式, sdd:plan, or /plan-task.

2026-05-211

zustand

XueHua-s/RaidenShinBoot

LobeHub Zustand store conventions: public/internal/dispatch action layers, optimistic update pattern, slice composition via `flattenActions`, and class-based action migration. Use whenever working under `src/store/**`, adding a `createXxxSlice`, writing `internal_*` or `internal_dispatch*` actions, designing `messagesMap`/`topicsMap` reducers, refactoring a `StateCreator` object slice into a `XxxActionImpl` class, or debugging stale store reads. Triggers on `useChatStore`/`useUserStore`/`useGlobalStore`, `createStore`, `flattenActions`, `StoreSetter`, `internal_dispatch`, 'add an action', 'zustand selector', 'store slice', 'class action', 'optimistic update'.

2026-05-211

raiden-project-spec

XueHua-s/RaidenShinBoot

Guard cross-package architecture for RaidenShinBoot. Use when changes affect API contracts, bot/server conversation behavior, Drizzle schema, vector memory, shared persona logic, environment variables, or validation gates.

2026-05-201

raiden-project-structure

XueHua-s/RaidenShinBoot

Navigate the RaidenShinBoot TypeScript monorepo. Use for package ownership, entry points, workspace scripts, dependency placement, environment files, and validation command selection across shared, database, server, bot, and panel.

2026-05-201

plan-task

XueHua-s/RaidenShinBoot

Refine, parallelize, and verify a draft task specification into a fully planned implementation-ready task. Also triggered by SDD模式, sdd:plan, or /plan-task.

2026-05-191

Raiden Panel Standards

Use this as the default skill for packages/panel work.

Architecture

React entry: src/main.tsx

Workbench UI: src/App.tsx

API boundary: src/lib/apiClient.ts

Refine data boundary: src/lib/dataProvider.ts

Reusable panel primitives: src/components/*

Styling: Tailwind CSS v4 via src/styles.css

API Integration

Use hc<AppType> from hono/client; import AppType from @raiden/server/app.

Do not duplicate server response types when the typed client can infer them.

If adding a new resource, update:

server route
shared schema/type if cross-package
panel data provider
panel UI state

Refine Rules

Keep Refine as the data orchestration layer, not the visual design system.

Data provider should adapt API payloads to Refine's { data, total } shape.

Keep generic casting at the data-provider boundary only; avoid spreading casts through UI components.

UI/UX Rules

Admin panel is a workbench, not a landing page.

Prioritize dense but readable status, data, and actions.

Every data surface should cover loading, empty, error, and disabled states.

Environment faults such as missing DATABASE_URL should be explicit and non-spammy.

Use lucide-react icons for buttons and status affordances.

Keep cards to actual repeated items, panels, and tool surfaces; avoid nested decorative card stacks.

Text should fit on mobile and desktop; test narrow width after layout changes.

React Performance

Prefer derived values during render over effect-driven mirrored state.

Use primitive dependencies for hooks where possible.

Avoid defining components inside components.

Load skills/vercel-react-best-practices/SKILL.md for performance or bundle work.

Validation

Type check: pnpm --filter @raiden/panel check

Build: pnpm --filter @raiden/panel build

Dev: pnpm --filter @raiden/panel dev

If route types changed, also run pnpm --filter @raiden/server check.

For visual/layout changes, verify desktop and mobile screenshots against the running Vite app.

name	raiden-panel-standards
description	Standards for RaidenShinBoot admin panel work. Use for React 19, Refine v4, Tailwind CSS v4, Hono typed client integration, runtime status UX, resource tables, dashboard components, and panel validation.