autoworkflow 3.1.4 → 3.5.0

package/.claude/skills/styled-components.md

@@ -0,0 +1,403 @@
+# Styled Components Skill
+
+## Basic Usage
+\`\`\`tsx
+import styled from 'styled-components';
+
+// Basic styled component
+const Container = styled.div\`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+\`;
+
+// With pseudo-selectors
+const Button = styled.button\`
+  padding: 0.5rem 1rem;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: #2563eb;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+\`;
+
+// Nesting
+const Card = styled.div\`
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  h2 {
+    margin: 0 0 1rem;
+    font-size: 1.25rem;
+  }
+
+  p {
+    color: #6b7280;
+  }
+\`;
+\`\`\`
+
+## Props & Dynamic Styles
+\`\`\`tsx
+// TypeScript props interface
+interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+}
+
+const Button = styled.button<ButtonProps>\`
+  /* Dynamic styles based on props */
+  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 }) => {
+    switch (variant) {
+      case 'secondary': return '#6b7280';
+      case 'danger': return '#ef4444';
+      default: return '#3b82f6';
+    }
+  }};
+
+  width: \${({ fullWidth }) => fullWidth ? '100%' : 'auto'};
+
+  font-size: \${({ size }) => size === 'sm' ? '0.875rem' : '1rem'};
+\`;
+
+// Usage
+<Button variant="primary" size="lg" fullWidth>Submit</Button>
+\`\`\`
+
+## Theming
+\`\`\`tsx
+// theme.ts
+export const theme = {
+  colors: {
+    primary: '#3b82f6',
+    secondary: '#6b7280',
+    danger: '#ef4444',
+    success: '#10b981',
+    background: '#ffffff',
+    text: '#1f2937',
+    textMuted: '#6b7280',
+  },
+  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',
+  },
+  shadows: {
+    sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px rgba(0, 0, 0, 0.1)',
+  },
+};
+
+export type Theme = typeof theme;
+
+// styled.d.ts - TypeScript declaration
+import 'styled-components';
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}
+
+// App.tsx - Provider setup
+import { ThemeProvider } from 'styled-components';
+import { theme } from './theme';
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+
+// Using theme in components
+const Card = styled.div\`
+  padding: \${({ theme }) => theme.spacing.lg};
+  background: \${({ theme }) => theme.colors.background};
+  border-radius: \${({ theme }) => theme.borderRadius.lg};
+  box-shadow: \${({ theme }) => theme.shadows.md};
+\`;
+
+const Button = styled.button\`
+  background: \${({ theme }) => theme.colors.primary};
+  color: white;
+  padding: \${({ theme }) => \`\${theme.spacing.sm} \${theme.spacing.md}\`};
+\`;
+\`\`\`
+
+## Extending & Composing
+\`\`\`tsx
+// Extend existing styled component
+const Button = styled.button\`
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+\`;
+
+const PrimaryButton = styled(Button)\`
+  background: #3b82f6;
+  color: white;
+\`;
+
+const OutlineButton = styled(Button)\`
+  background: transparent;
+  border: 1px solid #3b82f6;
+  color: #3b82f6;
+\`;
+
+// Extend any component (must accept className prop)
+const Link = styled(RouterLink)\`
+  color: #3b82f6;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+\`;
+
+// Style HTML element with 'as' prop
+<Button as="a" href="/link">Link styled as button</Button>
+<Container as="section">Section container</Container>
+\`\`\`
+
+## Animations
+\`\`\`tsx
+import styled, { keyframes, css } from 'styled-components';
+
+// 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; }
+\`;
+
+// Use in styled component
+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 { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle\`
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    font-size: 16px;
+  }
+
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: \${({ theme }) => theme.colors.background};
+    color: \${({ theme }) => theme.colors.text};
+    line-height: 1.5;
+  }
+
+  a {
+    color: \${({ theme }) => theme.colors.primary};
+  }
+
+  /* CSS reset or normalize styles */
+  h1, h2, h3, h4, h5, h6, p {
+    margin: 0;
+  }
+\`;
+
+// In App.tsx
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+\`\`\`
+
+## CSS Helper & Mixins
+\`\`\`tsx
+import styled, { css } from 'styled-components';
+
+// Reusable style mixins
+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;
+\`;
+
+// Media query helper
+const media = {
+  sm: (styles: TemplateStringsArray) => css\`
+    @media (min-width: 640px) { \${styles} }
+  \`,
+  md: (styles: TemplateStringsArray) => css\`
+    @media (min-width: 768px) { \${styles} }
+  \`,
+  lg: (styles: TemplateStringsArray) => css\`
+    @media (min-width: 1024px) { \${styles} }
+  \`,
+};
+
+// Usage
+const Card = styled.div\`
+  \${flexCenter}
+  padding: 1rem;
+
+  \${media.md\`
+    padding: 2rem;
+  \`}
+\`;
+
+const Title = styled.h1\`
+  \${truncate}
+  max-width: 300px;
+\`;
+\`\`\`
+
+## Attrs & Default Props
+\`\`\`tsx
+// Add default attributes
+const Input = styled.input.attrs<{ type?: string }>((props) => ({
+  type: props.type || 'text',
+}))\`
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+\`;
+
+const PasswordInput = styled(Input).attrs({ type: 'password' })\`\`;
+
+// Dynamic attrs
+const Button = styled.button.attrs<{ disabled?: boolean }>((props) => ({
+  disabled: props.disabled,
+  'aria-disabled': props.disabled,
+}))\`
+  /* styles */
+\`;
+\`\`\`
+
+## Server-Side Rendering
+\`\`\`tsx
+// Next.js setup (pages/_document.tsx)
+import Document, { DocumentContext } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: [initialProps.styles, sheet.getStyleElement()],
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}
+\`\`\`
+
+## ❌ DON'T
+- Create styled components inside render functions
+- Use inline styles when styled-components works
+- Forget to type props in TypeScript
+- Create overly complex conditional styles
+- Skip ThemeProvider when using theme
+
+## ✅ DO
+- Define styled components outside of render
+- Use theme for consistent values
+- Keep styles colocated with components
+- Use props for dynamic styles
+- Create reusable mixins with css helper
+- Use attrs for default/computed attributes
+- Setup SSR properly for production

package/.claude/skills/svelte.md

@@ -0,0 +1,238 @@
+# Svelte Skill
+
+## Component Structure
+\`\`\`svelte
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+
+  // Props
+  export let userId: string;
+  export let initialCount = 0;
+
+  // Local state
+  let count = initialCount;
+  let user: User | null = null;
+
+  // Reactive declarations
+  $: doubleCount = count * 2;
+  $: if (count > 10) {
+    console.log('Count exceeded 10!');
+  }
+
+  // Event dispatcher
+  const dispatch = createEventDispatcher<{
+    update: number;
+    submit: { data: FormData };
+  }>();
+
+  function increment() {
+    count++;
+    dispatch('update', count);
+  }
+
+  // Lifecycle
+  onMount(async () => {
+    user = await fetchUser(userId);
+    return () => {
+      // Cleanup (alternative to onDestroy)
+    };
+  });
+</script>
+
+<div>
+  <h2>{user?.name ?? 'Loading...'}</h2>
+  <p>Count: {count} (Double: {doubleCount})</p>
+  <button on:click={increment}>Increment</button>
+</div>
+\`\`\`
+
+## Stores
+\`\`\`typescript
+// stores/auth.ts
+import { writable, derived, readable } from 'svelte/store';
+
+// Writable store
+export const user = writable<User | null>(null);
+
+// With custom methods
+function createAuthStore() {
+  const { subscribe, set, update } = writable<User | null>(null);
+
+  return {
+    subscribe,
+    login: async (email: string, password: string) => {
+      const user = await api.login(email, password);
+      set(user);
+    },
+    logout: () => set(null),
+    updateProfile: (data: Partial<User>) => {
+      update(u => u ? { ...u, ...data } : null);
+    }
+  };
+}
+
+export const auth = createAuthStore();
+
+// Derived store
+export const isLoggedIn = derived(user, $user => !!$user);
+
+// Readable store (external source)
+export const time = readable(new Date(), (set) => {
+  const interval = setInterval(() => set(new Date()), 1000);
+  return () => clearInterval(interval);
+});
+
+// Usage in component
+<script>
+  import { user, isLoggedIn, auth } from './stores/auth';
+
+  // Auto-subscription with $
+  $: console.log('User:', $user);
+  $: console.log('Logged in:', $isLoggedIn);
+</script>
+
+{#if $isLoggedIn}
+  <p>Welcome, {$user.name}</p>
+  <button on:click={() => auth.logout()}>Logout</button>
+{/if}
+\`\`\`
+
+## Event Handling
+\`\`\`svelte
+<!-- Basic events -->
+<button on:click={handleClick}>Click</button>
+<button on:click={() => count++}>Inline</button>
+
+<!-- Event modifiers -->
+<button on:click|once={handleClick}>Click once</button>
+<button on:click|preventDefault={handleSubmit}>Submit</button>
+<button on:click|stopPropagation={handleClick}>Stop bubbling</button>
+
+<!-- Component events -->
+<Child on:update={handleUpdate} />
+<Child on:update /> <!-- Forward to parent -->
+
+<!-- DOM event forwarding -->
+<button on:click>
+  <slot />
+</button>
+\`\`\`
+
+## Slots
+\`\`\`svelte
+<!-- Card.svelte -->
+<div class="card">
+  <header>
+    <slot name="header">Default Header</slot>
+  </header>
+
+  <main>
+    <slot>Default content</slot>
+  </main>
+
+  <footer>
+    <slot name="footer" user={currentUser}>
+      <!-- Slot props -->
+    </slot>
+  </footer>
+</div>
+
+<!-- Usage -->
+<Card>
+  <svelte:fragment slot="header">
+    <h1>Title</h1>
+  </svelte:fragment>
+
+  <p>Main content</p>
+
+  <div slot="footer" let:user>
+    <p>Footer for {user.name}</p>
+  </div>
+</Card>
+\`\`\`
+
+## Context API
+\`\`\`svelte
+<!-- Parent.svelte -->
+<script>
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+
+  const theme = writable('dark');
+  setContext('theme', theme);
+</script>
+
+<!-- Child.svelte (any depth) -->
+<script>
+  import { getContext } from 'svelte';
+
+  const theme = getContext('theme');
+</script>
+
+<div class={$theme}>Content</div>
+\`\`\`
+
+## Transitions & Animations
+\`\`\`svelte
+<script>
+  import { fade, fly, slide, scale } from 'svelte/transition';
+  import { flip } from 'svelte/animate';
+
+  let visible = true;
+  let items = [1, 2, 3];
+</script>
+
+<!-- Basic transition -->
+{#if visible}
+  <div transition:fade>Fades in/out</div>
+{/if}
+
+<!-- In/out transitions -->
+{#if visible}
+  <div in:fly={{ y: 200 }} out:fade>
+    Flies in, fades out
+  </div>
+{/if}
+
+<!-- Animate list reordering -->
+{#each items as item (item)}
+  <div animate:flip={{ duration: 300 }}>
+    {item}
+  </div>
+{/each}
+\`\`\`
+
+## Bindings
+\`\`\`svelte
+<!-- Two-way binding -->
+<input bind:value={name} />
+<input type="checkbox" bind:checked={accepted} />
+<select bind:value={selected}>
+  <option value="a">A</option>
+</select>
+
+<!-- Group binding -->
+{#each options as option}
+  <input type="checkbox" bind:group={selectedOptions} value={option} />
+{/each}
+
+<!-- Element binding -->
+<canvas bind:this={canvasElement}></canvas>
+
+<!-- Component binding -->
+<Child bind:value />
+\`\`\`
+
+## ❌ DON'T
+- Mutate objects/arrays without reassignment (won't trigger reactivity)
+- Forget $ prefix when reading stores in script
+- Use context for frequently changing data (use stores)
+- Create stores inside components (create outside)
+
+## ✅ DO
+- Use \`$:\` for reactive statements
+- Use stores for shared state
+- Keep components small
+- Use transitions for smooth UX
+- Use context for static/rarely-changing data
+- Reassign arrays/objects to trigger updates: \`items = [...items, newItem]\`