codingbuddy-rules 4.4.0 → 5.0.0

package/.ai-rules/skills/frontend-design/examples/component-template.tsx

@@ -0,0 +1,203 @@
+/**
+ * Distinctive React Component Template
+ *
+ * This template demonstrates a production-grade React component
+ * with intentional design choices that avoid generic AI aesthetics.
+ *
+ * Key patterns:
+ * - CSS variables for theming consistency
+ * - Staggered reveal animations
+ * - Fluid typography with clamp()
+ * - Accessible focus management
+ * - Motion library integration (optional)
+ */
+
+import { type ReactNode, type HTMLAttributes, forwardRef } from 'react';
+
+// ─── Types ───────────────────────────────────────────────
+
+interface FeatureCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Card title — displayed as the main heading */
+  title: string;
+  /** Supporting description text */
+  description: string;
+  /** Icon or visual element displayed above the title */
+  icon?: ReactNode;
+  /** Visual variant controlling the color scheme */
+  variant?: 'default' | 'accent' | 'muted';
+  /** Stagger delay index for entrance animation (0-based) */
+  staggerIndex?: number;
+}
+
+// ─── Component ───────────────────────────────────────────
+
+export const FeatureCard = forwardRef<HTMLDivElement, FeatureCardProps>(
+  function FeatureCard(
+    {
+      title,
+      description,
+      icon,
+      variant = 'default',
+      staggerIndex = 0,
+      className = '',
+      style,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        className={`feature-card feature-card--${variant} ${className}`}
+        style={{
+          '--stagger-delay': `${staggerIndex * 0.1}s`,
+          ...style,
+        } as React.CSSProperties}
+        {...rest}
+      >
+        {icon && <div className="feature-card__icon">{icon}</div>}
+        <h3 className="feature-card__title">{title}</h3>
+        <p className="feature-card__description">{description}</p>
+      </div>
+    );
+  },
+);
+
+// ─── Styles (CSS Module or global stylesheet) ────────────
+
+/*
+Use a separate .module.css file in production. Inline styles shown
+here for template completeness.
+
+.feature-card {
+  --card-bg: var(--color-surface-raised, hsl(0 0% 98%));
+  --card-border: var(--color-border, hsl(0 0% 90%));
+  --card-radius: 1rem;
+
+  position: relative;
+  padding: clamp(1.5rem, 3vw, 2.5rem);
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--card-radius);
+
+  /* Staggered entrance animation */
+  opacity: 0;
+  animation: card-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: var(--stagger-delay);
+
+  /* Hover interaction */
+  transition:
+    transform 0.25s cubic-bezier(0.33, 1, 0.68, 1),
+    box-shadow 0.25s ease,
+    border-color 0.25s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--color-primary, hsl(230 65% 50%));
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.05),
+    0 10px 15px -3px rgba(0, 0, 0, 0.07);
+}
+
+.feature-card:active {
+  transform: translateY(-1px);
+  transition-duration: 0.1s;
+}
+
+.feature-card:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 3px;
+}
+
+/* --- Variants --- */
+
+.feature-card--accent {
+  --card-bg: hsl(var(--hue-accent, 350) 80% 97%);
+  --card-border: hsl(var(--hue-accent, 350) 60% 85%);
+}
+
+.feature-card--muted {
+  --card-bg: hsl(0 0% 96%);
+  --card-border: transparent;
+}
+
+/* --- Children --- */
+
+.feature-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  margin-bottom: 1rem;
+  border-radius: 0.75rem;
+  background: var(--color-primary-light, hsl(230 65% 95%));
+  color: var(--color-primary, hsl(230 65% 50%));
+  font-size: 1.25rem;
+}
+
+.feature-card__title {
+  margin: 0 0 0.5rem;
+  font-family: var(--font-display, 'Playfair Display', serif);
+  font-size: clamp(1.125rem, 0.9rem + 0.5vw, 1.375rem);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--color-text, hsl(0 0% 12%));
+}
+
+.feature-card__description {
+  margin: 0;
+  font-family: var(--font-body, 'Source Sans 3', sans-serif);
+  font-size: var(--text-base, 1rem);
+  line-height: 1.6;
+  color: var(--color-text-muted, hsl(0 0% 45%));
+}
+
+/* --- Animation --- */
+
+@keyframes card-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(1.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .feature-card {
+    animation: none;
+    opacity: 1;
+  }
+  .feature-card:hover {
+    transform: none;
+  }
+}
+*/
+
+// ─── Usage Example ───────────────────────────────────────
+
+/*
+import { FeatureCard } from './FeatureCard';
+import { Zap, Shield, Palette } from 'lucide-react';
+
+export function FeaturesSection() {
+  const features = [
+    { icon: <Zap />, title: 'Lightning Fast', description: 'Sub-100ms response times.' },
+    { icon: <Shield />, title: 'Secure by Default', description: 'Zero-trust architecture.' },
+    { icon: <Palette />, title: 'Fully Themeable', description: 'CSS variable driven.' },
+  ];
+
+  return (
+    <section className="features-grid">
+      {features.map((f, i) => (
+        <FeatureCard key={f.title} {...f} staggerIndex={i} />
+      ))}
+    </section>
+  );
+}
+*/

