| name | ui-website |
| description | Design guidance for React websites with CSS-based theming. Covers typography (Google Fonts), color palettes via CSS variables, motion/animation, accessibility (WCAG 2.1 AA), backgrounds, responsive layout, and aesthetic mood mapping. Use for public-facing and portal-style websites. For Fluent UI v9 business apps, use the `ui-fluentui-react` skill instead. Triggers on "website design", "website theming", "google fonts", "css variables", "design aesthetics", "website ui", "website styling", "react website", "css theming", "design system", "website accessibility", "web typography", "color palette", "css animation", "responsive layout", "dark mode", "light mode", "theme toggle", "useTheme", "theme tokens", "theme switching". |
| user-invocable | false |
Website UI — React Design & Theming
You are an expert in designing and styling React websites with CSS-based theming. This skill covers typography, color, motion, accessibility, responsive layout, and aesthetic direction for public-facing and portal-style websites.
When to use this skill vs ui-fluentui-react:
- This skill (
ui-website): Public-facing websites, marketing sites, portals, Power Pages code sites — uses CSS variables, Google Fonts, custom color palettes, CSS animations.
ui-fluentui-react: Enterprise/business apps, internal tools, Power Apps Code Apps — uses @fluentui/react-components, makeStyles, design tokens.
Resources
| Resource | Content |
|---|
resources/theming.md | CSS variables architecture, dark/light mode, useTheme hook, theme toggle, custom themes |
resources/design-aesthetics.md | Font, color, motion, accessibility, and layout guidance |
resources/design-application.md | Step-by-step process for applying design to a React website |
Load the relevant resource when working on website design and theming tasks.
Core Principles
- CSS variables for theming — Define all colors, fonts, and spacing as CSS custom properties in
:root. Never hardcode values in components.
- Google Fonts for typography — Choose distinctive, beautiful fonts. Never use generic defaults (Inter, Roboto, Open Sans, Arial).
- Semantic HTML for accessibility — Use
<header>, <nav>, <main>, <section>, <footer>. Meet WCAG 2.1 AA standards.
- Motion with purpose — CSS animations for high-impact moments (page load reveals, hover states). Respect
prefers-reduced-motion.
- Responsive by default — Use CSS flex/grid with
gap, container max-widths, and @media queries.
- React-only — All component patterns use React with TypeScript. No multi-framework abstractions.
Quick Reference — CSS Variable Structure
Every website should define these CSS variables in a global stylesheet:
:root {
--font-heading: '<Display Font>', sans-serif;
--font-body: '<Body Font>', sans-serif;
--font-mono: '<Mono Font>', monospace;
--color-primary: <hex>;
--color-secondary: <hex>;
--color-accent: <hex>;
--color-bg: <hex>;
--color-surface: <hex>;
--color-text: <hex>;
--color-text-muted: <hex>;
--color-border: <hex>;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
}
Quick Reference — Aesthetic x Mood Mapping
| Aesthetic | Mood | Font Direction | Color Direction | Motion Direction |
|---|
| Minimal & Clean | Professional | IBM Plex Sans + JetBrains Mono | Neutral with one sharp accent | Subtle fades, minimal |
| Minimal & Clean | Creative | Space Grotesk + Crimson Pro | Muted pastels with pop accent | Smooth reveals |
| Bold & Vibrant | Professional | Cabinet Grotesk + Fira Code | Strong primary + contrasting accent | Confident slide-ins |
| Bold & Vibrant | Creative | Clash Display + Bricolage Grotesque | Saturated complementary pair | Energetic staggers |
| Dark & Moody | Technical | JetBrains Mono + Space Grotesk | Dark base (IDE-inspired) + neon accent | Terminal-style fades |
| Dark & Moody | Elegant | Playfair Display + Source Sans 3 | Deep charcoals + gold/copper accent | Slow, cinematic reveals |
| Warm & Organic | Professional | Newsreader + IBM Plex Sans | Earth tones + warm accent | Gentle eases |
| Warm & Organic | Creative | Fraunces + Satoshi | Terracotta/sage/cream palette | Organic, springy motion |
Cross-Skill References
| Need | Skill |
|---|
| Fluent UI v9 components for business apps | ../ui-fluentui-react/SKILL.md |
| Power Pages site creation & deployment | ../power-pages/SKILL.md |
| Vite + React project structure | ../vite-react/SKILL.md |
