autoworkflow 3.1.5 → 3.6.0

package/.claude/skills/sass.md

@@ -0,0 +1,380 @@
+# Sass Skill
+
+## Variables
+\`\`\`scss
+// Basic variables
+$primary: #3b82f6;
+$secondary: #6b7280;
+$danger: #ef4444;
+$success: #10b981;
+
+$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-size-base: 1rem;
+$line-height: 1.5;
+
+$spacing-sm: 0.5rem;
+$spacing-md: 1rem;
+$spacing-lg: 1.5rem;
+
+$border-radius: 0.375rem;
+$shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+// Maps
+$colors: (
+  'primary': #3b82f6,
+  'secondary': #6b7280,
+  'danger': #ef4444,
+  'success': #10b981,
+);
+
+$breakpoints: (
+  'sm': 640px,
+  'md': 768px,
+  'lg': 1024px,
+  'xl': 1280px,
+);
+
+// Accessing map values
+.button {
+  background: map-get($colors, 'primary');
+}
+\`\`\`
+
+## Nesting & Parent Selector
+\`\`\`scss
+// BEM-style nesting
+.card {
+  padding: 1.5rem;
+  border-radius: $border-radius;
+  box-shadow: $shadow;
+
+  // & = parent selector (.card__header)
+  &__header {
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  &__title {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  &__content {
+    color: #6b7280;
+  }
+
+  // Pseudo-classes
+  &:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  &:focus-within {
+    outline: 2px solid $primary;
+  }
+
+  // Modifier classes
+  &--featured {
+    border: 2px solid $primary;
+  }
+
+  &--compact {
+    padding: 0.75rem;
+  }
+}
+
+// Results in:
+// .card { ... }
+// .card__header { ... }
+// .card__title { ... }
+// .card:hover { ... }
+// .card--featured { ... }
+
+// Parent selector at end (modifier)
+.button {
+  background: $primary;
+
+  .dark-theme & {
+    background: lighten($primary, 10%);
+  }
+}
+// Results in: .dark-theme .button { ... }
+\`\`\`
+
+## Mixins
+\`\`\`scss
+// Basic mixin
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Mixin with parameters
+@mixin button($bg-color, $text-color: white) {
+  padding: $spacing-sm $spacing-md;
+  background: $bg-color;
+  color: $text-color;
+  border: none;
+  border-radius: $border-radius;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: darken($bg-color, 10%);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// Mixin with default map parameter
+@mixin button-variant($variant: 'primary') {
+  background: map-get($colors, $variant);
+}
+
+// Using mixins
+.container {
+  @include flex-center;
+}
+
+.btn-primary {
+  @include button($primary);
+}
+
+.btn-secondary {
+  @include button($secondary, #1f2937);
+}
+
+// Mixin with content block
+@mixin media($breakpoint) {
+  @media (min-width: map-get($breakpoints, $breakpoint)) {
+    @content;
+  }
+}
+
+.container {
+  padding: 1rem;
+
+  @include media('md') {
+    padding: 2rem;
+  }
+
+  @include media('lg') {
+    padding: 3rem;
+  }
+}
+\`\`\`
+
+## Functions
+\`\`\`scss
+// Built-in color functions
+$color: #3b82f6;
+
+lighten($color, 10%)    // Lighter
+darken($color, 10%)     // Darker
+saturate($color, 20%)   // More saturated
+desaturate($color, 20%) // Less saturated
+adjust-hue($color, 45)  // Shift hue
+rgba($color, 0.5)       // Add transparency
+mix($color1, $color2, 50%)  // Mix colors
+
+// Custom functions
+@function rem($pixels) {
+  @return calc($pixels / 16) * 1rem;
+}
+
+@function spacing($multiplier) {
+  @return $spacing-md * $multiplier;
+}
+
+@function color($name) {
+  @return map-get($colors, $name);
+}
+
+// Usage
+.title {
+  font-size: rem(24);      // 1.5rem
+  margin-bottom: spacing(2); // 2rem
+  color: color('primary');
+}
+\`\`\`
+
+## Control Directives
+\`\`\`scss
+// @if / @else
+@mixin theme($mode) {
+  @if $mode == 'dark' {
+    background: #1a1a1a;
+    color: white;
+  } @else if $mode == 'light' {
+    background: white;
+    color: #1a1a1a;
+  } @else {
+    background: inherit;
+  }
+}
+
+// @each - loop through list or map
+$sizes: sm, md, lg;
+
+@each $size in $sizes {
+  .margin-#{$size} {
+    margin: map-get((sm: 0.5rem, md: 1rem, lg: 1.5rem), $size);
+  }
+}
+
+// @each with maps
+@each $name, $color in $colors {
+  .bg-#{$name} {
+    background: $color;
+  }
+  .text-#{$name} {
+    color: $color;
+  }
+}
+
+// @for loop
+@for $i from 1 through 12 {
+  .col-#{$i} {
+    width: percentage(calc($i / 12));
+  }
+}
+
+// @while (rarely needed)
+$i: 1;
+@while $i <= 5 {
+  .level-#{$i} {
+    z-index: $i * 100;
+  }
+  $i: $i + 1;
+}
+\`\`\`
+
+## Modules (@use and @forward)
+\`\`\`scss
+// _variables.scss
+$primary: #3b82f6;
+$secondary: #6b7280;
+
+// _mixins.scss
+@use 'variables' as vars;
+
+@mixin button {
+  background: vars.$primary;
+}
+
+// _index.scss (forwarding)
+@forward 'variables';
+@forward 'mixins';
+
+// main.scss
+@use 'index' as *;  // Import everything
+// Or: @use 'index' as utils;
+
+.button {
+  background: $primary;  // From forwarded variables
+  @include button;
+}
+
+// With configuration
+@use 'variables' with (
+  $primary: #ff0000
+);
+\`\`\`
+
+## Extend / Placeholder Selectors
+\`\`\`scss
+// Placeholder selector (won't be output)
+%button-base {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+
+%visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+// Extend placeholder
+.button {
+  @extend %button-base;
+  background: $primary;
+  color: white;
+}
+
+.button-secondary {
+  @extend %button-base;
+  background: $secondary;
+}
+
+.sr-only {
+  @extend %visually-hidden;
+}
+\`\`\`
+
+## Project Structure (7-1 Pattern)
+\`\`\`
+scss/
+├── abstracts/
+│   ├── _variables.scss    # Variables
+│   ├── _functions.scss    # Functions
+│   ├── _mixins.scss       # Mixins
+│   └── _index.scss        # Forward all
+├── base/
+│   ├── _reset.scss        # Reset/normalize
+│   ├── _typography.scss   # Typography rules
+│   └── _index.scss
+├── components/
+│   ├── _button.scss
+│   ├── _card.scss
+│   ├── _form.scss
+│   └── _index.scss
+├── layout/
+│   ├── _header.scss
+│   ├── _footer.scss
+│   ├── _grid.scss
+│   └── _index.scss
+├── pages/
+│   ├── _home.scss
+│   └── _index.scss
+├── themes/
+│   ├── _dark.scss
+│   └── _index.scss
+├── vendors/
+│   └── _index.scss        # Third-party
+└── main.scss              # Main entry point
+
+// main.scss
+@use 'abstracts';
+@use 'base';
+@use 'layout';
+@use 'components';
+@use 'pages';
+@use 'themes';
+\`\`\`
+
+## ❌ DON'T
+- Nest more than 3 levels deep
+- Use @import (deprecated, use @use)
+- Create overly complex mixins
+- Use extend with regular selectors (use %)
+- Put variables in global scope
+
+## ✅ DO
+- Use @use and @forward for modules
+- Use BEM naming convention
+- Create reusable mixins and functions
+- Use maps for related values
+- Keep nesting shallow (max 3 levels)
+- Use placeholder selectors (%) with @extend
+- Organize files using 7-1 or similar pattern