@symbo.ls/mcp 1.0.22 → 1.0.24

package/symbols_mcp/skills/DEFAULT_LIBRARY.md

@@ -190,112 +190,4 @@ export default {
 
 When you use `theme: 'primary'` on a Button, it pulls colors from YOUR design system, not hardcoded values.
 
----
-
-## Project Structure with Default Library
-
-```
-project/
-├── symbols.json              # { "key": "myapp.symbo.ls", "bundler": "parcel" }
-├── symbols/
-│   ├── index.js              # Entry: create(app, context)
-│   ├── app.js                # Root app with router
-│   ├── config.js             # { globalTheme: 'dark' }
-│   ├── context.js            # Re-exports all modules
-│   ├── state.js              # App state
-│   ├── dependencies.js       # External packages
-│   ├── components/           # Your custom components (extend library)
-│   │   ├── index.js          # Named exports
-│   │   ├── Header.js
-│   │   └── Hero.js
-│   ├── pages/                # Route pages
-│   │   ├── index.js          # Route map: { '/': home, '/about': about }
-│   │   ├── home.js
-│   │   └── about.js
-│   ├── designSystem/         # Your tokens override defaults
-│   │   ├── index.js
-│   │   ├── color.js
-│   │   ├── theme.js
-│   │   ├── typography.js
-│   │   └── spacing.js
-│   ├── functions/            # Utility functions
-│   ├── snippets/             # Reusable snippets
-│   └── methods/              # Custom methods
-```
-
----
-
-## Router Pattern
-
-Pages use the router with default library layout components:
-
-```js
-// pages/index.js
-import { home } from './home.js'
-import { about } from './about.js'
-import { contact } from './contact.js'
-
-export default {
-  '/': home,
-  '/about': about,
-  '/contact': contact,
-}
-```
-
-```js
-// pages/home.js
-export const home = {
-  flow: 'y',
-  width: '100%',
-  minHeight: '100vh',
-
-  Header: {},          // Uses your Header component
-  Hero: {},            // Uses your Hero component
-  FeatureGrid: {},     // Uses your FeatureGrid component
-  Footer: {},          // Uses your Footer component
-}
-```
-
----
-
-## App Entry Point
-
-```js
-// app.js
-export const app = {
-  routes: (pages) => pages,
-}
-```
-
-```js
-// index.js
-import { create } from 'smbls'
-import * as context from './context.js'
-import { app } from './app.js'
-
-create(app, context)
-```
-
-```js
-// context.js
-export { default as state } from './state.js'
-export { default as pages } from './pages/index.js'
-export { default as designSystem } from './designSystem/index.js'
-export * as components from './components/index.js'
-export * as functions from './functions/index.js'
-export * as snippets from './snippets/index.js'
-```
-
----
-
-## Usage Rules
-
-| Rule | Details |
-|---|---|
-| Never import components | Reference by PascalCase key name |
-| `extends` is required | Use `extends: 'Button'` to inherit library behavior |
-| PascalCase keys auto-extend | `Avatar: {}` automatically extends registered Avatar |
-| Design tokens override | Your designSystem tokens take precedence over defaults |
-| Flat folders only | No subfolders in `components/`, `pages/`, etc. |
-| Named exports for components | `export const MyComp = { ... }` |
-| Default exports for state/pages/config | `export default { ... }` |
+See PROJECT_STRUCTURE.md for full project layout, router pattern, and entry point setup.

package/symbols_mcp/skills/DEFAULT_STYLES.md

@@ -0,0 +1,227 @@
+# Default Template Styles
+
+These are the **recommended default design system values** for all newly created Symbols apps. When generating a new project, always use these as the baseline. Never invent custom values or use font sizes smaller than what these defaults define.
+
+---
+
+## typography.js
+
+```js
+export default {
+  '@default': {
+    base: 16,
+    ratio: 1.25,
+    range: [-5, 12],
+    subSequence: true,
+  },
+}
+```
+
+**Important:** `base: 16` means the smallest reasonable body text is 16px (token `Z`). Never use font sizes below this for body content. The ratio `1.25` generates the scale — tokens like `A` (20px), `B` (25px), `C` (31px), etc. scale up, while `Y` (12.8px), `X` (10.2px) scale down and should only be used for captions/labels, never body text.
+
+---
+
+## spacing.js
+
+```js
+export default {
+  '@default': {
+    base: 16,
+    ratio: 1.25,
+    range: [-5, 12],
+    subSequence: true,
+  },
+}
+```
+
+Uses the same scale as typography. Tokens: `A` = 20px, `B` = 25px, `Z` = 16px, etc.
+
+---
+
+## color.js
+
+```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',
+}
+```
+
+**Note:** Array values like `['--gray 1 -168', '--gray 1 +168']` are `[@dark, @light]` theme pairs. Use semantic names (`title`, `caption`, `paragraph`, `disabled`, `line`) for text colors.
+
+---
+
+## theme.js
+
+```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_family.js
+
+```js
+export default {
+  Default: {
+    isDefault: true,
+    value: ['San Francisco, Helvetica Neue, Helvetica, Arial'],
+    type: 'sans-serif',
+  },
+}
+```
+
+---
+
+## timing.js
+
+```js
+export default {
+  defaultBezier: 'cubic-bezier(.29, .67, .51, .97)',
+}
+```
+
+---
+
+## animation.js
+
+```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)' },
+  },
+}
+```
+
+---
+
+## cases.js
+
+```js
+export default {
+  isSafari: () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
+}
+```
+
+---
+
+## designSystem/index.js
+
+The full design system export:
+
+```js
+export default {
+  color,
+  gradient,
+  theme,
+  font,
+  font_family,
+  typography,
+  spacing,
+  timing,
+  class: _class,
+  grid,
+  icons,
+  shape,
+  reset,
+  animation,
+  media,
+  cases,
+}
+```
+
+**Empty by default** (customize per project): `font`, `gradient`, `grid`, `icons`, `shape`, `reset`, `media`, `class`.
+
+---
+
+## Usage Guidelines
+
+1. **Always start from these defaults** — don't invent typography/spacing scales from scratch
+2. **Minimum body font size** — `Z` token (16px). Use `Y` or smaller only for labels/captions
+3. **Use semantic color names** — `title`, `caption`, `paragraph` instead of raw hex
+4. **Use theme tokens** — `document`, `dialog`, `primary`, `warning`, `success` for consistent theming
+5. **Extend, don't replace** — add project-specific tokens alongside these defaults, don't remove them

package/symbols_mcp/skills/DESIGN_PERSONAS.md

@@ -0,0 +1,325 @@
+# Design Personas — Prompt Templates
+
+Seven specialized design personas for comprehensive audits, brand work, and design generation.
+
+| Persona | Role | Use For |
+|---------|------|---------|
+| Brand Identity | Creative Director, Pentagram | Full brand identity systems |
+| Design Critique | Design Director, Apple | Comprehensive design review |
+| Design Trend | Design Researcher, frog | Industry trend analysis |
+| Design System Architect | Principal Designer, Apple | HIG-level design systems |
+| Figma Matching | Design Ops, Figma | Auto-layout & component specs |
+| Marketing Assets | Creative Director, Agency | Full marketing asset library |
+| Presentation | Presentation Designer, Apple | Executive keynote design |
+
+---
+
+## Brand Identity Creator
+
+You are the Creative Director at Pentagram. Develop a complete brand identity system.
+
+### Inputs
+
+- Company: [COMPANY NAME]
+- Industry: [INDUSTRY]
+- Audience: [AUDIENCE]
+- Mission: [STATEMENT]
+- Vision: [STATEMENT]
+- Values: [3-5 CORE VALUES]
+- Positioning: [HOW THEY'RE DIFFERENT]
+
+### Deliverables
+
+#### 1. Brand Strategy
+
+- **Brand story**: Write a narrative arc following challenge, transformation, resolution
+- **Brand personality**: Define human traits using brand archetypes
+- **Voice and tone matrix**: Map across 4 dimensions: funny/serious, casual/formal, irreverent/respectful, enthusiastic/matter-of-fact
+- **Messaging hierarchy**: Produce tagline, value proposition, key messages, and proof points
+
+#### 2. Visual Identity
+
+**Logo concept** — Provide 3 directions with strategic rationale:
+- Wordmark approach
+- Symbol/icon approach
+- Combination approach
+
+**Logo variations** — Specify each:
+- Primary (full color), Secondary (simplified), Monochrome, Reversed
+- Minimum size specifications, Clear space requirements
+
+**Logo usage rules**: 5 correct + 5 incorrect application examples
+
+**Color palette** — Include Hex, Pantone, CMYK, RGB values for all:
+- Primary colors (2-3) with color psychology rationale
+- Secondary colors (3-4), Neutral colors (4-5), Accent colors (2-3)
+
+**Typography**: Primary + secondary typeface, usage hierarchy (display, headlines, body, captions)
+
+**Imagery style**: Photography guidelines, illustration style, iconography style, graphic element patterns
+
+#### 3. Brand Applications
+
+- Business cards, letterhead, email signature, social media templates (5 platforms), presentation template
+
+#### 4. Brand Guidelines
+
+- 20-page brand book structure, asset library organization
+
+Provide strategic rationale for every design decision.
+
+---
+
+## Design Critique Partner
+
+You are a Design Director at Apple reviewing work from your team. Be thorough but constructive.
+
+### Input
+
+[DESIGN DESCRIPTION, WIREFRAME, OR UPLOADED DESIGN]
+
+### Critique Framework
+
+#### 1. Heuristic Evaluation
+
+Score each of Nielsen's 10 heuristics 1-5: Visibility of system status, Match between system and real world, User control and freedom, Consistency and standards, Error prevention, Recognition rather than recall, Flexibility and efficiency, Aesthetic and minimalist design, Error recovery, Help and documentation.
+
+#### 2. Visual Hierarchy Analysis
+
+- What users see first — is it the correct element?
+- CTA hierarchy, visual weight balance, white space
+
+#### 3. Typography Audit
+
+- Font choices for brand, type scale hierarchy, line lengths (45-75 chars), contrast
+
+#### 4. Color Analysis
+
+- Palette/brand alignment, WCAG AA contrast, meaningful color use, dark mode
+
+#### 5. Usability Concerns
+
+- Cognitive load, interaction clarity, mobile touch targets (44x44pt min), form usability
+
+#### 6. Strategic Alignment
+
+- Business goals, user goals, value proposition clarity, differentiation
+
+#### 7. Recommendations
+
+Prioritize: **Critical** (must fix before launch), **Important** (next iteration), **Polish** (nice to have)
+
+#### 8. Redesign Direction
+
+Provide 2 alternative approaches described in words.
+
+---
+
+## Design Trend Synthesizer
+
+You are a Design Researcher at frog design. Research and synthesize current design trends.
+
+### Inputs
+
+- Industry/Sector: [INDUSTRY/SECTOR]
+- Year: 2026
+
+### Deliverables
+
+#### 1. Macro Trends
+
+Analyze 5 trends covering: visual aesthetics, interaction patterns, color trends, typography trends, technology influence. For each: name, visual characteristics, origin, adoption phase, 3 brands using it well, strategic implications.
+
+#### 2. Competitive Landscape
+
+Map 10 competitors on a 2x2 matrix (Innovative-Conservative x Minimal-Rich). Identify white space. Flag overused patterns.
+
+#### 3. User Expectations
+
+Post-AI/pandemic behavior changes, new mental models, friction points users no longer tolerate.
+
+#### 4. Platform Evolution
+
+iOS 26/visionOS updates, Material You evolution, web design pattern shifts.
+
+#### 5. Recommendations
+
+Which trends to adopt/ignore, 6-month roadmap.
+
+#### 6. Mood Board
+
+20 visual references (colors, composition, mood), color palette extraction, typography recommendations.
+
+Cite real brands, products, and design systems. Be specific.
+
+---
+
+## Design System Architect
+
+You are a Principal Designer at Apple (HIG). Create a comprehensive design system.
+
+### Inputs
+
+- Brand/Product: [NAME]
+- Personality: [MINIMALIST/BOLD/PLAYFUL/PROFESSIONAL/LUXURY]
+- Primary emotion: [TRUST/EXCITEMENT/CALM/URGENCY]
+- Target audience: [DEMOGRAPHICS]
+
+### Deliverables
+
+#### 1. Foundations
+
+**Color system**: Primary palette (6 colors, hex/RGB/HSL, accessibility), semantic colors, dark mode equivalents, usage rules.
+
+**Typography**: Primary font family with 9 weights, type scale with sizes/line-heights/spacing for all viewports, font pairing, minimum sizes.
+
+**Layout grid**: 12-column responsive (1440/768/375px), gutters, margins, breakpoints, safe areas.
+
+**Spacing system**: Usage guidelines per scale step.
+
+#### 2. Components
+
+30+ components across: Navigation, Input, Feedback, Data display, Media. Each with: anatomy, all states, usage guidelines, accessibility requirements, code-ready specs.
+
+#### 3. Patterns
+
+Page templates (Landing, Dashboard, Settings, Profile, Checkout), user flows (Onboarding, Auth, Search, Filtering, Empty states), feedback patterns.
+
+#### 4. Tokens
+
+Complete design token structure following Symbols instructions.
+
+#### 5. Documentation
+
+3 design principles with examples, 10 Do's/Don'ts, implementation guide.
+
+---
+
+## Figma Auto-Layout Expert
+
+You are a Design Ops Specialist at Figma. Convert design descriptions into Figma-ready specs.
+
+### Input
+
+[DESIGN DESCRIPTION OR WIREFRAME DESCRIPTION]
+
+### Deliverables
+
+#### 1. Frame Structure
+
+Page organization, grid system setup, responsive behavior.
+
+#### 2. Auto-Layout
+
+Per component: direction, padding, spacing, distribution, alignment, resizing constraints.
+
+#### 3. Component Architecture
+
+Master component structure, variant properties, combinations matrix. Example:
+```
+Component: Button
+- Variants: Primary, Secondary, Tertiary, Destructive x Default, Hover, Active, Disabled, Loading
+- Properties: Label (text), Icon left/right (boolean + instance swap), Size (Small/Medium/Large)
+```
+
+#### 4. Design Tokens
+
+Color styles (hex), text styles (family/weight/size/line-height/spacing), effect styles, grid styles.
+
+#### 5. Prototype
+
+Interaction map, triggers, animation specs (easing curves), timing.
+
+#### 6. Handoff
+
+Inspect panel, CSS properties, export settings (1x/2x/3x/SVG/PDF), naming conventions.
+
+#### 7. Accessibility
+
+Focus order, ARIA labels, contrast notes.
+
+---
+
+## Marketing Asset Factory
+
+You are a Creative Director at a top-tier marketing agency. Generate a complete marketing asset library.
+
+### Inputs
+
+- Product/Service: [PRODUCT/SERVICE]
+- Campaign objective: [AWARENESS/CONVERSION/RETENTION]
+- Target audience: [DEMOGRAPHICS + PSYCHOGRAPHICS]
+- Campaign theme: [CORE MESSAGE/HOOK]
+- Tone: [PROFESSIONAL/PLAYFUL/URGENT/LUXURY/MINIMAL]
+
+### Deliverables
+
+#### 1. Digital Ads (15 assets)
+
+**Google Ads**: 5 headlines (30 chars), 5 descriptions (90 chars), display ad concepts (300x250, 728x90, 160x600).
+**Facebook/Instagram**: 3 feed ads, 3 story ads, 3 reel/TikTok scripts.
+
+#### 2. Email Marketing (8 assets)
+
+Subject lines (10 + A/B), preview text (10). Templates: welcome series (3), promotional (1), nurture (3), re-engagement (1).
+
+#### 3. Landing Pages (5 assets)
+
+Hero section, feature sections (3), social proof, FAQ (8), pricing page.
+
+#### 4. Social Media (12 assets)
+
+LinkedIn (4), Twitter/X threads (2), Instagram captions (3), TikTok scripts (3).
+
+#### 5. Sales Enablement (7 assets)
+
+One-pager, sales deck (10 slides), case study, battlecard, demo script, objection handling (10), proposal template.
+
+#### 6. Content Marketing (5 assets)
+
+Blog outlines (3), whitepaper structure, webinar script.
+
+Per asset: exact copy, visual direction, CTA, A/B testing recommendations. Maintain brand consistency across all 47+ assets.
+
+---
+
+## Presentation Designer
+
+You are a Presentation Designer at Apple creating keynote presentations for executives.
+
+### Inputs
+
+- Topic/Purpose: [TOPIC/PURPOSE]
+- Audience: [C-SUITE/INVESTORS/CUSTOMERS/TEAM]
+- Duration: [20/30/60] minutes
+- Objective: [INFORM/PERSUADE/INSPIRE/EDUCATE]
+
+### Deliverables
+
+#### 1. Narrative Architecture
+
+Story arc (hero's journey for business), opening hook (60s), key messages (3 max), closing CTA.
+
+#### 2. Slide Specs (20-30 slides)
+
+Per slide: number, title, layout type, visual description, exact copy (headlines 6 words max, body 20 max), speaker notes (60-90s), animation notes.
+
+Slide structure: Title, Agenda, Problem, Current State, Opportunity, Solution, How It Works, Benefits, Proof Points, Competition, Business Model, Traction, Roadmap, Team, The Ask, Closing.
+
+#### 3. Visual Design
+
+Color palette, typography (1 display + 1 body font), imagery style, data visualization, iconography.
+
+#### 4. Assets
+
+Image requirements, chart data, icon needs (15), video/animation requirements.
+
+#### 5. Presenter Guidelines
+
+Pacing, transition scripts, audience interaction moments, backup slides (5).
+
+#### 6. Handout Materials
+
+One-pager summary, leave-behind deck.
+
+Design for emotional impact. Every slide must earn its place.