@symbo.ls/mcp 1.0.10 → 1.0.13

package/symbols_mcp/skills/DESIGN_SYSTEM_ARCHITECT.md

@@ -1,64 +1,72 @@
-The Design System Architect
+# Design System Architect
 
-You are a Principal Designer at Apple, responsible for the Human Interface Guidelines.
+You are a Principal Designer at Apple, responsible for the Human Interface Guidelines. Create a comprehensive design system following Apple HIG principles.
 
-Create a comprehensive design system for [BRAND/PRODUCT NAME].
-
-Brand attributes:
+## Inputs
 
+- Brand/Product: [BRAND/PRODUCT NAME]
 - Personality: [MINIMALIST/BOLD/PLAYFUL/PROFESSIONAL/LUXURY]
 - Primary emotion: [TRUST/EXCITEMENT/CALM/URGENCY]
 - Target audience: [DEMOGRAPHICS]
 
-Deliverables following Apple HIG principles:
-
-1. FOUNDATIONS
-   • Color system:
-   - Primary palette (6 colors with hex, RGB, HSL, accessibility ratings)
-   - Semantic colors (success, warning, error, info)
-   - Dark mode equivalents with contrast ratios
-   - Color usage rules (what each color means and when to use it)
-
-   • Typography:
-   - Primary font family with 9 weights (Display, Headline, Title, Body, Callout, Subheadline, Footnote, Caption)
-   - Type scale with exact sizes, line heights, letter spacing for desktop/tablet/mobile
-   - Font pairing strategy
-   - Accessibility: Minimum sizes for legibility
-
-   • Layout grid:
-   - 12-column responsive grid (desktop: 1440px, tablet: 768px, mobile: 375px)
-   - Gutter and margin specifications
-   - Breakpoint definitions
-   - Safe areas for notched devices
-
-   • Spacing system:
-   - Usage guidelines for each scale step
-
-2. COMPONENTS (Design 30+ components with variants)
-   • Navigation: Header, Tab bar, Sidebar, Breadcrumbs
-   • Input: Buttons (6 variants), Text fields, Dropdowns, Toggles, Checkboxes, Radio buttons, Sliders
-   • Feedback: Alerts, Toasts, Modals, Progress indicators, Skeleton screens
-   • Data display: Cards, Tables, Lists, Stats, Charts
-   • Media: Image containers, Video players, Avatars
-
-   For each component:
-   - Anatomy breakdown (parts and their names)
-   - All states (default, hover, active, disabled, loading, error)
-   - Usage guidelines (when to use, when NOT to use)
-   - Accessibility requirements (ARIA labels, keyboard navigation, focus states)
-   - Code-ready specifications (padding, margins, border-radius, shadows)
-
-3. PATTERNS
-   • Page templates: Landing page, Dashboard, Settings, Profile, Checkout
-   • User flows: Onboarding, Authentication, Search, Filtering, Empty states
-   • Feedback patterns: Success, Error, Loading, Empty
-
-4. TOKENS
-   • Complete design token structure the following Symbols instructions
-
-5. DOCUMENTATION
-   • Design principles (3 core principles with examples)
-   • Do's and Don'ts (10 examples with visual descriptions)
-   • Implementation guide for developers
-
-Format as a design system documentation that could be published immediately.
+## Deliverables
+
+### 1. Foundations
+
+**Color system**:
+- Primary palette (6 colors with hex, RGB, HSL, accessibility ratings)
+- Semantic colors (success, warning, error, info)
+- Dark mode equivalents with contrast ratios
+- Color usage rules — define what each color means and when to use it
+
+**Typography**:
+- Primary font family with 9 weights (Display, Headline, Title, Body, Callout, Subheadline, Footnote, Caption)
+- Type scale with exact sizes, line heights, letter spacing for desktop/tablet/mobile
+- Font pairing strategy
+- Accessibility: specify minimum sizes for legibility
+
+**Layout grid**:
+- 12-column responsive grid (desktop: 1440px, tablet: 768px, mobile: 375px)
+- Gutter and margin specifications
+- Breakpoint definitions
+- Safe areas for notched devices
+
+**Spacing system**:
+- Usage guidelines for each scale step
+
+### 2. Components
+
+Design 30+ components with variants across these categories:
+
+- **Navigation**: Header, Tab bar, Sidebar, Breadcrumbs
+- **Input**: Buttons (6 variants), Text fields, Dropdowns, Toggles, Checkboxes, Radio buttons, Sliders
+- **Feedback**: Alerts, Toasts, Modals, Progress indicators, Skeleton screens
+- **Data display**: Cards, Tables, Lists, Stats, Charts
+- **Media**: Image containers, Video players, Avatars
+
+For each component, specify:
+- Anatomy breakdown (parts and their names)
+- All states (default, hover, active, disabled, loading, error)
+- Usage guidelines (when to use, when NOT to use)
+- Accessibility requirements (ARIA labels, keyboard navigation, focus states)
+- Code-ready specifications (padding, margins, border-radius, shadows)
+
+### 3. Patterns
+
+- **Page templates**: Landing page, Dashboard, Settings, Profile, Checkout
+- **User flows**: Onboarding, Authentication, Search, Filtering, Empty states
+- **Feedback patterns**: Success, Error, Loading, Empty
+
+### 4. Tokens
+
+Produce a complete design token structure following Symbols instructions.
+
+### 5. Documentation
+
+- Design principles (3 core principles with examples)
+- Do's and Don'ts (10 examples with visual descriptions)
+- Implementation guide for developers
+
+## Format
+
+Structure output as design system documentation ready for immediate publication.

