design-skills

Apply the 60-30-10 color rule to UI design, design systems, and color palette decisions. Use this skill whenever the user asks about: choosing a color palette for an app or website, why their UI looks "off" or too colorful, how to pick accent colors, designing a dark or light mode theme, structuring CSS color variables/tokens, visual hierarchy problems, or wants to apply cinematic color grading principles to product design. Also trigger when the user says things like "what colors should I use", "my design feels cluttered or chaotic", "how do I make my CTA pop", "help me with my design system colors", "nothing feels cohesive", or "how do I pick a palette". Trigger even on casual references to app color schemes, brand colors, or visual hierarchy — the user doesn't need to name the rule for this skill to apply.

Design-system inspector and /preview page builder for React and Next.js projects. Scans the real codebase to extract CSS variables, discover components, detect the framework, and build a polished /preview route — all without hallucinating colors, tokens, or component APIs. Use this skill whenever the user asks to build a UI preview, component catalog, design-system audit, or /preview page. Also triggers on requests to extract design tokens, audit styles, catalog components, update an existing preview, or any mention of "capy". Subcommands: /capy (or /capy preview), /capy design-system, /capy update.

Add a self-hosted, no-database CMS to a Next.js (App Router) site, where a password-protected /editor page lets a non-technical user edit site content and images, and every save commits to GitHub and auto-triggers a Vercel deploy. Use this whenever the user wants an admin/editor page, a content editor, an in-app CMS, editable site copy, a "let my client edit the site" setup, or content stored in GitHub instead of a database — even if they don't say the word "CMS". Pairs with the setup-owner-deploy-trigger skill for the Vercel free-plan cross-account deploy fix (CMS commits as one GitHub account, Vercel project connected to a different/owner account). Replicates the editor + GitHub storage pattern into any Next.js project.

Configure or audit a GitHub Actions workflow that turns non-owner pushes into an owner-authored empty commit and optionally triggers a Vercel deploy hook. Use when Codex needs to set up this pattern in any repository, port the workflow between repos, verify that owner empty-commit automation is working, or explain/fix failures involving OWNER_GIT_PAT, VERCEL_DEPLOY_HOOK_URL, skipped owner-triggered runs, GitHub Actions push loops, branch protection, or Vercel deployments that only deploy from owner commits.