npm - mumucc - Versions diffs - 0.4.4 → 0.4.10 - Mend

mumucc 0.4.4 → 0.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (688) hide show

package/defaults/plugin-seed/marketplaces/claude-code-workflows/plugins/ui-design/skills/visual-design-foundations/references/typography-systems.md ADDED Viewed

@@ -0,0 +1,432 @@
+# Typography Systems Reference
+## Type Scale Construction
+### Modular Scale
+A modular scale creates harmonious relationships between font sizes using a mathematical ratio.
+```tsx
+// Common ratios
+const RATIOS = {
+  minorSecond: 1.067, // 16:15
+  majorSecond: 1.125, // 9:8
+  minorThird: 1.2, // 6:5
+  majorThird: 1.25, // 5:4
+  perfectFourth: 1.333, // 4:3
+  augmentedFourth: 1.414, // √2
+  perfectFifth: 1.5, // 3:2
+  goldenRatio: 1.618, // φ
+};
+function generateScale(
+  baseSize: number,
+  ratio: number,
+  steps: number,
+): number[] {
+  const scale: number[] = [];
+  for (let i = -2; i <= steps; i++) {
+    scale.push(Math.round(baseSize * Math.pow(ratio, i) * 100) / 100);
+  }
+  return scale;
+}
+// Generate a scale with 16px base and perfect fourth ratio
+const typeScale = generateScale(16, RATIOS.perfectFourth, 6);
+// Result: [9, 12, 16, 21.33, 28.43, 37.9, 50.52, 67.34, 89.76]
+```
+### CSS Custom Properties
+```css
+:root {
+  /* Base scale using perfect fourth (1.333) */
+  --font-size-2xs: 0.563rem; /* ~9px */
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-base: 1rem; /* 16px */
+  --font-size-md: 1.125rem; /* 18px */
+  --font-size-lg: 1.333rem; /* ~21px */
+  --font-size-xl: 1.5rem; /* 24px */
+  --font-size-2xl: 1.777rem; /* ~28px */
+  --font-size-3xl: 2.369rem; /* ~38px */
+  --font-size-4xl: 3.157rem; /* ~50px */
+  --font-size-5xl: 4.209rem; /* ~67px */
+  /* Font weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  /* Line heights */
+  --line-height-tight: 1.1;
+  --line-height-snug: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+  /* Letter spacing */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+}
+```
+## Font Loading Strategies
+### FOUT Prevention
+```css
+/* Use font-display to control loading behavior */
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter-Variable.woff2") format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap; /* Show fallback immediately, swap when loaded */
+}
+/* Optional: size-adjust for better fallback matching */
+@font-face {
+  font-family: "Inter Fallback";
+  src: local("Arial");
+  size-adjust: 107%; /* Adjust to match Inter metrics */
+  ascent-override: 90%;
+  descent-override: 22%;
+  line-gap-override: 0%;
+}
+body {
+  font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
+}
+```
+### Preloading Critical Fonts
+```html
+<head>
+  <!-- Preload critical fonts -->
+  <link
+    rel="preload"
+    href="/fonts/Inter-Variable.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+  />
+</head>
+```
+### Variable Fonts
+```css
+/* Variable font with weight and width axes */
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter-Variable.woff2") format("woff2");
+  font-weight: 100 900;
+  font-stretch: 75% 125%;
+}
+/* Use font-variation-settings for fine control */
+.custom-weight {
+  font-variation-settings:
+    "wght" 450,
+    "wdth" 95;
+}
+/* Or use standard properties */
+.semi-expanded {
+  font-weight: 550;
+  font-stretch: 110%;
+}
+```
+## Responsive Typography
+### Fluid Type Scale
+```css
+/* Using clamp() for responsive sizing */
+h1 {
+  /* min: 32px, preferred: 5vw + 16px, max: 64px */
+  font-size: clamp(2rem, 5vw + 1rem, 4rem);
+  line-height: 1.1;
+}
+h2 {
+  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
+  line-height: 1.2;
+}
+p {
+  font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
+  line-height: 1.6;
+}
+/* Fluid line height */
+.fluid-text {
+  --min-line-height: 1.3;
+  --max-line-height: 1.6;
+  --min-vw: 320;
+  --max-vw: 1200;
+  line-height: calc(
+    var(--min-line-height) + (var(--max-line-height) - var(--min-line-height)) *
+      ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))
+  );
+}
+```
+### Viewport-Based Scaling
+```tsx
+// Tailwind config for responsive type
+module.exports = {
+  theme: {
+    fontSize: {
+      xs: ["0.75rem", { lineHeight: "1rem" }],
+      sm: ["0.875rem", { lineHeight: "1.25rem" }],
+      base: ["1rem", { lineHeight: "1.5rem" }],
+      lg: ["1.125rem", { lineHeight: "1.75rem" }],
+      xl: ["1.25rem", { lineHeight: "1.75rem" }],
+      "2xl": ["1.5rem", { lineHeight: "2rem" }],
+      "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+      "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
+      "5xl": ["3rem", { lineHeight: "1" }],
+    },
+  },
+};
+// Component with responsive classes
+function Heading({ children }) {
+  return (
+    <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight">
+      {children}
+    </h1>
+  );
+}
+```
+## Readability Guidelines
+### Optimal Line Length
+```css
+/* Optimal reading width: 45-75 characters */
+.prose {
+  max-width: 65ch; /* ~65 characters */
+}
+/* Narrower for callouts */
+.callout {
+  max-width: 50ch;
+}
+/* Wider for code blocks */
+pre {
+  max-width: 80ch;
+}
+```
+### Vertical Rhythm
+```css
+/* Establish baseline grid */
+:root {
+  --baseline: 1.5rem; /* 24px at 16px base */
+}
+/* All margins should be multiples of baseline */
+h1 {
+  font-size: 2.5rem;
+  line-height: calc(var(--baseline) * 2);
+  margin-top: calc(var(--baseline) * 2);
+  margin-bottom: var(--baseline);
+}
+h2 {
+  font-size: 2rem;
+  line-height: calc(var(--baseline) * 1.5);
+  margin-top: calc(var(--baseline) * 1.5);
+  margin-bottom: calc(var(--baseline) * 0.5);
+}
+p {
+  font-size: 1rem;
+  line-height: var(--baseline);
+  margin-bottom: var(--baseline);
+}
+```
+### Text Wrapping
+```css
+/* Prevent orphans and widows */
+p {
+  text-wrap: pretty; /* Experimental: improves line breaks */
+  widows: 3;
+  orphans: 3;
+}
+/* Balance headings */
+h1,
+h2,
+h3 {
+  text-wrap: balance;
+}
+/* Prevent breaking in specific elements */
+.no-wrap {
+  white-space: nowrap;
+}
+/* Hyphenation for justified text */
+.justified {
+  text-align: justify;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+}
+```
+## Font Pairing Guidelines
+### Contrast Pairings
+```css
+/* Serif heading + Sans body */
+:root {
+  --font-heading: "Playfair Display", Georgia, serif;
+  --font-body: "Source Sans Pro", -apple-system, sans-serif;
+}
+/* Geometric heading + Humanist body */
+:root {
+  --font-heading: "Space Grotesk", sans-serif;
+  --font-body: "IBM Plex Sans", sans-serif;
+}
+/* Modern sans heading + Classic serif body */
+:root {
+  --font-heading: "Inter", system-ui, sans-serif;
+  --font-body: "Georgia", Times, serif;
+}
+```
+### Superfamily Approach
+```css
+/* Single variable font family for all uses */
+:root {
+  --font-family: "Inter", system-ui, sans-serif;
+}
+h1 {
+  font-family: var(--font-family);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+p {
+  font-family: var(--font-family);
+  font-weight: 400;
+  letter-spacing: 0;
+}
+.caption {
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+```
+## Semantic Typography Classes
+```css
+/* Text styles by purpose, not appearance */
+.text-display {
+  font-size: var(--font-size-5xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
+}
+.text-headline {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+}
+.text-title {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+}
+.text-body {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+}
+.text-body-sm {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+}
+.text-caption {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-normal);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+}
+.text-overline {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-normal);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-widest);
+}
+```
+## OpenType Features
+```css
+/* Enable advanced typography features */
+.fancy-text {
+  /* Small caps */
+  font-variant-caps: small-caps;
+  /* Ligatures */
+  font-variant-ligatures: common-ligatures;
+  /* Numeric features */
+  font-variant-numeric: tabular-nums lining-nums;
+  /* Fractions */
+  font-feature-settings: "frac" 1;
+}
+/* Tabular numbers for aligned columns */
+.data-table td {
+  font-variant-numeric: tabular-nums;
+}
+/* Old-style figures for body text */
+.prose {
+  font-variant-numeric: oldstyle-nums;
+}
+/* Discretionary ligatures for headings */
+.fancy-heading {
+  font-variant-ligatures: discretionary-ligatures;
+}
+```

