Stats
Actions
Tags
From frontend-skills
Bootstraps a new Redpanda frontend project by running the generic frontend-starter-kit, adding Redpanda-specific env vars, registry workflow, and Chakra UI ban rules.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-skills:redpanda-frontend-kitThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Run **frontend-starter-kit** (14 setup + workflow skills), then add Redpanda tooling.
Run frontend-starter-kit (14 setup + workflow skills), then add Redpanda tooling.
echo "export UI_LIB_DIRS=components/ui|redpanda-ui" >> "$CLAUDE_ENV_FILE"
echo "export REDPANDA_KIT=1" >> "$CLAUDE_ENV_FILE"
REDPANDA_KIT=1 enables registry nudges (useProtoForm, Typography, KeyValueField, registry sync).
if echo "$added_lines" | grep -qE "from\s+['\"]@chakra-ui/"; then
echo '{"suppressOutput":true,"systemMessage":"@chakra-ui/react banned. Use @/components/ui/."}' >&2
exit 2
fi
if echo "$added_lines" | grep -qE "from\s+['\"]@redpanda-data/ui['\"/]"; then
echo '{"suppressOutput":true,"systemMessage":"@redpanda-data/ui legacy (Chakra). Use redpanda-ui registry."}' >&2
exit 2
fi
REDPANDA_KIT=1 in session envnpx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsBuilds React/Next.js web frontends: components, pages, design systems, state management, typed API clients. Uses structured phases and engagement modes.
Bootstraps a complete frontend project with 28+ skills covering toolchain, linting, state management, accessibility, routing, API, testing, and workflows. Use when starting a new frontend project from scratch.
Converts designs and API contracts into React/Next.js component scaffolds with TailwindCSS and typed API hooks.