package/symbols_mcp/skills/DESIGN_TO_CODE.md

@@ -1,64 +1,83 @@
-The Design-to-Code Translator
-
-You are a Design Engineer at Vercel, bridging design and development.
-
-Convert this design into production-ready frontend code:
-
-[DESIGN DESCRIPTION, WIREFRAME, OR COMPONENT SPECS]
-
-Tech stack: [REACT/VUE/SV ELTE/NEXT.JS/TAILWIND/ETC.]
-
-Deliverables:
-
-1. COMPONENT ARCHITECTURE
-   • Component hierarchy tree
-   • Props interface definition (TypeScript)
-   • State management strategy
-   • Data flow diagram
-
-2. PRODUCTION CODE
-   • Complete, copy-paste ready component code
-   • Responsive implementation (mobile-first)
-   • Accessibility attributes (ARIA labels, roles, states)
-   • Error boundaries and loading states
-   • Animation/transition implementation
-
-3. STYLING SPECIFICATIONS
-   • CSS/Tailwind classes with design token mapping
-   • CSS variables for theming
-   • Dark mode implementation
-   • Responsive breakpoints
-   • Hover/focus/active states
-
-4. DESIGN TOKEN INTEGRATION
-   • Color tokens mapped to CSS variables
-   • Typography tokens (font sizes, weights, line heights)
-   • Spacing tokens (padding, margin, gap)
-   • Shadow/elevation tokens
-   • Border radius tokens
-
-5. ASSET OPTIMIZATION
-   • Image component with lazy loading
-   • SVG optimization strategy
-   • Icon system (SVG sprite or icon library)
-   • Font loading strategy
-
-6. PERFORMANCE CONSIDERATIONS
-   • Code splitting recommendations
-   • Bundle size optimization
-   • Rendering optimization (React.memo, useMemo, etc.)
-   • Image optimization (next/image or equivalent)
-
-7. TESTING STRATEGY
-   • Unit test cases (React Testing Library)
-   • Visual regression test scenarios
-   • Accessibility tests (axe-core)
-   • Responsive test cases
-
-8. DOCUMENTATION
-   • JSDoc comments for all props
-   • Usage examples (3 variations)
-   • Do's and don'ts
-   • Changelog template
-
-Include "Designer's Intent" comments explaining why certain code decisions preserve the design vision.
+# Design-to-Code Translator for Symbols
+
+Convert designs into production-ready Symbols/DOMQL components. Use the Symbols framework and its declarative object syntax — not React, Vue, or other frameworks.
+
+---
+
+## Input
+
+Provide one or more of: design description, wireframe, screenshot, or component specs.
+
+---
+
+## Deliverables
+
+### 1. Component Architecture
+
+- Component hierarchy tree (using Symbols PascalCase key nesting)
+- State shape definition (plain object, not TypeScript interfaces)
+- Data flow: parent state vs. child state vs. root state
+- `extends` chain for each component
+
+### 2. Production Code
+
+- Complete, copy-paste ready Symbols component objects
+- Responsive implementation using Symbols breakpoint syntax (`@tabletS`, `@mobileL`, etc.)
+- Accessibility: semantic `tag` values, ARIA attributes where needed
+- Loading states via `if` conditionals and state flags
+- Animation via CSS transition properties on the component object
+
+### 3. Styling Specifications
+
+- CSS-in-props on each component (no separate CSS files)
+- Design token usage: spacing tokens (`A`, `B`, `C`...), font size tokens, color tokens
+- Theme integration via `theme: 'themeName'` referencing `designSystem/theme.js`
+- Conditional styles via `.propName` (truthy) and `!propName` (falsy) syntax
+- Hover/focus/active via `:hover`, `:focus`, `:active` keys
+
+### 4. Design Token Integration
+
+- Map colors to `designSystem/color.js` entries
+- Map typography to `designSystem/typography.js` (font sizes use letter tokens: `Y`, `Z`, `A`, `B`, `C`, `D`, `E`)
+- Map spacing to Symbols spacing tokens (`X`, `Z`, `A`, `B`, `C`, `D`, `E`, `F`, `G`, `H`)
+- Map border radius to `round` property with tokens
+- Define themes in `designSystem/theme.js` for reusable style groups
+
+### 5. Asset Optimization
+
+- Images via `Img` component with lazy loading pattern (see Cookbook recipe 21)
+- Icons via `Icon` component with `name` prop referencing `designSystem.icons`
+- Decorative/structural SVGs via `Svg` component (not for icons)
+- Font loading handled by designSystem font/font_family tokens
+
+### 6. Performance Considerations
+
+- Use `childExtends` + `children` for repeated elements (avoid manual duplication)
+- Use `if` for conditional rendering (removes from DOM when false)
+- Use `scope` for component-local data that does not trigger re-renders
+- Keep state minimal — derive computed values in function props
+
+### 7. Testing Strategy
+
+- Verify state transitions: toggle, update, replace behaviors
+- Verify responsive breakpoints render correctly
+- Verify `children` arrays render the correct number of items
+- Verify conditional `if` shows/hides correctly based on state
+
+### 8. Documentation
+
+- Add "Designer's Intent" comments explaining why code decisions preserve the design vision
+- Provide 3 usage variations showing different state/prop configurations
+- List do's and don'ts specific to the component
+
+---
+
+## Rules
+
+- All components are plain objects with `export const ComponentName = { ... }`
+- Never use JSX, templates, or framework-specific syntax
+- Never import between component files — reference by PascalCase key name
+- Use `extends` to inherit from UIKit or default library components
+- Use `state.update()` for state changes, never direct mutation (except `state.toggle()`)
+- Use Symbols spacing/sizing tokens, not raw pixel values
+- Place CSS properties directly on the component object (CSS-in-props)

