musubi-sdd 5.1.0 → 5.6.1

package/src/templates/agents/claude-code/skills/ui-ux-designer/accessibility-guidelines.md

@@ -9,15 +9,19 @@ Guidelines for creating accessible user interfaces following WCAG 2.1 standards.
 ## WCAG Principles (POUR)
 
 ### 1. Perceivable
+
 Content can be perceived by all users.
 
 ### 2. Operable
+
 Interface can be operated by all users.
 
 ### 3. Understandable
+
 Content and operation is understandable.
 
 ### 4. Robust
+
 Content works with assistive technologies.
 
 ---
@@ -28,17 +32,16 @@ Content works with assistive technologies.
 
 ```html
 <!-- Informative image -->
-<img src="chart.png" alt="Sales increased 25% from January to March">
+<img src="chart.png" alt="Sales increased 25% from January to March" />
 
 <!-- Decorative image -->
-<img src="decoration.png" alt="" role="presentation">
+<img src="decoration.png" alt="" role="presentation" />
 
 <!-- Complex image -->
 <figure>
-  <img src="flowchart.png" alt="User registration process">
+  <img src="flowchart.png" alt="User registration process" />
   <figcaption>
-    Detailed description: User enters email, confirms via link, 
-    sets password, completes profile.
+    Detailed description: User enters email, confirms via link, sets password, completes profile.
   </figcaption>
 </figure>
 ```
@@ -48,18 +51,13 @@ Content works with assistive technologies.
 ```html
 <!-- Label association -->
 <label for="email">Email address</label>
-<input type="email" id="email" name="email" required
-       aria-describedby="email-hint">
+<input type="email" id="email" name="email" required aria-describedby="email-hint" />
 <span id="email-hint">We'll never share your email.</span>
 
 <!-- Error handling -->
 <label for="password">Password</label>
-<input type="password" id="password" 
-       aria-invalid="true"
-       aria-describedby="password-error">
-<span id="password-error" role="alert">
-  Password must be at least 8 characters.
-</span>
+<input type="password" id="password" aria-invalid="true" aria-describedby="password-error" />
+<span id="password-error" role="alert"> Password must be at least 8 characters. </span>
 ```
 
 ### Buttons
@@ -74,11 +72,7 @@ Content works with assistive technologies.
 </button>
 
 <!-- Toggle button -->
-<button type="button" 
-        aria-pressed="false"
-        onclick="toggleDarkMode()">
-  Dark Mode
-</button>
+<button type="button" aria-pressed="false" onclick="toggleDarkMode()">Dark Mode</button>
 ```
 
 ### Navigation
@@ -131,28 +125,25 @@ Content works with assistive technologies.
 
 ```html
 <!-- Natural tab order -->
-<input type="text">
+<input type="text" />
 <button>Submit</button>
 
 <!-- Skip decorative elements -->
 <div tabindex="-1">Decorative</div>
 
 <!-- Custom focusable element -->
-<div role="button" tabindex="0" 
-     onkeydown="handleKeyDown(event)">
-  Custom Button
-</div>
+<div role="button" tabindex="0" onkeydown="handleKeyDown(event)">Custom Button</div>
 ```
 
 ### Keyboard Shortcuts
 
 ```javascript