package/.ai-rules/skills/frontend-design/references/css-patterns.md

@@ -0,0 +1,243 @@
+# CSS Design Patterns Reference
+
+Reusable CSS patterns for building distinctive, production-grade interfaces. These patterns avoid generic "AI slop" aesthetics and prioritize intentional design choices.
+
+## Typography Systems
+
+### Font Pairing Strategy
+
+```css
+/* Display + Body pairing — choose contrast, not similarity */
+:root {
+  --font-display: 'Playfair Display', serif;      /* Headlines: high personality */
+  --font-body: 'Source Sans 3', sans-serif;        /* Body: high readability */
+  --font-mono: 'JetBrains Mono', monospace;        /* Code: developer-friendly */
+}
+
+/* Typographic scale (Major Third — ratio 1.25) */
+:root {
+  --text-xs:  0.64rem;   /* 10.24px */
+  --text-sm:  0.8rem;    /* 12.8px  */
+  --text-base: 1rem;     /* 16px    */
+  --text-md:  1.25rem;   /* 20px    */
+  --text-lg:  1.563rem;  /* 25px    */
+  --text-xl:  1.953rem;  /* 31.25px */
+  --text-2xl: 2.441rem;  /* 39px    */
+  --text-3xl: 3.052rem;  /* 48.83px */
+}
+```
+
+### Fluid Typography
+
+```css
+/* Responsive type that scales smoothly between breakpoints */
+h1 {
+  font-size: clamp(2rem, 1rem + 3vw, 4rem);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+p {
+  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
+  line-height: 1.65;
+  max-width: 65ch; /* Optimal reading width */
+}
+```
+
+## Color Systems
+
+### HSL-Based Theme Tokens
+
+```css
+/* HSL gives intuitive control over lightness/saturation variants */
+:root {
+  --hue-primary: 230;
+  --hue-accent: 350;
+
+  --color-primary: hsl(var(--hue-primary), 65%, 50%);
+  --color-primary-light: hsl(var(--hue-primary), 65%, 95%);
+  --color-primary-dark: hsl(var(--hue-primary), 65%, 30%);
+
+  --color-accent: hsl(var(--hue-accent), 80%, 55%);
+
+  --color-surface: hsl(0, 0%, 100%);
+  --color-surface-raised: hsl(0, 0%, 98%);
+  --color-text: hsl(0, 0%, 12%);
+  --color-text-muted: hsl(0, 0%, 45%);
+}
+
+/* Dark mode — adjust lightness, not hue */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-primary: hsl(var(--hue-primary), 70%, 65%);
+    --color-surface: hsl(0, 0%, 8%);
+    --color-surface-raised: hsl(0, 0%, 14%);
+    --color-text: hsl(0, 0%, 92%);
+    --color-text-muted: hsl(0, 0%, 60%);
+  }
+}
+```
+
+## Layout Patterns
+
+### Asymmetric Grid
+
+```css
+/* Break the 12-column monotony */
+.asymmetric-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: clamp(1.5rem, 3vw, 4rem);
+}
+
+/* Overlap elements for depth */
+.overlap-layout {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+.overlap-layout > .primary {
+  grid-column: 1 / 9;
+  grid-row: 1;
+}
+.overlap-layout > .accent {
+  grid-column: 7 / 13;
+  grid-row: 1;
+  margin-top: 4rem; /* Intentional offset */
+  z-index: 1;
+}
+```
+
+### Container Queries
+
+```css
+/* Component-level responsive design */
+.card-container {
+  container-type: inline-size;
+  container-name: card;
+}
+
+@container card (min-width: 400px) {
+  .card { flex-direction: row; }
+  .card__image { width: 40%; }
+}
+
+@container card (min-width: 700px) {
+  .card { gap: 2rem; }
+  .card__image { width: 50%; }
+}
+```
+
+## Motion & Animation
+
+### Staggered Reveal
+
+```css
+/* Page load animation with staggered children */
+@keyframes reveal-up {
+  from {
+    opacity: 0;
+    transform: translateY(1.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stagger-reveal > * {
+  opacity: 0;
+  animation: reveal-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.stagger-reveal > *:nth-child(1) { animation-delay: 0.1s; }
+.stagger-reveal > *:nth-child(2) { animation-delay: 0.2s; }
+.stagger-reveal > *:nth-child(3) { animation-delay: 0.3s; }
+.stagger-reveal > *:nth-child(4) { animation-delay: 0.4s; }
+```
+
+### Hover Interactions
+
+```css
+/* Magnetic lift with shadow depth */
+.interactive-card {
+  transition:
+    transform 0.25s cubic-bezier(0.33, 1, 0.68, 1),
+    box-shadow 0.25s ease;
+}
+
+.interactive-card:hover {
+  transform: translateY(-4px);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.06),
+    0 10px 15px -3px rgba(0, 0, 0, 0.08),
+    0 20px 25px -5px rgba(0, 0, 0, 0.04);
+}
+
+.interactive-card:active {
+  transform: translateY(-1px);
+  transition-duration: 0.1s;
+}
+```
+
+## Background & Texture
+
+### Gradient Mesh
+
+```css
+/* Multi-stop gradient for organic feel */
+.gradient-mesh {
+  background:
+    radial-gradient(ellipse at 20% 50%, hsla(200, 80%, 70%, 0.3), transparent 50%),
+    radial-gradient(ellipse at 80% 20%, hsla(340, 80%, 70%, 0.2), transparent 50%),
+    radial-gradient(ellipse at 50% 80%, hsla(260, 60%, 60%, 0.25), transparent 50%),
+    hsl(0, 0%, 98%);
+}
+```
+
+### Noise Texture Overlay
+
+```css
+/* Subtle grain for depth — use a tiny noise PNG or SVG data URI */
+.grain-overlay::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
+  pointer-events: none;
+  z-index: 1;
+}
+```
+
+## Utility Patterns
+
+### Accessible Focus Styles
+
+```css
+/* Visible focus ring that works on any background */
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+
+/* Remove default outline only when :focus-visible is supported */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+```
+
+### Scroll-Triggered Animations
+
+```css
+/* Native CSS scroll-driven animations (modern browsers) */
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(2rem); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.scroll-reveal {
+  animation: fade-in-up linear both;
+  animation-timeline: view();
+  animation-range: entry 0% entry 40%;
+}
+```