Menu
When you are creating or modifying UI components. Use this skill to ensure consistency with the design system and shadcn/ui.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
When you need to understand the project's core mandate, operational rules, or "Constitution". Use this skill to align with the project's identity and strict coding standards.
Database design principles and decision-making. Schema design, indexing strategy, ORM selection, serverless databases.
When you need to modify the database schema, run migrations, or deploy Supabase changes. Use this for all SQL and Supabase-related tasks.
When you are working on the Tiptap v3 block editor. Use this for extending the editor, adding nodes, or debugging rich text issues.
When you need to run tasks, build projects, or understand the workspace graph using Nx. Use this for all build, lint, and test operations.
When you need to understand the directory structure, open-core model, or where to add new code.
Based on SOC occupation classification
| name | component-development |
| description | When you are creating or modifying UI components. Use this skill to ensure consistency with the design system and shadcn/ui. |
libs/ui.libs/ui CANNOT depend on apps/nextblock. It must remain publishable as a standalone package.libs/ui)src/lib/: All UI components — both base Shadcn/UI components (Button, Input, etc.) and custom complex components live here as flat files.src/styles/globals.css: Tailwind configuration and global styles.src/styles/: Additional CSS files (theme, typography, animations, base, components).libs/ui/src/lib/<Name>.tsx.libs/ui/src/index.ts.nx lint ui to verify.apps/nextblock/components/.className with Tailwind utility classes.cn() utility from @nextblock-cms/utils for conditional class merging.'use client' at the top if using hooks (useState, useEffect) or event listeners.