From chuqlab-css-theme
Applies the Chuqlab brand CSS design system to any Tailwind CSS v4 project. Includes brand color palette, Geist font configuration, and utility classes. Triggers when users ask to theme a project with Chuqlab branding, apply Chuqlab colors, set up a Tailwind v4 theme with brand tokens, create a Chuqlab-styled layout, or need the Chuqlab design system. Also triggers for requests involving navy/red/blue corporate palettes, Geist typography, or CSS custom properties for brand consistency.
npx claudepluginhub human-frontier-labs-inc/human-frontier-labs-marketplace --plugin chuqlab-css-themeThis skill uses the workspace's default tool permissions.
Apply the Chuqlab brand design system to any Tailwind CSS v4 project with consistent colors, typography, and utility classes.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Apply the Chuqlab brand design system to any Tailwind CSS v4 project with consistent colors, typography, and utility classes.
This skill activates when you need to apply or reference the Chuqlab brand design system:
Use this skill when you:
| Token | Hex | Usage |
|---|---|---|
--color-chuqlab-primary | #141246 | Primary navy — headers, primary buttons, key UI elements |
--color-chuqlab-secondary | #EC1848 | Accent red — CTAs, alerts, emphasis elements |
--color-chuqlab-accent | #0842EA | Accent blue — links, info elements, secondary actions |
--color-chuqlab-light | #f0f6ff | Light background — cards, sections, subtle contrast |
--color-chuqlab-dark | #0a0a23 | Dark background — dark mode, footers, overlays |
Primary (Navy):
--color-primary-600: #141246 (base)--color-primary-700: #0d0d30 (darker)--color-primary-50: #f0f6ff (lightest)Secondary (Red):
--color-secondary-600: #EC1848 (base)--color-secondary-700: #c71339 (darker)--color-secondary-50: #fff1f4 (lightest)Accent (Blue):
--color-accent-600: #0842EA (base)--color-accent-700: #0635bb (darker)--color-accent-50: #eff6ff (lightest)Success (Green):
--color-success-700: #027a48 (base)--color-success-50: #ecfdf3 (lightest)The design system uses the Geist font family:
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
Setup with Next.js:
import { GeistSans } from 'geist/font/sans';
import { GeistMono } from 'geist/font/mono';
// In layout.tsx
<html className={`${GeistSans.variable} ${GeistMono.variable}`}>
Setup without Next.js:
@import url('https://fonts.googleapis.com/css2?family=Geist+Sans&family=Geist+Mono&display=swap');
The .background class creates a subtle grid overlay:
.background {
overflow: hidden;
background: #f8f8f8;
background-image: repeating-linear-gradient(
0deg, transparent, transparent 11px, #f2f2f2 11px, #f2f2f2 12px
),
repeating-linear-gradient(
90deg, transparent, transparent 11px, #f2f2f2 11px, #f2f2f2 12px
);
}
Use for: Landing page backgrounds, hero sections, content areas that need subtle texture.
The .mask class applies a fade-in/fade-out mask:
.mask {
mask-image: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,1) 40px,
rgba(0,0,0,1) calc(100% - 20px),
rgba(0,0,0,0) 100%
);
}
Use for: Scrollable content areas, list containers, content that should fade at edges.
Copy assets/globals.css to your project's CSS entry point (e.g., app/globals.css for Next.js).
The theme uses Tailwind CSS v4's @theme directive and @layer system:
@layer theme, base, components, utilities;
@import "tailwindcss";
With Tailwind v4, the theme tokens are available as utilities:
<!-- Background colors -->
<div class="bg-chuqlab-primary">Navy background</div>
<div class="bg-chuqlab-secondary">Red background</div>
<div class="bg-chuqlab-accent">Blue background</div>
<!-- Text colors -->
<h1 class="text-chuqlab-primary">Navy heading</h1>
<span class="text-chuqlab-secondary">Red accent text</span>
<a class="text-chuqlab-accent">Blue link</a>
<!-- Extended palette -->
<div class="bg-primary-50 text-primary-700">Light navy section</div>
<div class="bg-secondary-50 text-secondary-700">Light red alert</div>
<div class="bg-accent-50 text-accent-700">Light blue info</div>
<div class="bg-success-50 text-success-700">Success message</div>
This theme includes a compatibility layer for the border color change in Tailwind v4:
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
This ensures existing components using implicit borders render consistently.
If your project uses Clerk for authentication, the layer order already includes it:
@layer theme, base, clerk, components, utilities;
This prevents style conflicts between Clerk's embedded components and your brand theme.
All color combinations meet WCAG AA contrast requirements:
The full theme CSS is available at assets/globals.css in this plugin directory.