-document.addEventListener('keydown', (e) => {
+document.addEventListener('keydown', e => {
   // Escape to close modal
   if (e.key === 'Escape' && modalOpen) {
     closeModal();
   }
-  
+
   // Arrow keys for navigation
   if (e.key === 'ArrowDown') {
     focusNextItem();
@@ -166,19 +157,21 @@ document.addEventListener('keydown', (e) => {
 
 ### Contrast Requirements
 
-| Element | Ratio | Level |
-|---------|-------|-------|
-| Normal text | 4.5:1 | AA |
-| Large text (18px+) | 3:1 | AA |
-| UI components | 3:1 | AA |
-| Enhanced | 7:1 | AAA |
+| Element            | Ratio | Level |
+| ------------------ | ----- | ----- |
+| Normal text        | 4.5:1 | AA    |
+| Large text (18px+) | 3:1   | AA    |
+| UI components      | 3:1   | AA    |
+| Enhanced           | 7:1   | AAA   |
 
 ### Color Independence
 
 ```css
 /* Don't rely on color alone */
 /* Bad */
-.error { color: red; }
+.error {
+  color: red;
+}
 
 /* Good */
 .error {
@@ -186,7 +179,7 @@ document.addEventListener('keydown', (e) => {
   border: 2px solid red;
 }
 .error::before {
-  content: "⚠ ";
+  content: '⚠ ';
 }
 ```
 
@@ -197,10 +190,7 @@ document.addEventListener('keydown', (e) => {
 ### Modal Dialog
 
 ```html
-<div role="dialog" 
-     aria-modal="true" 
-     aria-labelledby="dialog-title"
-     aria-describedby="dialog-desc">
+<div role="dialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
   <h2 id="dialog-title">Confirm Action</h2>
   <p id="dialog-desc">Are you sure you want to delete?</p>
   <button onclick="confirm()">Yes, delete</button>
@@ -212,50 +202,26 @@ document.addEventListener('keydown', (e) => {
 
 ```html
 <div role="tablist" aria-label="Settings">
-  <button role="tab" 
-          id="tab-1" 
-          aria-selected="true"
-          aria-controls="panel-1">
-    General
-  </button>
-  <button role="tab" 
-          id="tab-2" 
-          aria-selected="false"
-          aria-controls="panel-2"
-          tabindex="-1">
+  <button role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1">General</button>
+  <button role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2" tabindex="-1">
     Privacy
   </button>
 </div>
-<div role="tabpanel" 
-     id="panel-1" 
-     aria-labelledby="tab-1">
-  General settings content
-</div>
-<div role="tabpanel" 
-     id="panel-2" 
-     aria-labelledby="tab-2"
-     hidden>
-  Privacy settings content
-</div>
+<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">General settings content</div>
+<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>Privacy settings content</div>
 ```
 
 ### Live Regions
 
 ```html
 <!-- Status messages -->
-<div role="status" aria-live="polite">
-  Form submitted successfully!
-</div>
+<div role="status" aria-live="polite">Form submitted successfully!</div>
 
 <!-- Important alerts -->
-<div role="alert" aria-live="assertive">
-  Session expiring in 2 minutes!
-</div>
+<div role="alert" aria-live="assertive">Session expiring in 2 minutes!</div>
 
 <!-- Loading indicator -->
-<div role="status" aria-busy="true" aria-live="polite">
-  Loading results...
-</div>
+<div role="status" aria-busy="true" aria-live="polite">Loading results...</div>
 ```
 
 ---
@@ -263,11 +229,13 @@ document.addEventListener('keydown', (e) => {
 ## Testing Checklist
 
 ### Automated
+
 - [ ] Run axe-core or Lighthouse
 - [ ] Validate HTML
 - [ ] Check color contrast
 
 ### Manual
+
 - [ ] Navigate with keyboard only
 - [ ] Test with screen reader
 - [ ] Zoom to 200%
@@ -275,6 +243,7 @@ document.addEventListener('keydown', (e) => {
 - [ ] Check focus order
 
 ### Screen Readers
+
 - [ ] VoiceOver (macOS/iOS)
 - [ ] NVDA (Windows)
 - [ ] JAWS (Windows)
@@ -284,13 +253,13 @@ document.addEventListener('keydown', (e) => {
 
 ## Common Issues
 
-| Issue | Impact | Fix |
-|-------|--------|-----|
-| Missing alt text | Blind users can't understand images | Add descriptive alt |
-| No focus indicator | Keyboard users get lost | Add visible outline |
-| Color only meaning | Colorblind miss info | Add text/icons |
-| No labels | Screen readers can't identify fields | Associate labels |
-| Mouse-only UI | Keyboard users blocked | Add keyboard support |
+| Issue              | Impact                               | Fix                  |
+| ------------------ | ------------------------------------ | -------------------- |
+| Missing alt text   | Blind users can't understand images  | Add descriptive alt  |
+| No focus indicator | Keyboard users get lost              | Add visible outline  |
+| Color only meaning | Colorblind miss info                 | Add text/icons       |
+| No labels          | Screen readers can't identify fields | Associate labels     |
+| Mouse-only UI      | Keyboard users blocked               | Add keyboard support |
 
 ---
 
@@ -302,15 +271,20 @@ document.addEventListener('keydown', (e) => {
 [Company] is committed to ensuring accessibility for all users.
 
 ## Standards
+
 We aim to conform to WCAG 2.1 Level AA standards.
 
 ## Current Status
+
 We are continuously improving accessibility. Known issues:
+
 - [Issue 1]: [Expected fix date]
 - [Issue 2]: [Expected fix date]
 
 ## Feedback
+
 If you encounter accessibility barriers:
+
 - Email: accessibility@example.com
 - Phone: 1-800-XXX-XXXX
 

package/src/templates/agents/claude-code/skills/ui-ux-designer/design-system-components.md

@@ -14,13 +14,13 @@ Guidelines for creating and maintaining design system components.
 Atoms → Molecules → Organisms → Templates → Pages
 ```
 
-| Level | Description | Examples |
-|-------|-------------|----------|
-| Atoms | Basic elements | Button, Input, Label |
-| Molecules | Simple groups | Form field, Card |
-| Organisms | Complex sections | Header, Form, Table |
-| Templates | Page layouts | Dashboard layout |
-| Pages | Specific instances | Home page |
+| Level     | Description        | Examples             |
+| --------- | ------------------ | -------------------- |
+| Atoms     | Basic elements     | Button, Input, Label |
+| Molecules | Simple groups      | Form field, Card     |
+| Organisms | Complex sections   | Header, Form, Table  |
+| Templates | Page layouts       | Dashboard layout     |
+| Pages     | Specific instances | Home page            |
 
 ---
 
@@ -33,19 +33,19 @@ interface ButtonProps {
   // Variants
   variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
   size?: 'sm' | 'md' | 'lg';
-  
+
   // States
   disabled?: boolean;
   loading?: boolean;
-  
+
   // Content
   children: React.ReactNode;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
-  
+
   // Actions
   onClick?: () => void;
-  
+
   // Accessibility
   'aria-label'?: string;
 }
@@ -55,7 +55,7 @@ interface ButtonProps {
 
 ```tsx
 // Bad: Props explosion
-<Card 
+<Card
   title="Title"
   subtitle="Subtitle"
   image="/img.jpg"
@@ -92,18 +92,18 @@ interface ButtonProps {
   --color-primary-500: #3b82f6;
   --color-primary-600: #2563eb;
   --color-primary-900: #1e3a8a;
-  
+
   /* Semantic colors */
   --color-success: #22c55e;
   --color-warning: #f59e0b;
   --color-error: #ef4444;
   --color-info: #3b82f6;
-  
+
   /* Text colors */
   --color-text-primary: #111827;
   --color-text-secondary: #6b7280;
   --color-text-disabled: #9ca3af;
-  
+
   /* Background colors */
   --color-bg-primary: #ffffff;
   --color-bg-secondary: #f9fafb;
@@ -116,14 +116,14 @@ interface ButtonProps {
 ```css
 :root {
   --space-0: 0;
-  --space-1: 0.25rem;  /* 4px */
-  --space-2: 0.5rem;   /* 8px */
-  --space-3: 0.75rem;  /* 12px */
-  --space-4: 1rem;     /* 16px */
-  --space-6: 1.5rem;   /* 24px */
-  --space-8: 2rem;     /* 32px */
-  --space-12: 3rem;    /* 48px */
-  --space-16: 4rem;    /* 64px */
+  --space-1: 0.25rem; /* 4px */
+  --space-2: 0.5rem; /* 8px */
+  --space-3: 0.75rem; /* 12px */
+  --space-4: 1rem; /* 16px */
+  --space-6: 1.5rem; /* 24px */
+  --space-8: 2rem; /* 32px */
+  --space-12: 3rem; /* 48px */
+  --space-16: 4rem; /* 64px */
 }
 ```
 
@@ -134,22 +134,22 @@ interface ButtonProps {
   /* Font families */
   --font-sans: 'Inter', system-ui, sans-serif;
   --font-mono: 'Fira Code', monospace;
-  
+
   /* Font sizes */
-  --text-xs: 0.75rem;    /* 12px */
-  --text-sm: 0.875rem;   /* 14px */
-  --text-base: 1rem;     /* 16px */
-  --text-lg: 1.125rem;   /* 18px */
-  --text-xl: 1.25rem;    /* 20px */
-  --text-2xl: 1.5rem;    /* 24px */
-  --text-3xl: 1.875rem;  /* 30px */
-  
+  --text-xs: 0.75rem; /* 12px */
+  --text-sm: 0.875rem; /* 14px */
+  --text-base: 1rem; /* 16px */
+  --text-lg: 1.125rem; /* 18px */
+  --text-xl: 1.25rem; /* 20px */
+  --text-2xl: 1.5rem; /* 24px */
+  --text-3xl: 1.875rem; /* 30px */
+
   /* Font weights */
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;
-  
+
   /* Line heights */
   --leading-tight: 1.25;
   --leading-normal: 1.5;
@@ -163,7 +163,7 @@ interface ButtonProps {
 
 ### Component Card Template
 
-```markdown
+````markdown
 # Button
 
 Buttons are used to trigger actions or navigation.
@@ -175,17 +175,18 @@ import { Button } from '@/components';
 
 <Button variant="primary" size="md">
   Click me
-</Button>
+</Button>;
 ```
+````
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| variant | 'primary' \| 'secondary' \| 'ghost' | 'primary' | Visual style |
-| size | 'sm' \| 'md' \| 'lg' | 'md' | Button size |
-| disabled | boolean | false | Disabled state |
-| loading | boolean | false | Loading state |
+| Prop     | Type                                | Default   | Description    |
+| -------- | ----------------------------------- | --------- | -------------- |
+| variant  | 'primary' \| 'secondary' \| 'ghost' | 'primary' | Visual style   |
+| size     | 'sm' \| 'md' \| 'lg'                | 'md'      | Button size    |
+| disabled | boolean                             | false     | Disabled state |
+| loading  | boolean                             | false     | Loading state  |
 
 ## Variants
 
@@ -217,7 +218,8 @@ import { Button } from '@/components';
 ✅ Use ghost for less important actions
 ❌ Don't use more than one primary per view
 ❌ Don't disable without explanation
-```
+
+````
 
 ---
 
@@ -229,48 +231,46 @@ import { Button } from '@/components';
 .button {
   /* Default */
   background: var(--color-primary-500);
-  
+
   /* Hover */
   &:hover:not(:disabled) {
     background: var(--color-primary-600);
   }
-  
+
   /* Active */
   &:active:not(:disabled) {
     background: var(--color-primary-700);
     transform: scale(0.98);
   }
-  
+
   /* Focus */
   &:focus-visible {
     outline: 2px solid var(--color-primary-500);
     outline-offset: 2px;
   }
-  
+
   /* Disabled */
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
 }
-```
+````
 
 ### Loading State
 
 ```tsx
 function Button({ loading, children, ...props }) {
   return (
-    <button 
-      disabled={loading}
-      aria-busy={loading}
-      {...props}
-    >
+    <button disabled={loading} aria-busy={loading} {...props}>
       {loading ? (
         <>
           <Spinner aria-hidden="true" />
           <span className="sr-only">Loading...</span>
         </>
-      ) : children}
+      ) : (
+        children
+      )}
     </button>
   );
 }
@@ -290,24 +290,32 @@ function Button({ loading, children, ...props }) {
   --breakpoint-xl: 1280px;
 }
 
-@media (min-width: 640px) { /* sm */ }
-@media (min-width: 768px) { /* md */ }
-@media (min-width: 1024px) { /* lg */ }
-@media (min-width: 1280px) { /* xl */ }
+@media (min-width: 640px) {
+  /* sm */
+}
+@media (min-width: 768px) {
+  /* md */
+}
+@media (min-width: 1024px) {
+  /* lg */
+}
+@media (min-width: 1280px) {
+  /* xl */
+}
 ```
 
 ### Responsive Components
 
 ```tsx
 // Responsive button sizing
-<Button 
+<Button
   size={{ base: 'sm', md: 'md', lg: 'lg' }}
 >
   Responsive Button
 </Button>
 
 // Stack to row on larger screens
-<Stack 
+<Stack
   direction={{ base: 'column', md: 'row' }}
   gap={4}
 >
@@ -321,24 +329,28 @@ function Button({ loading, children, ...props }) {
 ## Component Checklist
 
 ### Design
+
 - [ ] Follows design tokens
 - [ ] Has all necessary variants
 - [ ] Responsive behavior defined
 - [ ] Dark mode support
 
 ### Development
+
 - [ ] TypeScript types defined
 - [ ] Props documented
 - [ ] Unit tests written
 - [ ] Storybook stories created
 
 ### Accessibility
+
 - [ ] Keyboard navigation
 - [ ] Screen reader tested
 - [ ] Focus management
 - [ ] Color contrast
 
 ### Documentation
+
 - [ ] Usage examples
 - [ ] Props table
 - [ ] Do's and don'ts