package/defaults/plugin-seed/marketplaces/claude-code-workflows/plugins/ui-design/skills/web-component-design/SKILL.md ADDED Viewed

@@ -0,0 +1,271 @@
+---
+name: web-component-design
+description: Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
+---
+# Web Component Design
+Build reusable, maintainable UI components using modern frameworks with clean composition patterns and styling approaches.
+## When to Use This Skill
+- Designing reusable component libraries or design systems
+- Implementing complex component composition patterns
+- Choosing and applying CSS-in-JS solutions
+- Building accessible, responsive UI components
+- Creating consistent component APIs across a codebase
+- Refactoring legacy components into modern patterns
+- Implementing compound components or render props
+## Core Concepts
+### 1. Component Composition Patterns
+**Compound Components**: Related components that work together
+```tsx
+// Usage
+<Select value={value} onChange={setValue}>
+  <Select.Trigger>Choose option</Select.Trigger>
+  <Select.Options>
+    <Select.Option value="a">Option A</Select.Option>
+    <Select.Option value="b">Option B</Select.Option>
+  </Select.Options>
+</Select>
+```
+**Render Props**: Delegate rendering to parent
+```tsx
+<DataFetcher url="/api/users">
+  {({ data, loading, error }) =>
+    loading ? <Spinner /> : <UserList users={data} />
+  }
+</DataFetcher>
+```
+**Slots (Vue/Svelte)**: Named content injection points
+```vue
+<template>
+  <Card>
+    <template #header>Title</template>
+    <template #content>Body text</template>
+    <template #footer><Button>Action</Button></template>
+  </Card>
+</template>
+```
+### 2. CSS-in-JS Approaches
+| Solution              | Approach               | Best For                          |
+| --------------------- | ---------------------- | --------------------------------- |
+| **Tailwind CSS**      | Utility classes        | Rapid prototyping, design systems |
+| **CSS Modules**       | Scoped CSS files       | Existing CSS, gradual adoption    |
+| **styled-components** | Template literals      | React, dynamic styling            |
+| **Emotion**           | Object/template styles | Flexible, SSR-friendly            |
+| **Vanilla Extract**   | Zero-runtime           | Performance-critical apps         |
+### 3. Component API Design
+```tsx
+interface ButtonProps {
+  variant?: "primary" | "secondary" | "ghost";
+  size?: "sm" | "md" | "lg";
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+```
+**Principles**:
+- Use semantic prop names (`isLoading` vs `loading`)
+- Provide sensible defaults
+- Support composition via `children`
+- Allow style overrides via `className` or `style`
+## Quick Start: React Component with Tailwind
+```tsx
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-blue-600 text-white hover:bg-blue-700",
+        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",
+        ghost: "hover:bg-gray-100 hover:text-gray-900",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  },
+);
+interface ButtonProps
+  extends
+    ComponentPropsWithoutRef<"button">,
+    VariantProps<typeof buttonVariants> {
+  isLoading?: boolean;
+}
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, isLoading, children, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(buttonVariants({ variant, size }), className)}
+      disabled={isLoading || props.disabled}
+      {...props}
+    >
+      {isLoading && <Spinner className="mr-2 h-4 w-4" />}
+      {children}
+    </button>
+  ),
+);
+Button.displayName = "Button";
+```
+## Framework Patterns
+### React: Compound Components
+```tsx
+import { createContext, useContext, useState, type ReactNode } from "react";
+interface AccordionContextValue {
+  openItems: Set<string>;
+  toggle: (id: string) => void;
+}
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+function useAccordion() {
+  const context = useContext(AccordionContext);
+  if (!context) throw new Error("Must be used within Accordion");
+  return context;
+}
+export function Accordion({ children }: { children: ReactNode }) {
+  const [openItems, setOpenItems] = useState<Set<string>>(new Set());
+  const toggle = (id: string) => {
+    setOpenItems((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+  return (
+    <AccordionContext.Provider value={{ openItems, toggle }}>
+      <div className="divide-y">{children}</div>
+    </AccordionContext.Provider>
+  );
+}
+Accordion.Item = function AccordionItem({
+  id,
+  title,
+  children,
+}: {
+  id: string;
+  title: string;
+  children: ReactNode;
+}) {
+  const { openItems, toggle } = useAccordion();
+  const isOpen = openItems.has(id);
+  return (
+    <div>
+      <button onClick={() => toggle(id)} className="w-full text-left py-3">
+        {title}
+      </button>
+      {isOpen && <div className="pb-3">{children}</div>}
+    </div>
+  );
+};
+```
+### Vue 3: Composables
+```vue
+<script setup lang="ts">
+import { ref, computed, provide, inject, type InjectionKey } from "vue";
+interface TabsContext {
+  activeTab: Ref<string>;
+  setActive: (id: string) => void;
+}
+const TabsKey: InjectionKey<TabsContext> = Symbol("tabs");
+// Parent component
+const activeTab = ref("tab-1");
+provide(TabsKey, {
+  activeTab,
+  setActive: (id: string) => {
+    activeTab.value = id;
+  },
+});
+// Child component usage
+const tabs = inject(TabsKey);
+const isActive = computed(() => tabs?.activeTab.value === props.id);
+</script>
+```
+### Svelte 5: Runes
+```svelte
+<script lang="ts">
+  interface Props {
+    variant?: 'primary' | 'secondary';
+    size?: 'sm' | 'md' | 'lg';
+    onclick?: () => void;
+    children: import('svelte').Snippet;
+  }
+  let { variant = 'primary', size = 'md', onclick, children }: Props = $props();
+  const classes = $derived(
+    `btn btn-${variant} btn-${size}`
+  );
+</script>
+<button class={classes} {onclick}>
+  {@render children()}
+</button>
+```
+## Best Practices
+1. **Single Responsibility**: Each component does one thing well
+2. **Prop Drilling Prevention**: Use context for deeply nested data
+3. **Accessible by Default**: Include ARIA attributes, keyboard support
+4. **Controlled vs Uncontrolled**: Support both patterns when appropriate
+5. **Forward Refs**: Allow parent access to DOM nodes
+6. **Memoization**: Use `React.memo`, `useMemo` for expensive renders
+7. **Error Boundaries**: Wrap components that may fail
+## Common Issues
+- **Prop Explosion**: Too many props - consider composition instead
+- **Style Conflicts**: Use scoped styles or CSS Modules
+- **Re-render Cascades**: Profile with React DevTools, memo appropriately
+- **Accessibility Gaps**: Test with screen readers and keyboard navigation
+- **Bundle Size**: Tree-shake unused component variants