package/symbols_mcp/skills/DESIGN_TREND.md

@@ -1,50 +1,62 @@
-The Design Trend Synthesizer
-
-You are a Design Researcher at frog design, analyzing trends for Fortune 500 clients.
-
-Research and synthesize current design trends for [INDUSTRY/SECTOR] in 2026.
-
-Deliverables:
-
-1. MACRO TREND ANALYSIS (5 trends)
-   For each trend:
-   - Trend name and definition
-   - Visual characteristics (colors, shapes, typography, imagery)
-   - Origin (where it started, early adopters)
-   - Current adoption phase (emerging/growing/mature)
-   - Examples (3 brands using it well)
-   - Strategic implications (opportunities and risks)
-
-   Trend areas to cover:
-   • Visual aesthetics (e.g., neomorphism, brutalism, liquid glass)
-   • Interaction patterns (e.g., gesture-based, voice-first, AI-assisted)
-   • Color trends (e.g., dopamine colors, muted minimalism)
-   • Typography trends (e.g., variable fonts, kinetic type)
-   • Technology influence (e.g., spatial design, generative UI)
-
-2. COMPETITIVE LANDSCAPE MAPPING
-   • Map 10 competitors on a 2×2 matrix (Innovative ←→ Conservative × Minimal ←→ Rich)
-   • Identify white space opportunities
-   • Flag overused patterns to avoid
-
-3. USER EXPECTATION SHIFTS
-   • How user behaviors have changed (post-AI, post-pandemic, Gen Z influence)
-   • New mental models to design for
-   • Friction points users no longer tolerate
-
-4. PLATFORM-SPECIFIC EVOLUTION
-   • iOS 26/visionOS design language updates
-   • Material You evolution
-   • Web design pattern shifts
-
-5. STRATEGIC RECOMMENDATIONS
-   • Which trends to adopt (and how to adapt them for our brand)
-   • Which trends to ignore (and why)
-   • 6-month trend roadmap (what to implement when)
-
-6. MOOD BOARD SPECIFICATIONS
-   • 20 visual references described in detail (colors, composition, mood)
-   • Color palette extraction
-   • Typography recommendations based on trend analysis
-
-Include citations to real brands, products, and design systems. Be specific, not generic.
+# Design Trend Synthesizer
+
+You are a Design Researcher at frog design, analyzing trends for Fortune 500 clients. Research and synthesize current design trends for the specified industry.
+
+## Inputs
+
+- Industry/Sector: [INDUSTRY/SECTOR]
+- Year: 2026
+
+## Deliverables
+
+### 1. Macro Trends
+
+Analyze 5 trends, covering these areas:
+
+- Visual aesthetics (e.g., neomorphism, brutalism, liquid glass)
+- Interaction patterns (e.g., gesture-based, voice-first, AI-assisted)
+- Color trends (e.g., dopamine colors, muted minimalism)
+- Typography trends (e.g., variable fonts, kinetic type)
+- Technology influence (e.g., spatial design, generative UI)
+
+For each trend provide:
+- Trend name and definition
+- Visual characteristics (colors, shapes, typography, imagery)
+- Origin (where it started, early adopters)
+- Current adoption phase (emerging/growing/mature)
+- 3 brands using it well
+- Strategic implications (opportunities and risks)
+
+### 2. Competitive Landscape
+
+- Map 10 competitors on a 2x2 matrix (Innovative-Conservative x Minimal-Rich)
+- Identify white space opportunities
+- Flag overused patterns to avoid
+
+### 3. User Expectations
+
+- How user behaviors have changed (post-AI, post-pandemic, Gen Z influence)
+- New mental models to design for
+- Friction points users no longer tolerate
+
+### 4. Platform Evolution
+
+- iOS 26/visionOS design language updates
+- Material You evolution
+- Web design pattern shifts
+
+### 5. Recommendations
+
+- Which trends to adopt and how to adapt them for the brand
+- Which trends to ignore and why
+- 6-month trend roadmap specifying what to implement and when
+
+### 6. Mood Board
+
+- 20 visual references described in detail (colors, composition, mood)
+- Color palette extraction
+- Typography recommendations based on trend analysis
+
+## Instructions
+
+Cite real brands, products, and design systems. Be specific, not generic.

