By hopeoverture
This skill should be used when setting up, configuring, or initializing Tailwind CSS (v3 or v4) and shadcn/ui for Next.js 16 App Router projects. Configure dark mode, design tokens, base layout with header/sidebar, accessibility defaults, and generate example components. Includes comprehensive setup automation, theme customization, and production-ready patterns. Use when the user requests "setup Tailwind", "configure shadcn/ui", "add dark mode", "initialize design system", or "setup UI framework
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Claude Code skills for developing and maintaining worldbuilding applications, built using official Anthropic best practices.
This repository contains custom Claude Code skills designed specifically for web development work on worldbuilding applications. These skills help automate common tasks, enforce best practices, and streamline development workflows.
worldbuilding-app-skills/
├── README.md (this file)
├── QUICKSTART.md (quick start guide)
├── CLAUDE.md (guidance for Claude Code)
├── CATALOG.md (inventory of skills)
├── .claude-plugin/
│ └── marketplace.json - Plugin marketplace manifest
├── plugins/ (plugin format for marketplace)
│ ├── nextjs-fullstack-scaffold/
│ ├── tailwind-shadcn-ui-setup/
│ └── ... (26 total plugins)
├── skills/ (organized by purpose)
│ ├── development/ - Code generation, refactoring, patterns
│ ├── data-modeling/ - Entity schemas, relationships, validation
│ ├── ui-components/ - Component generation, styling
│ ├── documentation/ - API docs, user guides, comments
│ ├── testing/ - Unit tests, integration tests, e2e tests
│ └── utilities/ - Helpers, formatters, tools
├── scripts/ (skill management tools)
│ ├── init_skill.py - Initialize new skill structure
│ ├── quick_validate.py - Validate skill structure
│ ├── package_skill.py - Package for distribution
│ └── migrate_to_plugins.py - Convert skills to plugin format
├── dist/ (packaged skills as .zip files)
└── docs/ (additional documentation)
Ask Claude Code:
Create a skill for [what you want to automate]
Claude will follow the official 6-step process:
python scripts/init_skill.py my-skill-name --path skills/development
Then edit the generated SKILL.md and supporting files.
The easiest way to use these skills is through the Claude Code plugin marketplace:
Step 1: Add the marketplace
/plugin marketplace add hopeoverture/worldbuilding-app-skills
Step 2: Install plugins
/plugin install nextjs-fullstack-scaffold@worldbuilding-app-skills
/plugin install tailwind-shadcn-ui-setup@worldbuilding-app-skills
/plugin install form-generator-rhf-zod@worldbuilding-app-skills
Benefits:
See docs/plugin-marketplace-guide.md for complete plugin marketplace documentation.
Quick Deploy to Project:
# Copy to your worldbuilding app's .claude/skills directory
cp -r skills/category/skill-name /path/to/worldbuilding-app/.claude/skills/
Deploy to Personal Use (All Projects):
cp -r skills/category/skill-name ~/.claude/skills/
Deploy from Packaged Zip:
# All skills are pre-packaged in dist/
unzip dist/skill-name.zip -d /path/to/project/.claude/skills/
For Complete Deployment Guide: See docs/skill-deployment-guide.md for detailed instructions, troubleshooting, and best practices.
Code generation, refactoring, architecture patterns, debugging tools for worldbuilding features.
Entity schemas, relationship definitions, validation rules, data transformation utilities.
React component generation, styling patterns, responsive design helpers.
API documentation, user guides, inline comments, architecture docs.
Test generation, coverage analysis, mock data generation, test utilities.
General-purpose tools, formatters, converters, development helpers.
Skills in this repository might help with:
Each skill follows official Anthropic structure:
skill-name/
├── SKILL.md (required - YAML frontmatter + instructions)
└── Bundled Resources (optional)
├── scripts/ - Executable Python/Bash code
├── references/ - Documentation loaded as needed
└── assets/ - Templates/files for output
npx claudepluginhub hopeoverture/worldbuilding-app-skills --plugin tailwind-shadcn-ui-setupGenerate Zod schemas and TypeScript types for forms, API routes, and Server Actions with runtime validation. Use this skill when creating API contracts, validating request/response payloads, generating form schemas, adding input validation to Server Actions or route handlers, or ensuring type safety across client-server boundaries. Trigger terms include zod, schema, validation, API contract, form validation, type inference, runtime validation, parse, safeParse, input validation, request validati
This skill should be used when reviewing shadcn/ui component usage to ensure accessibility, consistency, and proper patterns. Applies when auditing UI code, checking component patterns, reviewing layout structure, identifying component extraction opportunities, or ensuring design system compliance. Trigger terms include audit UI, review components, check shadcn, accessibility audit, component review, UI patterns, design system compliance, layout review, refactor components, extract component.
Adds feature flag support using LaunchDarkly or JSON-based configuration to toggle features in UI components and Server Actions. This skill should be used when implementing feature flags, feature toggles, progressive rollouts, A/B testing, or gating functionality behind configuration. Use for feature flags, feature toggles, LaunchDarkly integration, progressive rollout, canary releases, or conditional features.
This skill should be used when installing and configuring markdown editor functionality using @uiw/react-md-editor. Applies when adding rich text editing, markdown support, WYSIWYG editors, content editing with preview, or text formatting features. Trigger terms include markdown editor, rich text editor, text editor, add markdown, install markdown editor, markdown component, WYSIWYG, content editor, text formatting, editor preview.
This skill should be used when generating React forms with React Hook Form, Zod validation, and shadcn/ui components. Applies when creating entity forms, character editors, location forms, data entry forms, or any form requiring client and server validation. Trigger terms include create form, generate form, build form, React Hook Form, RHF, Zod validation, form component, entity form, character form, data entry, form schema.
Expert shadcn/ui with Radix UI and Base UI detection, component patterns, registries, theming, and migration
Tailwind v4 theming and shadcn/ui component installation, customisation, and recipes.
Build React UIs with shadcn/ui — the open-code component system. Covers 58+ components (Base UI and Radix variants), CLI commands, components.json configuration, CSS variable theming (OKLCH), framework installation (Next.js, Vite, Astro, Remix, Laravel, Gatsby, TanStack), registry system, form patterns (React Hook Form, TanStack Form, Server Actions), dark mode, RTL, and monorepo setup.
ShadcnBlocks integration with intelligent block selection. Uses multi-dimensional tagging (layout, tone, goal, media, interaction) and guided 1-2 question flow to recommend the best-fit blocks from 1,338 premium blocks and 1,189 free components.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.