skills.rest
RavitejaKarra24
RavitejaKarra24COMMUNITY
Explore all skills by this author →
𝕏@RavitejaKarra24GitHub

brand-design

Generate and apply brand color palettes, typography, and gradients to shadcn-based frontend projects.

Updated Mar 12, 2026
Search Tags:#typography#brand identity#color palette#tailwind#shadcn#oklch#wcag contrast
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill brand-design-ravitejakarra24
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-design
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/agents/.agents/skills/brand-design
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill brand-design-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Starting frontend work on a freshly scaffolded project often means shipping with the default shadcn neutral theme and no real brand identity. This Skill runs a structured brand pass — palette, typography, gradients, and tone/voice — so a project gets a coherent, WCAG-compliant visual identity before component work begins. ## Core Features & Use Cases - Interactive palette selection: Generates 6 candidate palettes (3 curated from a recipe library, 3 algorithmically derived in OKLCH) and renders them as a visual HTML preview opened in the browser, with a contextual mini-UI (wallet, swap, staking, NFT, dashboard, social) matching the product category. - Full theme application: Writes the chosen palette as shadcn CSS variables for light and dark mode into app/globals.css (with automatic backup), wires typography via next/font/google, and optionally derives brand gradients as Tailwind utilities. - Persistent brand artifact: Writes a brand.md file to the project root capturing palette tokens, contrast ratios, typography, and tone/voice guidance for future sessions and other skills. - Use Case: After scaffolding a Next.js DeFi dashboard, ask for brand colors; the skill interviews you about category and mood, shows 6 palette previews of your actual dashboard UI in the browser, then applies your pick with verified WCAG AA contrast. ## Quick Start Ask the agent to pick brand colors and generate a palette for your newly scaffolded Next.js project before starting frontend work.

Frequently Asked Questions about brand-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a brand color palette for a Next.js shadcn project?▼

Run the brand-design skill before starting component work. It interviews you about product category and mood, generates 6 candidate palettes, and opens an HTML preview in your browser showing your actual product UI in each palette. Pick one by number and it writes the shadcn tokens to app/globals.css.

How does the skill ensure color palette accessibility?▼

Every palette is verified against WCAG AA contrast rules before being shown: 4.5:1 for body text and 3.0:1 for large text and icons, across all shadcn foreground/background pairs in both light and dark modes. Failing pairs are auto-adjusted in OKLCH lightness or the palette is regenerated.

Does the brand palette work in both light and dark mode?▼

Yes. Light and dark token sets are derived from the same 5 OKLCH seed colors so both modes feel like the same brand. The HTML preview includes a light/dark toggle, and the applied globals.css contains both :root and .dark token blocks.

What happens if I already have a brand.md file in my project?▼

The skill checks for an existing brand.md first. A deferred placeholder is replaced automatically, but a real palette triggers a confirmation prompt offering to keep it, back it up to brand.md.bak and replace it, or tweak it with variations around the current palette.

Can I use this skill with a project that is not Next.js and Tailwind?▼

Yes, but the apply step adapts. Instead of writing shadcn tokens to globals.css and wiring next/font, the skill writes the palette to brand.md only and explains how to map the tokens into your stack manually.

What if none of the 6 generated palettes fit my brand?▼

The regenerate loop has no iteration limit. You can ask for variations of a specific palette, shift the mood with adjectives like cooler or more minimal, or reset entirely. The loop continues until you explicitly pick one or quit.

Related Skills

Explore More Design & Creative Skills→
spike-land-aispike-land-ai

shadcn-ui

Implement accessible shadcn/ui components in React/Next.js projects.

Official
Advanced
bharthraj1412bharthraj1412

design-guide

Coordinate the creation of UI components and ensure consistent styling across Paperclip projects with this design system reference guide.

Community
Intermediate
ihlamuryihlamury
73

planetscale-ui-skills

Enforce Planetscale UI design tokens, dark mode, Inter font, and 4px grid.

Community
Intermediate
mikemikulamikemikula
2

tailwind-shadcn-setup

Configure Tailwind v4 and shadcn/ui dark-mode styling in Next.js projects.

Community
Intermediate