autoworkflow 3.1.5 → 3.5.0

package/.claude/skills/emotion.md

@@ -0,0 +1,426 @@
+# Emotion Skill
+
+## CSS Prop (with @emotion/react)
+\`\`\`tsx
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+// String styles
+const containerStyle = css\`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+\`;
+
+// Object styles
+const buttonStyle = css({
+  padding: '0.5rem 1rem',
+  background: '#3b82f6',
+  color: 'white',
+  border: 'none',
+  borderRadius: '0.375rem',
+  cursor: 'pointer',
+  '&:hover': {
+    background: '#2563eb',
+  },
+});
+
+// Usage with css prop
+function App() {
+  return (
+    <div css={containerStyle}>
+      <button css={buttonStyle}>Click me</button>
+    </div>
+  );
+}
+
+// Inline css prop
+<div css={css\`
+  display: flex;
+  gap: 1rem;
+\`}>
+\`\`\`
+
+## Styled Components API
+\`\`\`tsx
+import styled from '@emotion/styled';
+
+// Basic styled component
+const Container = styled.div\`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+\`;
+
+// With props
+interface ButtonProps {
+  variant?: 'primary' | 'secondary';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const Button = styled.button<ButtonProps>\`
+  padding: \${({ size }) => {
+    switch (size) {
+      case 'sm': return '0.25rem 0.5rem';
+      case 'lg': return '0.75rem 1.5rem';
+      default: return '0.5rem 1rem';
+    }
+  }};
+
+  background: \${({ variant }) =>
+    variant === 'secondary' ? '#6b7280' : '#3b82f6'};
+
+  color: white;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+\`;
+
+// Object syntax
+const Card = styled.div({
+  padding: '1.5rem',
+  borderRadius: '0.5rem',
+  boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+});
+
+// Extending components
+const PrimaryButton = styled(Button)\`
+  background: #3b82f6;
+\`;
+
+const OutlineButton = styled(Button)\`
+  background: transparent;
+  border: 1px solid #3b82f6;
+  color: #3b82f6;
+\`;
+\`\`\`
+
+## Theming
+\`\`\`tsx
+import { ThemeProvider, useTheme } from '@emotion/react';
+
+// Define theme
+const theme = {
+  colors: {
+    primary: '#3b82f6',
+    secondary: '#6b7280',
+    danger: '#ef4444',
+    success: '#10b981',
+    background: '#ffffff',
+    text: '#1f2937',
+  },
+  spacing: {
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '1rem',
+    lg: '1.5rem',
+    xl: '2rem',
+  },
+  borderRadius: {
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    full: '9999px',
+  },
+};
+
+// TypeScript: Extend Emotion's theme type
+declare module '@emotion/react' {
+  export interface Theme {
+    colors: typeof theme.colors;
+    spacing: typeof theme.spacing;
+    borderRadius: typeof theme.borderRadius;
+  }
+}
+
+// Provider setup
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+
+// Using theme in styled components
+const Button = styled.button\`
+  padding: \${({ theme }) => theme.spacing.sm} \${({ theme }) => theme.spacing.md};
+  background: \${({ theme }) => theme.colors.primary};
+  border-radius: \${({ theme }) => theme.borderRadius.md};
+\`;
+
+// Using theme with css prop
+const Card = ({ children }) => {
+  const theme = useTheme();
+
+  return (
+    <div css={css\`
+      padding: \${theme.spacing.lg};
+      background: \${theme.colors.background};
+    \`}>
+      {children}
+    </div>
+  );
+};
+
+// Theme access in css function
+const cardStyle = (theme) => css\`
+  padding: \${theme.spacing.lg};
+  background: \${theme.colors.background};
+  color: \${theme.colors.text};
+\`;
+
+<div css={cardStyle}>Content</div>
+\`\`\`
+
+## Composition
+\`\`\`tsx
+import { css } from '@emotion/react';
+
+// Reusable style blocks
+const flexCenter = css\`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+\`;
+
+const truncate = css\`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+\`;
+
+const visuallyHidden = css\`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+\`;
+
+// Compose styles
+const Header = styled.header\`
+  \${flexCenter}
+  padding: 1rem;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+\`;
+
+const Title = styled.h1\`
+  \${truncate}
+  max-width: 300px;
+  font-size: 1.5rem;
+\`;
+
+// Array composition
+<div css={[flexCenter, { padding: '1rem' }]}>
+
+// Conditional composition
+<div css={[
+  baseStyle,
+  isActive && activeStyle,
+  isDisabled && disabledStyle,
+]}>
+\`\`\`
+
+## Animations
+\`\`\`tsx
+import { css, keyframes } from '@emotion/react';
+
+// Define keyframes
+const fadeIn = keyframes\`
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+\`;
+
+const spin = keyframes\`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+\`;
+
+const pulse = keyframes\`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+\`;
+
+// Using keyframes
+const FadeInDiv = styled.div\`
+  animation: \${fadeIn} 0.3s ease-out;
+\`;
+
+const Spinner = styled.div\`
+  width: 24px;
+  height: 24px;
+  border: 2px solid #e5e7eb;
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: \${spin} 0.8s linear infinite;
+\`;
+
+// Conditional animation
+const AnimatedCard = styled.div<{ isVisible: boolean }>\`
+  opacity: 0;
+
+  \${({ isVisible }) => isVisible && css\`
+    animation: \${fadeIn} 0.5s ease-out forwards;
+  \`}
+\`;
+\`\`\`
+
+## Global Styles
+\`\`\`tsx
+import { Global, css } from '@emotion/react';
+
+const globalStyles = css\`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    font-size: 16px;
+  }
+
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+  }
+
+  input, button, textarea, select {
+    font: inherit;
+  }
+
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+    margin: 0;
+  }
+\`;
+
+// In App component
+function App() {
+  return (
+    <>
+      <Global styles={globalStyles} />
+      <ThemeProvider theme={theme}>
+        <YourApp />
+      </ThemeProvider>
+    </>
+  );
+}
+
+// Global styles with theme
+const globalStylesWithTheme = (theme) => css\`
+  body {
+    background: \${theme.colors.background};
+    color: \${theme.colors.text};
+  }
+\`;
+
+<Global styles={globalStylesWithTheme} />
+\`\`\`
+
+## Media Queries
+\`\`\`tsx
+// Breakpoint helpers
+const breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+};
+
+const mq = {
+  sm: \`@media (min-width: \${breakpoints.sm}px)\`,
+  md: \`@media (min-width: \${breakpoints.md}px)\`,
+  lg: \`@media (min-width: \${breakpoints.lg}px)\`,
+  xl: \`@media (min-width: \${breakpoints.xl}px)\`,
+};
+
+// Usage in styled components
+const Container = styled.div\`
+  padding: 1rem;
+
+  \${mq.md} {
+    padding: 2rem;
+  }
+
+  \${mq.lg} {
+    padding: 3rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+\`;
+
+// Object syntax
+const responsiveStyle = css({
+  fontSize: '1rem',
+  [mq.md]: {
+    fontSize: '1.25rem',
+  },
+  [mq.lg]: {
+    fontSize: '1.5rem',
+  },
+});
+\`\`\`
+
+## Server-Side Rendering
+\`\`\`tsx
+// Next.js App Router (app/layout.tsx)
+// Emotion works with React Server Components
+// Add the pragma for client components using css prop
+
+// For Pages Router, use @emotion/cache and @emotion/server
+import createEmotionServer from '@emotion/server/create-instance';
+import createCache from '@emotion/cache';
+
+// Create cache
+const cache = createCache({ key: 'css' });
+const { extractCriticalToChunks, constructStyleTagsFromChunks } =
+  createEmotionServer(cache);
+
+// In _document.tsx
+const emotionChunks = extractCriticalToChunks(html);
+const emotionStyleTags = constructStyleTagsFromChunks(emotionChunks);
+\`\`\`
+
+## ❌ DON'T
+- Create styled components inside render functions
+- Use dynamic styles when static works
+- Forget the JSX pragma for css prop
+- Mix string and object syntax unnecessarily
+- Skip TypeScript theme declaration
+
+## ✅ DO
+- Define styled components outside render
+- Use theme for consistent values
+- Compose styles for reusability
+- Use TypeScript for theme type safety
+- Use object syntax for dynamic styles
+- Set up SSR correctly for production
+- Use keyframes for animations