This skill should be used when the user asks about "dark theme for report site", "presentation website styling", "report-to-web design system", "professional dark theme", "site theme tokens", "interactive component styling", "customize report website colors", "report site accessibility", "shadcn theme", "tailwind tokens", or needs guidance on the dark professional visual design system used by report-to-web generated sites, including color palettes, typography, spacing, animation patterns, responsive design, accessibility, component styling, and theme/registry selection.
Generates dark professional design systems for report websites using Tailwind CSS v4 and shadcn/ui components.
/plugin marketplace add reggiechan74/cc-plugins/plugin install report-to-web@cc-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/registry-guide.mdreferences/tokens-reference.mdApply a distinctive dark professional visual identity to generated research report websites using Tailwind CSS v4 + shadcn/ui. This design system creates sites that feel like a premium data terminal crossed with a high-end law publication — dense with information yet elegant and readable.
Tone: Sophisticated, authoritative, data-rich. Think Bloomberg Terminal meets The Economist's digital edition.
Differentiation: The signature element is the warm amber accent system against deep cool backgrounds — every interactive element glows with intention. Typography pairs a refined serif display face with a crisp humanist sans-serif body, creating tension between editorial authority and modern clarity.
Theme System: Color accents are swappable via theme presets (8 built-in options) or community registries, while layout, typography, and animations remain consistent.
Colors are defined as Tailwind @theme tokens in app.css and can be overridden by theme preset CSS files. Use Tailwind utility classes for all color references — never hardcode color values.
bg-bg-primary → #0f1117 Deep space — main background
bg-bg-secondary → #161922 Elevated surface — cards, panels
bg-bg-tertiary → #1c1f2e Recessed areas — code blocks, inputs
bg-bg-hover → #232738 Hover state for interactive surfaces
text-text-primary → #e8e6e1 Warm white — body text
text-text-secondary → #9a9690 Muted warm — secondary text, labels
text-text-tertiary → #5e5a55 Dim — disabled text, timestamps
text-accent-primary → #d4a853 Amber gold — primary actions, highlights
text-accent-secondary → #2d9e8f Teal — secondary interactive elements
text-accent-tertiary → #6366f1 Indigo — links, tertiary actions
border-border-primary → #2a2d3a Subtle borders between sections
border-border-accent → rgba(212, 168, 83, 0.2) Amber border at 20% opacity
These map to the dark theme by default and are overridden by theme presets:
--color-primary → accent-primary (gold by default)
--color-primary-foreground → bg-primary
--color-secondary → bg-tertiary
--color-muted → bg-tertiary
--color-muted-foreground → text-secondary
--color-destructive → error
--color-border → border-primary
--color-ring → accent-primary
Load from Google Fonts:
font-display → "DM Serif Display", Georgia, serif — Elegant, authoritative seriffont-body → "IBM Plex Sans", "Helvetica Neue", sans-serif — Crisp, professionalfont-mono → "IBM Plex Mono", "Consolas", monospace — Clean monospace for numbersfont-display text-text-primary with tracking-tightfont-body text-text-primary with leading-[1.7] max-w-[72ch]text-xs uppercase tracking-wide text-text-secondaryfont-mono text-accent-primary tabular-numsitalic text-text-secondary border-l-3 border-l-accent-primary bg-bg-secondaryUse Tailwind's spacing scale. Key layout patterns:
mb-16p-5 or space-y-5py-4 (maps to --tab-bar-height: 4rem)px-6max-w-[var(--max-content-width)] (1200px), centered with mx-autoAll components use Tailwind utility classes + shadcn UI primitives. Import cn from @/lib/utils for conditional class merging.
bg-bg-secondaryborder-b border-border-primarytext-accent-primary + animated indicator via bg-gradient-tab-indicatortext-text-tertiary hover:text-text-secondaryglass shadow-lg utility classtext-sm font-medium uppercase tracking-[0.08em]Button variant="outline"Card / CardContent componentsborder-l-3 border-l-accent-primary bg-gradient-gold-subtle shadow-mdborder-l-3 border-l-accent-secondary bg-gradient-teal-subtle shadow-mdwhileHover={{ y: -2 }}Input with font-mono bg-bg-primary border-border-primary shadow-insetfocus-visible:border-accent-primary focus-visible:ring-[rgba(212,168,83,0.15)]Label with text-xs uppercase tracking-wide text-text-secondarySeparator with bg-border-primaryfont-mono text-[length:var(--font-size-hero)] text-accent-primary tabular-nums<input type="range"> with .scenario-slider CSS class (custom styling in app.css)Table, TableHeader, TableBody, TableHead, TableRow, TableCellbg-bg-tertiary text-xs uppercase tracking-wide font-semiboldbackground: var(--color-bg-hover)Button with variant togglingtext-accent-primary + subtle gradient backgroundCollapsible + Badgefont-mono text-xs text-accent-tertiary in a shadcn Badge variant="outline"border-l-3 border-l-accent-tertiarytext-accent-tertiary text-xs font-mono bg-bg-tertiary with hover liftAccordion, AccordionItem, AccordionTrigger, AccordionContentInput with pl-12 font-mono shadow-insetButton variant="outline"Badge variant="outline" with semantic color classestext-success border-[rgba(52,211,153,0.25)]text-warning border-[rgba(251,191,36,0.25)]text-info border-[rgba(96,165,250,0.25)]Use framer-motion for React. Animation tokens are in src/theme/motion.js. Keep animations purposeful and restrained.
opacity: 0 → 1, y: 8 → 0AnimatePresence with mode="wait" for clean tab switchesuseInView and staggered delays (50ms between siblings)opacity: 0 → 1, y: 16 → 0, 400mswhileHover={{ y: -2 }}whileTap={{ scale: 0.95 }}Defined in app.css via @utility blocks:
bg-gradient-surface — Surface gradient (secondary → tertiary)
bg-gradient-gold-subtle — Calculator background tint
bg-gradient-teal-subtle — Scenario slider background tint
bg-gradient-timeline — Timeline line gradient (gold → teal → indigo)
bg-gradient-tab-indicator — Tab underline gradient (gold → teal)
bg-gradient-hero-text — Hero title text gradient
bg-gradient-accent-line — 60px heading accent line
glass — Glassmorphism (bg + backdrop-filter)
scrollbar-none — Hide scrollbar
Mobile: < 768px
Tablet: 768px - 1023px
Desktop: >= 1024px
overflow-x-auto scrollbar-none)--font-size-hero: 2.5rem on mobilepx-4px-6role="tablist" and role="tab"focus-visible: with accent-primary outline)prefers-reduced-motion — all durations reduced to 0.01msaria-hidden="true" with descriptive text nearby<nav>, <main>, <header>, <section>Note: This design system is dark-mode only by design. Light mode is not supported. The dark professional aesthetic is core to the brand identity of generated report sites.
8 built-in color presets are available in ${CLAUDE_PLUGIN_ROOT}/templates/src/themes/. Each overrides only semantic color tokens, leaving layout and animation intact. See ${CLAUDE_PLUGIN_ROOT}/skills/design-system/references/registry-guide.md for details.
For framer-motion animation tokens, see ${CLAUDE_PLUGIN_ROOT}/templates/src/theme/motion.js.
For the Tailwind v4 stylesheet with all tokens, see ${CLAUDE_PLUGIN_ROOT}/templates/src/app.css.
For the full token definitions, see ${CLAUDE_PLUGIN_ROOT}/skills/design-system/references/tokens-reference.md.
For registry/theme selection, see ${CLAUDE_PLUGIN_ROOT}/skills/design-system/references/registry-guide.md.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.