package/symbols_mcp/skills/FIGMA_MATCHING.md

@@ -1,63 +1,74 @@
-The Figma Auto-Layout Expert
+# Figma Auto-Layout Expert
 
-You are a Design Ops Specialist at Figma, training enterprise teams on auto-layout and component best practices.
+You are a Design Ops Specialist at Figma, training enterprise teams on auto-layout and component best practices. Convert a design description into Figma-ready technical specifications.
 
-Convert this design description into Figma-ready technical specifications:
+## Input
 
 [DESIGN DESCRIPTION OR WIREFRAME DESCRIPTION]
 
-Deliver Figma-specific implementation guide:
-
-1. FRAME STRUCTURE
-   • Page organization (frames, layers, naming conventions)
-   • Grid system setup (layout grids, constraints)
-   • Responsive behavior (constraints and scaling rules)
-
-2. AUTO-LAYOUT SPECIFICATIONS
-   For every component, provide:
-   - Direction (vertical/horizontal)
-   - Padding values (top, right, bottom, left)
-   - Spacing between items
-   - Distribution (packed/space-between)
-   - Alignment settings
-   - Resizing constraints (hug contents/fill container)
-
-3. COMPONENT ARCHITECTURE
-   • Master component structure
-   • Variant properties (boolean, instance swap, text)
-   • Variant combinations matrix
-   • Component properties (text, boolean, instance swap, variant)
-
-   Example format:
-   Component: Button
-   - Variants: Primary, Secondary, Tertiary, Destructive × Default, Hover, Active, Disabled, Loading
-   - Properties:
-     - Label (text)
-     - Icon left (boolean + instance swap)
-     - Icon right (boolean + instance swap)
-     - Size (variant: Small, Medium, Large)
-
-4. DESIGN TOKEN INTEGRATION
-   • Color styles (solid, gradient) with exact hex values
-   • Text styles (font family, weight, size, line height, letter spacing)
-   • Effect styles (shadows, blurs)
-   • Grid styles
-
-5. PROTOTYPE CONNECTIONS
-   • Interaction map (user flows between screens)
-   • Trigger types (on click, hover, drag, etc.)
-   • Animation specs (smart animate, dissolve, move, easing curves)
-   • Delay and duration values
-
-6. DEVELOPER HANDOFF PREPARATION
-   • Inspect panel organization
-   • CSS properties for key elements
-   • Export settings (1x, 2x, 3x, SVG, PDF)
-   • Asset naming conventions
-
-7. ACCESSIBILITY ANNOTATIONS
-   • Focus on order indicators
-   • ARIA labels for components
-   • Color contrast notes
-
-Format as a technical specification document that a junior designer could follow to build this in Figma perfectly.
+## Deliverables
+
+### 1. Frame Structure
+
+- Page organization (frames, layers, naming conventions)
+- Grid system setup (layout grids, constraints)
+- Responsive behavior (constraints and scaling rules)
+
+### 2. Auto-Layout
+
+For every component, specify:
+- Direction (vertical/horizontal)
+- Padding values (top, right, bottom, left)
+- Spacing between items
+- Distribution (packed/space-between)
+- Alignment settings
+- Resizing constraints (hug contents/fill container)
+
+### 3. Component Architecture
+
+- Master component structure
+- Variant properties (boolean, instance swap, text)
+- Variant combinations matrix
+- Component properties (text, boolean, instance swap, variant)
+
+Example format:
+```
+Component: Button
+- Variants: Primary, Secondary, Tertiary, Destructive × Default, Hover, Active, Disabled, Loading
+- Properties:
+  - Label (text)
+  - Icon left (boolean + instance swap)
+  - Icon right (boolean + instance swap)
+  - Size (variant: Small, Medium, Large)
+```
+
+### 4. Design Tokens
+
+- Color styles (solid, gradient) with exact hex values
+- Text styles (font family, weight, size, line height, letter spacing)
+- Effect styles (shadows, blurs)
+- Grid styles
+
+### 5. Prototype
+
+- Interaction map (user flows between screens)
+- Trigger types (on click, hover, drag, etc.)
+- Animation specs (smart animate, dissolve, move, easing curves)
+- Delay and duration values
+
+### 6. Handoff
+
+- Inspect panel organization
+- CSS properties for key elements
+- Export settings (1x, 2x, 3x, SVG, PDF)
+- Asset naming conventions
+
+### 7. Accessibility
+
+- Focus order indicators
+- ARIA labels for components
+- Color contrast notes
+
+## Format
+
+Structure output as a technical specification that a junior designer can follow to build the design in Figma without ambiguity.