@symbo.ls/mcp 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/mcp",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Symbols.app MCP — docs, code generation, publishing, CLI/SDK reference",
   "mcpName": "io.github.symbo-ls/symbols-mcp",
   "files": [

package/symbols_mcp/skills/AUDIT.md

@@ -59,26 +59,19 @@ Before auditing, confirm that every skill below has been consulted. Do not proce
 
 ### Design System
 - DESIGN_SYSTEM
-- DESIGN_SYSTEM_ARCHITECT
 - DEFAULT_LIBRARY
+- DEFAULT_STYLES
 
 ### UI / UX / Direction
 - PATTERNS
 - DESIGN_DIRECTION
-- DESIGN_CRITIQUE
-- DESIGN_TREND
 - DESIGN_TO_CODE
-- FIGMA_MATCHING
+- DESIGN_PERSONAS (includes: Brand Identity, Design Critique, Design Trend, Design System Architect, Figma Matching, Marketing Assets, Presentation)
 
 ### Components
 - COMPONENTS
 - DEFAULT_COMPONENTS
 
-### Brand / Presentation
-- BRAND_IDENTITY
-- MARKETING_ASSETS
-- PRESENTATION
-
 ### SEO
 - SEO-METADATA
 
@@ -155,7 +148,7 @@ Complete each phase fully before moving to the next.
 1. Align all layouts and flows with DESIGN_DIRECTION.md.
 2. Enforce visual hierarchy discipline.
 3. Fix all layout inconsistencies.
-4. Validate Figma-to-code fidelity per FIGMA_MATCHING.
+4. Validate Figma-to-code fidelity per DESIGN_PERSONAS (Figma Matching section).
 5. Remove all visual noise.
 
 ---

package/symbols_mcp/skills/COMMON_MISTAKES.md

@@ -242,18 +242,24 @@ set({ color: { blue: '#00f' }, typography: { base: 16 } })
 
 ---
 
-## 14. Navigation — use `el.router()`, never `window.location`
+## 14. Navigation — use `el.router()` with root element, never `window.location`
 
 ```js
 // ❌ WRONG — bypasses SPA routing
 onClick: () => { window.location.href = '/' }
 onClick: () => { window.location.assign('/dashboard') }
 
-// ✅ CORRECT — framework routing
+// ❌ WRONG — el is a leaf/button, has no routes — throws "Cannot read properties of undefined"
+onClick: (e, el) => el.router('/')
+onClick: (e, el) => el.router('/', el)
+
+// ✅ CORRECT — pass root element that holds route map
 onClick: (e, el) => el.router('/', el.getRoot())
 onClick: (e, el) => el.router('/dashboard', el.getRoot())
 ```
 
+`el.getRoot()` returns the DOMQL root element which holds the `routes` map. Passing any other element causes a runtime error.
+
 ---
 
 ## 15. Links — use `extends: 'Link'` with `href` as prop, never `attr: { href }`
@@ -268,3 +274,57 @@ Nav: { tag: 'a', attr: { href: '/about' } }
 // ✅ CORRECT — Link component with href as prop
 Nav: { extends: 'Link', href: '/about', text: 'About' }
 ```
+
+---
+
+## 16. Animated elements — use `opacity + pointerEvents`, never `show` for transitions
+
+`show: false` sets `display: none`, which cuts CSS transitions instantly. Elements that animate in/out must stay in the DOM.
+
+```js
+// ❌ WRONG — show removes element from layout, transitions never fire
+Dropdown: {
+  show: (el, s) => s.root.open,
+  transition: 'opacity 0.2s ease',  // Ignored — element is display:none when closed
+}
+
+// ✅ CORRECT — element stays in DOM, transitions work
+Dropdown: {
+  opacity: (el, s) => s.root.open ? '1' : '0',
+  pointerEvents: (el, s) => s.root.open ? 'auto' : 'none',
+  transition: 'opacity 0.2s ease, transform 0.2s ease',
+  transform: (el, s) => s.root.open ? 'translateY(0)' : 'translateY(-6px)',
+}
+```
+
+Use `show` only for elements that should be fully removed from layout with no animation. For modals, dropdowns, tooltips, drawers — always use the opacity pattern.
+
+---
+
+## 17. CSS selectors — nest media and pseudo, never chain into one string
+
+```js
+// ❌ WRONG — chained selector string
+'@dark :hover': { background: 'blue' }
+'@mobileL :focus': { outline: 'none' }
+
+// ✅ CORRECT — nested objects
+'@dark': { ':hover': { background: 'blue' } }
+'@mobileL': { ':focus': { outline: 'none' } }
+```
+
+---
+
+## 18. Colors — define once, shade with modifiers, not Tailwind-style palettes
+
+```js
+// ❌ WRONG — multiple shade definitions
+color: {
+  blue50: '#eff6ff', blue100: '#dbeafe', blue200: '#bfdbfe',
+  blue300: '#93c5fd', blue400: '#60a5fa', blue500: '#3b82f6',
+}
+
+// ✅ CORRECT — single base, use modifiers in components
+color: { blue: '#0474f2' }
+// Then: 'blue.7' (opacity), 'blue+20' (lighten), 'blue-30' (darken)
+```

package/symbols_mcp/skills/DEFAULT_COMPONENTS.md

@@ -1,455 +1,10 @@
 # Default Project Template — Complete Component Reference
 
 All components from the default Symbols project template (default.symbo.ls).
-These components are available in every project that includes the default library.
-Reference them by PascalCase key name — no imports needed.
+Available in every project that includes the default library.
+Reference by PascalCase key name — no imports needed.
 
----
-
-## Project Configuration
-
-### symbols.json
-```json
-{
-  "key": "default-flattened.symbo.ls",
-  "dir": ".",
-  "bundler": "parcel"
-}
-```
-
-### config.js
-```js
-export default {
-  useReset: true,
-  useVariable: true,
-  useFontImport: true,
-  useIconSprite: true,
-  useSvgSprite: true,
-  useDefaultConfig: true,
-  useDocumentTheme: true,
-  verbose: false,
-  globalTheme: 'auto'
-}
-```
-
-### context.js
-```js
-import state from './state.js'
-import dependencies from './dependencies.js'
-import * as components from './components/index.js'
-import * as snippets from './snippets/index.js'
-import pages from './pages/index.js'
-import * as functions from './functions/index.js'
-import * as methods from './methods/index.js'
-import designSystem from './designSystem/index.js'
-import cases from './cases.js'
-import files from './files/index.js'
-
-export default {
-  state,
-  dependencies,
-  components,
-  snippets,
-  pages,
-  functions,
-  methods,
-  designSystem,
-  cases,
-  files
-}
-```
-
-### state.js
-```js
-export default {};
-```
-
-### dependencies.js
-```js
-export default {};
-```
-
-### envs.js
-```js
-export default {}
-```
-
-### sharedLibraries.js
-```js
-export default []
-```
-
----
-
-## Design System
-
-### index.js (Design System entry)
-```js
-import color from './color.js'
-import gradient from './gradient.js'
-import theme from './theme.js'
-import font from './font.js'
-import font_family from './font_family.js'
-import typography from './typography.js'
-import spacing from './spacing.js'
-import timing from './timing.js'
-import _class from './class.js'
-import grid from './grid.js'
-import icons from './icons.js'
-import shape from './shape.js'
-import reset from './reset.js'
-import animation from './animation.js'
-import media from './media.js'
-import cases from './cases.js'
-
-export default {
-  color: color,
-  gradient: gradient,
-  theme: theme,
-  font: font,
-  font_family: font_family,
-  typography: typography,
-  spacing: spacing,
-  timing: timing,
-  class: _class,
-  grid: grid,
-  icons: icons,
-  shape: shape,
-  reset: reset,
-  animation: animation,
-  media: media,
-  cases: cases,
-}
-```
-
-### color
-```js
-export default {
-  green: '#389d34',
-  red: '#e15c55',
-  yellow: '#EDCB38',
-  orange: '#e97c16',
-  transparent: 'rgba(0, 0, 0, 0)',
-  black: 'black',
-  gray: '#4e4e50',
-  white: '#ffffff',
-  title: [
-    '--gray 1 -168',
-    '--gray 1 +168',
-  ],
-  caption: [
-    '--gray 1 -68',
-    '--gray 1 +68',
-  ],
-  paragraph: [
-    '--gray 1 -42',
-    '--gray 1 +42',
-  ],
-  disabled: [
-    '--gray 1 -26',
-    '--gray 1 +26',
-  ],
-  line: [
-    '--gray 1 -16',
-    '--gray 1 +16',
-  ],
-  codGray: '#171717',
-  solitude: '#e5f1ff',
-  anakiwa: '#a3cdfd',
-  concrete: '#f2f2f2',
-  blue: '#0474f2',
-  phosphorus: '#4db852',
-};
-```
-
-### gradient
-```js
-export default {};
-```
-
-### theme
-```js
-export default {
-  document: {
-    '@dark': {
-      background: 'codGray',
-      color: 'title',
-    },
-    '@light': {
-      background: 'gray 1 +168',
-      color: 'title',
-    },
-  },
-  dialog: {
-    '@dark': {
-      background: 'gray 0.95 -68',
-      color: 'title',
-      backdropFilter: 'blur(3px)',
-      borderColor: 'gray 0',
-      outlineColor: 'blue',
-    },
-    '@light': {
-      background: 'gray .95 +150',
-      color: 'title',
-      backdropFilter: 'blur(3px)',
-      borderColor: 'gray 0',
-      outlineColor: 'blue',
-    },
-  },
-  'dialog-elevated': {
-    '@dark': {
-      color: 'title',
-      background: 'gray 1 +68',
-      borderColor: 'gray 0',
-      outlineColor: 'blue',
-      backgroundKey: 'caption',
-    },
-    '@light': {
-      color: 'title',
-      background: 'gray 0.95 +140',
-      borderColor: 'gray 0',
-      outlineColor: 'blue',
-    },
-  },
-  field: {
-    '@dark': {
-      color: 'white',
-      background: 'gray 0.95 -65',
-      '::placeholder': {
-        color: 'white 1 -78',
-      },
-    },
-    '@light': {
-      color: 'black',
-      '::placeholder': {
-        color: 'gray 1 -68',
-      },
-    },
-  },
-  'field-dialog': {
-    '@dark': {
-      background: 'gray 1 -16',
-      color: 'title',
-    },
-    '@light': {
-      color: 'title',
-      background: 'gray 1 -96',
-    },
-  },
-  primary: {
-    '@dark': {
-      background: 'blue',
-      color: 'white',
-    },
-    '@light': {
-      color: 'white',
-      background: 'blue',
-    },
-  },
-  warning: {
-    '@dark': {
-      background: 'red',
-      color: 'white',
-    },
-    '@light': {
-      color: 'white',
-      background: 'red',
-    },
-  },
-  success: {
-    '@dark': {
-      background: 'green',
-      color: 'white',
-    },
-    '@light': {
-      background: 'green',
-      color: 'white',
-    },
-  },
-  none: {
-    color: 'none',
-    background: 'none',
-  },
-  transparent: {
-    color: 'currentColor',
-    background: 'transparent',
-  },
-  bordered: {
-    background: 'transparent',
-    '@dark': {
-      border: '1px solid #4e4e50',
-    },
-    '@light': {
-      border: '1px solid #a3cdfd',
-    },
-  },
-};
-```
-
-### font
-```js
-export default {};
-```
-
-### font_family
-```js
-export default {
-  Default: {
-    isDefault: true,
-    value: [
-      'San Francisco, Helvetica Neue, Helvetica, Arial',
-    ],
-    type: 'sans-serif',
-  },
-};
-```
-
-### typography
-```js
-export default {
-  '@default': {
-    base: 16,
-    ratio: 1.25,
-    range: [
-      -5,
-      12,
-    ],
-    subSequence: true,
-  },
-};
-```
-
-### spacing
-```js
-export default {
-  '@default': {
-    base: 16,
-    ratio: 1.25,
-    range: [
-      -5,
-      12,
-    ],
-    subSequence: true,
-  },
-};
-```
-
-### TIMING
-```js
-export default {
-  defaultBezier: 'cubic-bezier(.29, .67, .51, .97)',
-};
-```
-
-### CLASS
-```js
-export default {};
-```
-
-### GRID
-```js
-export default {};
-```
-
-### icons
-```js
-export default {
-  symbols: '<svg height="24" width="24"><path d="M13.843 2.7C19.063 2.7 23 6.366 23 11.228c0 3.754-2.862 6.584-6.658 6.584-3.287 0-5.007-2.318-5.007-4.609 0-2.395 1.923-4.344 4.287-4.344.566 0 1.023.12 1.309.223a.212.212 0 01.137.229l-.016.058-.514 1.18a.223.223 0 01-.245.13 2.965 2.965 0 00-.506-.046c-1.245 0-2.258 1.027-2.258 2.288 0 1.33 1.165 2.373 2.651 2.373 2.195 0 3.913-1.777 3.913-4.046 0-3.024-2.294-5.135-5.58-5.135-4.076 0-7.393 3.36-7.393 7.491a7.519 7.519 0 002.871 5.924l-4.96 3.18A12.042 12.042 0 012 14.7c0-6.617 5.313-12 11.843-12z" fill-rule="evenodd"/></svg>',
-  logo: '<svg height="24" width="24"><path d="M13.843 2.7C19.063 2.7 23 6.366 23 11.228c0 3.754-2.862 6.584-6.658 6.584-3.287 0-5.007-2.318-5.007-4.609 0-2.395 1.923-4.344 4.287-4.344.566 0 1.023.12 1.309.223a.212.212 0 01.137.229l-.016.058-.514 1.18a.223.223 0 01-.245.13 2.965 2.965 0 00-.506-.046c-1.245 0-2.258 1.027-2.258 2.288 0 1.33 1.165 2.373 2.651 2.373 2.195 0 3.913-1.777 3.913-4.046 0-3.024-2.294-5.135-5.58-5.135-4.076 0-7.393 3.36-7.393 7.491a7.519 7.519 0 002.871 5.924l-4.96 3.18A12.042 12.042 0 012 14.7c0-6.617 5.313-12 11.843-12z" fill-rule="evenodd"/></svg>',
-  arrowDownCircle: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-circle"><circle cx="12" cy="12" r="10"/><path d="M8 12l4 4 4-4M12 8v8"/></svg>',
-  arrowDownLeft: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-left"><path d="M17 7L7 17M17 17H7V7"/></svg>',
-  arrowDownRight: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-right"><path d="M7 7l10 10M17 7v10H7"/></svg>',
-  arrowDown: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>',
-  arrowLeftCircle: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"/><path d="M12 8l-4 4 4 4M16 12H8"/></svg>',
-  arrowLeft: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>',
-  arrowRight: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><path d="M5 12h14M12 5l7 7-7 7"/></svg>',
-  arrowRightCircle: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle"><circle cx="12" cy="12" r="10"/><path d="M12 16l4-4-4-4M8 12h8"/></svg>',
-  arrowUpCircle: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-circle"><circle cx="12" cy="12" r="10"/><path d="M16 12l-4-4-4 4M12 16V8"/></svg>',
-  arrowUpLeft: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-left"><path d="M17 17L7 7M7 17V7h10"/></svg>',
-  arrowUpRight: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-right"><path d="M7 17L17 7M7 7h10v10"/></svg>',
-  arrowUp: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><path d="M12 19V5M5 12l7-7 7 7"/></svg>',
-  checkCircle: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>',
-  check: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><path d="M20 6L9 17l-5-5"/></svg>',
-  chevronDown: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><path d="M6 9l6 6 6-6"/></svg>',
-  chevronLeft: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><path d="M15 18l-6-6 6-6"/></svg>',
-  chevronRight: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><path d="M9 18l6-6-6-6"/></svg>',
-  chevronUp: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><path d="M18 15l-6-6-6 6"/></svg>',
-  copy: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>',
-  eyeOff: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22"/></svg>',
-  eye: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
-  info: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>',
-  lock: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>',
-  minus: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><path d="M5 12h14"/></svg>',
-  sun: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>',
-  moon: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>',
-  moreHorizontal: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>',
-  moreVertical: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>',
-  send: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>',
-  smile: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>',
-  search: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>',
-  upload: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>',
-  video: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>',
-  x: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><path d="M18 6L6 18M6 6l12 12"/></svg>',
-  star: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>',
-  plus: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><path d="M12 5v14M5 12h14"/></svg>',
-};
-```
-
-### SHAPE
-```js
-export default {};
-```
-
-### reset
-```js
-export default {};
-```
-
-### ANIMATION
-```js
-export default {
-  fadeInUp: {
-    from: {
-      transform: 'translate3d(0, 12.5%, 1px)',
-      opacity: 0,
-    },
-    to: {
-      transform: 'translate3d(0, 0, 1px)',
-      opacity: 1,
-    },
-  },
-  fadeOutDown: {
-    from: {
-      transform: 'translate3d(0, 0, 1px)',
-      opacity: 1,
-    },
-    to: {
-      transform: 'translate3d(0, 12.5%, 1px)',
-      opacity: 0,
-    },
-  },
-  marquee: {
-    from: {
-      transform: 'translate3d(0, 0, 1px)',
-    },
-    to: {
-      transform: 'translate3d(-50%, 0, 1px)',
-    },
-  },
-};
-```
-
-### media
-```js
-export default {};
-```
-
-### CASES
-```js
-export default {
-  isSafari: () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
-};
-```
+For project configuration, see PROJECT_STRUCTURE.md. For design system values, see DEFAULT_STYLES.md.
 
 ---
 
@@ -3801,42 +3356,3 @@ export const Video = {
 
 ---
 
-## Pages
-
-The pages index exports an empty object:
-
-```js
-export default {
-
-}
-```
-
----
-
-## Functions
-
-### functions/index.js
-```js
-export * from './fibonacciNumberByIndex.js';
-export * from './fibonacciNumberByIndexCopy.js';
-```
-
-### fibonacciNumberByIndex
-```js
-export const fibonacciNumberByIndex = {};
-```
-
-### fibonacciNumberByIndexCopy
-```js
-export const fibonacciNumberByIndexCopy = {};
-```
-
----
-
-## Snippets
-
-The snippets index is empty (no exported snippets).
-
-```js
-// empty
-```