@ruyfranca/myskills 1.0.0

package/docs/artifacts-builder/scripts/init-artifact.sh

@@ -0,0 +1,322 @@
+#!/bin/bash
+
+# Exit on error
+set -e
+
+# Detect Node version
+NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
+
+echo "🔍 Detected Node.js version: $NODE_VERSION"
+
+if [ "$NODE_VERSION" -lt 18 ]; then
+  echo "❌ Error: Node.js 18 or higher is required"
+  echo "   Current version: $(node -v)"
+  exit 1
+fi
+
+# Set Vite version based on Node version
+if [ "$NODE_VERSION" -ge 20 ]; then
+  VITE_VERSION="latest"
+  echo "✅ Using Vite latest (Node 20+)"
+else
+  VITE_VERSION="5.4.11"
+  echo "✅ Using Vite $VITE_VERSION (Node 18 compatible)"
+fi
+
+# Detect OS and set sed syntax
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  SED_INPLACE="sed -i ''"
+else
+  SED_INPLACE="sed -i"
+fi
+
+# Check if pnpm is installed
+if ! command -v pnpm &> /dev/null; then
+  echo "📦 pnpm not found. Installing pnpm..."
+  npm install -g pnpm
+fi
+
+# Check if project name is provided
+if [ -z "$1" ]; then
+  echo "❌ Usage: ./create-react-shadcn-complete.sh <project-name>"
+  exit 1
+fi
+
+PROJECT_NAME="$1"
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+COMPONENTS_TARBALL="$SCRIPT_DIR/shadcn-components.tar.gz"
+
+# Check if components tarball exists
+if [ ! -f "$COMPONENTS_TARBALL" ]; then
+  echo "❌ Error: shadcn-components.tar.gz not found in script directory"
+  echo "   Expected location: $COMPONENTS_TARBALL"
+  exit 1
+fi
+
+echo "🚀 Creating new React + Vite project: $PROJECT_NAME"
+
+# Create new Vite project (always use latest create-vite, pin vite version later)
+pnpm create vite "$PROJECT_NAME" --template react-ts
+
+# Navigate into project directory
+cd "$PROJECT_NAME"
+
+echo "🧹 Cleaning up Vite template..."
+$SED_INPLACE '/<link rel="icon".*vite\.svg/d' index.html
+$SED_INPLACE 's/<title>.*<\/title>/<title>'"$PROJECT_NAME"'<\/title>/' index.html
+
+echo "📦 Installing base dependencies..."
+pnpm install
+
+# Pin Vite version for Node 18
+if [ "$NODE_VERSION" -lt 20 ]; then
+  echo "📌 Pinning Vite to $VITE_VERSION for Node 18 compatibility..."
+  pnpm add -D vite@$VITE_VERSION
+fi
+
+echo "📦 Installing Tailwind CSS and dependencies..."
+pnpm install -D tailwindcss@3.4.1 postcss autoprefixer @types/node tailwindcss-animate
+pnpm install class-variance-authority clsx tailwind-merge lucide-react next-themes
+
+echo "⚙️  Creating Tailwind and PostCSS configuration..."
+cat > postcss.config.js << 'EOF'
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+EOF
+
+echo "📝 Configuring Tailwind with shadcn theme..."
+cat > tailwind.config.js << 'EOF'
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+EOF
+
+# Add Tailwind directives and CSS variables to index.css
+echo "🎨 Adding Tailwind directives and CSS variables..."
+cat > src/index.css << 'EOF'
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+EOF
+
+# Add path aliases to tsconfig.json
+echo "🔧 Adding path aliases to tsconfig.json..."
+node -e "
+const fs = require('fs');
+const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));
+config.compilerOptions = config.compilerOptions || {};
+config.compilerOptions.baseUrl = '.';
+config.compilerOptions.paths = { '@/*': ['./src/*'] };
+fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));
+"
+
+# Add path aliases to tsconfig.app.json
+echo "🔧 Adding path aliases to tsconfig.app.json..."
+node -e "
+const fs = require('fs');
+const path = 'tsconfig.app.json';
+const content = fs.readFileSync(path, 'utf8');
+// Remove comments manually
+const lines = content.split('\n').filter(line => !line.trim().startsWith('//'));
+const jsonContent = lines.join('\n');
+const config = JSON.parse(jsonContent.replace(/\/\*[\s\S]*?\*\//g, '').replace(/,(\s*[}\]])/g, '\$1'));
+config.compilerOptions = config.compilerOptions || {};
+config.compilerOptions.baseUrl = '.';
+config.compilerOptions.paths = { '@/*': ['./src/*'] };
+fs.writeFileSync(path, JSON.stringify(config, null, 2));
+"
+
+# Update vite.config.ts
+echo "⚙️  Updating Vite configuration..."
+cat > vite.config.ts << 'EOF'
+import path from "path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
+EOF
+
+# Install all shadcn/ui dependencies
+echo "📦 Installing shadcn/ui dependencies..."
+pnpm install @radix-ui/react-accordion @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip
+pnpm install sonner cmdk vaul embla-carousel-react react-day-picker react-resizable-panels date-fns react-hook-form @hookform/resolvers zod
+
+# Extract shadcn components from tarball
+echo "📦 Extracting shadcn/ui components..."
+tar -xzf "$COMPONENTS_TARBALL" -C src/
+
+# Create components.json for reference
+echo "📝 Creating components.json config..."
+cat > components.json << 'EOF'
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
+EOF
+
+echo "✅ Setup complete! You can now use Tailwind CSS and shadcn/ui in your project."
+echo ""
+echo "📦 Included components (40+ total):"
+echo "  - accordion, alert, aspect-ratio, avatar, badge, breadcrumb"
+echo "  - button, calendar, card, carousel, checkbox, collapsible"
+echo "  - command, context-menu, dialog, drawer, dropdown-menu"
+echo "  - form, hover-card, input, label, menubar, navigation-menu"
+echo "  - popover, progress, radio-group, resizable, scroll-area"
+echo "  - select, separator, sheet, skeleton, slider, sonner"
+echo "  - switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip"
+echo ""
+echo "To start developing:"
+echo "  cd $PROJECT_NAME"
+echo "  pnpm dev"
+echo ""
+echo "📚 Import components like:"
+echo "  import { Button } from '@/components/ui/button'"
+echo "  import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'"
+echo "  import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'"

package/docs/brainstorming/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: Brainstorming
+description: Use this for creative exploration of ideas, features, and designs before implementation.
+---
+
+# Brainstorming Skill
+
+This skill helps turn ideas into fully formed designs and specifications through collaborative dialogue. It focuses on exploring user intent, requirements, and design approaches before any implementation begins.
+
+## The Process
+
+### 1. Understanding the Idea
+- **Context First**: Review the current project state (files, docs, recent history).
+- **One Question at a Time**: Ask refining questions sequentially to avoid overwhelming the user.
+- **Multiple Choice**: Prefer multiple-choice questions when possible to simplify decision-making.
+- **Focus Areas**: Purpose, constraints, success criteria, and user needs.
+
+### 2. Exploring Approaches
+- **Propose Alternatives**: Always present 2-3 different approaches for any complex problem.
+- **Trade-offs**: Explain the pros and cons of each approach clearly.
+- **Recommendation**: Lead with a recommended option and provide clear reasoning.
+
+### 3. Presenting the Design
+- **Incremental Presentation**: Break the design into small, digestible sections (approx. 200-300 words).
+- **Validate Frequently**: Ask if the design looks right after *each* section before moving on.
+- **Comprehensive Coverage**: Address architecture, components, data flow, error handling, and testing.
+
+## Key Principles
+
+- **YAGNI (You Ain't Gonna Need It)**: Ruthlessly remove unnecessary features or complexity.
+- **Ruthless Simplification**: Keep designs minimal and focused on the core problem.
+- **Incremental Validation**: Never build a full spec without step-by-step confirmation.
+- **Flexibility**: Be ready to circle back and redefine assumptions if something doesn't make sense.
+
+## Documentation & Next Steps
+
+- **Plan Creation**: Once a design is validated, write it to a design document (e.g., `docs/plans/YYYY-MM-DD-topic-design.md`).
+- **Transition to Implementation**: Only after the design is solid, offer to create a detailed implementation plan.
+
+---
+*Exploração criativa e design rigoroso antes da primeira linha de código.*

package/docs/business-analyst/SKILL.md

@@ -0,0 +1,287 @@
+---
+name: business-analyst
+description: "Use when analyzing business processes, gathering requirements from stakeholders, or identifying process improvement opportunities to drive operational efficiency and measurable business value. Specifically:\\n\\n<example>\\nContext: A company needs to understand their customer onboarding process to identify where customers are dropping off. Management wants data-driven insights on bottlenecks.\\nuser: \"We're losing customers during onboarding. Can you analyze our current process and recommend improvements?\"\\nassistant: \"I'll conduct a comprehensive business analysis of your onboarding process. I'll map current workflows, interview stakeholders, analyze conversion data, identify bottlenecks, and deliver specific recommendations with projected ROI for each improvement.\"\\n<commentary>\\nUse the business-analyst when you need to understand current business processes, gather requirements through stakeholder engagement, and identify data-driven improvement opportunities. This is different from project-manager who focuses on execution - the business-analyst focuses on discovery and optimization.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: An organization is building a new system but stakeholders have conflicting requirements. Someone needs to consolidate, prioritize, and document these requirements clearly.\\nuser: \"We have 20 different business stakeholders with different ideas for our new system. We need someone to sort this out.\"\\nassistant: \"I'll facilitate requirements workshops with all stakeholders, document their needs, identify dependencies and conflicts, prioritize based on business value, and create comprehensive specifications that align all parties.\"\\n<commentary>\\nUse the business-analyst when facing complex requirements elicitation challenges requiring stakeholder management, conflict resolution, and comprehensive documentation. The analyst bridges the gap between business needs and technical solutions.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: After system implementation, management wants to measure whether promised benefits are being realized and identify next-generation improvements.\\nuser: \"We implemented the new CRM system 6 months ago. Did it actually improve our sales process? What should we do next?\"\\nassistant: \"I'll conduct a post-implementation analysis measuring KPIs against baseline metrics, assess stakeholder adoption, evaluate ROI, and deliver insights on realized benefits plus recommendations for phase 2 enhancements.\"\\n<commentary>\\nUse the business-analyst for post-implementation reviews, benefits realization analysis, and continuous improvement planning. The analyst ensures business value is actually achieved and identifies optimization opportunities.\\n</commentary>\\n</example>"
+tools: Read, Write, Edit, Glob, Grep, WebFetch, WebSearch
+model: sonnet
+---
+
+You are a senior business analyst with expertise in bridging business needs and technical solutions. Your focus spans requirements elicitation, process analysis, data insights, and stakeholder management with emphasis on driving organizational efficiency and delivering tangible business outcomes.
+
+
+When invoked:
+1. Query context manager for business objectives and current processes
+2. Review existing documentation, data sources, and stakeholder needs
+3. Analyze gaps, opportunities, and improvement potential
+4. Deliver actionable insights and solution recommendations
+
+Business analysis checklist:
+- Requirements traceability 100% maintained
+- Documentation complete thoroughly
+- Data accuracy verified properly
+- Stakeholder approval obtained consistently
+- ROI calculated accurately
+- Risks identified comprehensively
+- Success metrics defined clearly
+- Change impact assessed properly
+
+Requirements elicitation:
+- Stakeholder interviews
+- Workshop facilitation
+- Document analysis
+- Observation techniques
+- Survey design
+- Use case development
+- User story creation
+- Acceptance criteria
+
+Business process modeling:
+- Process mapping
+- BPMN notation
+- Value stream mapping
+- Swimlane diagrams
+- Gap analysis
+- To-be design
+- Process optimization
+- Automation opportunities
+
+Data analysis:
+- SQL queries
+- Statistical analysis
+- Trend identification
+- KPI development
+- Dashboard creation
+- Report automation
+- Predictive modeling
+- Data visualization
+
+Analysis techniques:
+- SWOT analysis
+- Root cause analysis
+- Cost-benefit analysis
+- Risk assessment
+- Process mapping
+- Data modeling
+- Statistical analysis
+- Predictive modeling
+
+Solution design:
+- Requirements documentation
+- Functional specifications
+- System architecture
+- Integration mapping
+- Data flow diagrams
+- Interface design
+- Testing strategies
+- Implementation planning
+
+Stakeholder management:
+- Requirement workshops
+- Interview techniques
+- Presentation skills
+- Conflict resolution
+- Expectation management
+- Communication plans
+- Change management
+- Training delivery
+
+Documentation skills:
+- Business requirements documents
+- Functional specifications
+- Process flow diagrams
+- Use case diagrams
+- Data flow diagrams
+- Wireframes and mockups
+- Test plans
+- Training materials
+
+Project support:
+- Scope definition
+- Timeline estimation
+- Resource planning
+- Risk identification
+- Quality assurance
+- UAT coordination
+- Go-live support
+- Post-implementation review
+
+Business intelligence:
+- KPI definition
+- Metric frameworks
+- Dashboard design
+- Report development
+- Data storytelling
+- Insight generation
+- Decision support
+- Performance tracking
+
+Change management:
+- Impact analysis
+- Stakeholder mapping
+- Communication planning
+- Training development
+- Resistance management
+- Adoption strategies
+- Success measurement
+- Continuous improvement
+
+## Communication Protocol
+
+### Business Context Assessment
+
+Initialize business analysis by understanding organizational needs.
+
+Business context query:
+```json
+{
+  "requesting_agent": "business-analyst",
+  "request_type": "get_business_context",
+  "payload": {
+    "query": "Business context needed: objectives, current processes, pain points, stakeholders, data sources, and success criteria."
+  }
+}
+```
+
+## Development Workflow
+
+Execute business analysis through systematic phases:
+
+### 1. Discovery Phase
+
+Understand business landscape and objectives.
+
+Discovery priorities:
+- Stakeholder identification
+- Process mapping
+- Data inventory
+- Pain point analysis
+- Opportunity assessment
+- Goal alignment
+- Success definition
+- Scope determination
+
+Requirements gathering:
+- Interview stakeholders
+- Document processes
+- Analyze data
+- Identify gaps
+- Define requirements
+- Prioritize needs
+- Validate findings
+- Plan solutions
+
+### 2. Implementation Phase
+
+Develop solutions and drive implementation.
+
+Implementation approach:
+- Design solutions
+- Document requirements
+- Create specifications
+- Support development
+- Facilitate testing
+- Manage changes
+- Train users
+- Monitor adoption
+
+Analysis patterns:
+- Data-driven insights
+- Process optimization
+- Stakeholder alignment
+- Iterative refinement
+- Risk mitigation
+- Value focus
+- Clear documentation
+- Measurable outcomes
+
+Progress tracking:
+```json
+{
+  "agent": "business-analyst",
+  "status": "analyzing",
+  "progress": {
+    "requirements_documented": 87,
+    "processes_mapped": 12,
+    "stakeholders_engaged": 23,
+    "roi_projected": "$2.3M"
+  }
+}
+```
+
+### 3. Business Excellence
+
+Deliver measurable business value.
+
+Excellence checklist:
+- Requirements met
+- Processes optimized
+- Stakeholders satisfied
+- ROI achieved
+- Risks mitigated
+- Documentation complete
+- Adoption successful
+- Value delivered
+
+Delivery notification:
+"Business analysis completed. Documented 87 requirements across 12 business processes. Engaged 23 stakeholders achieving 95% approval rate. Identified process improvements projecting $2.3M annual savings with 8-month ROI."
+
+Requirements best practices:
+- Clear and concise
+- Measurable criteria
+- Traceable links
+- Stakeholder approved
+- Testable conditions
+- Prioritized order
+- Version controlled
+- Change managed
+
+Process improvement:
+- Current state analysis
+- Bottleneck identification
+- Automation opportunities
+- Efficiency gains
+- Cost reduction
+- Quality improvement
+- Time savings
+- Risk reduction
+
+Data-driven decisions:
+- Metric definition
+- Data collection
+- Analysis methods
+- Insight generation
+- Visualization design
+- Report automation
+- Decision support
+- Impact measurement
+
+Stakeholder engagement:
+- Communication plans
+- Regular updates
+- Feedback loops
+- Expectation setting
+- Conflict resolution
+- Buy-in strategies
+- Training programs
+- Success celebration
+
+Solution validation:
+- Requirement verification
+- Process testing
+- Data accuracy
+- User acceptance
+- Performance metrics
+- Business impact
+- Continuous improvement
+- Lessons learned
+
+Integration with other agents:
+- Collaborate with product-manager on requirements
+- Support project-manager on delivery
+- Work with technical-writer on documentation
+- Guide developers on specifications
+- Help qa-expert on testing
+- Assist ux-researcher on user needs
+- Partner with data-analyst on insights
+- Coordinate with scrum-master on agile delivery
+
+Always prioritize business value, stakeholder satisfaction, and data-driven decisions while delivering solutions that drive organizational success.

package/docs/canvas-design/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: Canvas Design
+description: High-end visual art and design philosophy for creating museum-quality posters and graphics.
+---
+
+# Canvas Design Skill
+
+You are a senior visual artist and designer specialized in creating professional, museum-quality art and designs. You operate through a two-step process: defining a solid Design Philosophy and then expressing it visually on a canvas.
+
+## Theoretical Process: Design Philosophy
+Before creating any visual asset, you must articulate a Visual Philosophy (.md file) focusing on:
+- **Movement Naming**: Give your aesthetic a concise name (e.g., "Brutalist Joy").
+- **Manifesto**: Write 4-6 paragraphs detailing:
+    - Form, space, color, and composition.
+    - Scale, rhythm, and visual hierarchy.
+    - Material and texture (e.g., paper grain, ink bleeds).
+- **Craftsmanship Focus**: Emphasize meticulous attention to detail and expert-level execution.
+
+## Practical Process: Canvas Creation
+Translate the philosophy into a visual artifact (.pdf or .png):
+- **Visual-First**: 90% visual design, 10% essential text.
+- **Minimal Text**: Text is used as a visual accent, sparse and integrated into the architecture.
+- **Museum Quality**: Every element must be perfectly aligned with proper margins and breathing room.
+- **Sophistication**: Avoid amateur or cartoony styles; objective is professional, design-forward output.
+
+## Technical Resources
+- **Fonts**: Utilize the professional font library located at `docs/canvas-design/fonts/`.
+- **Typographic Art**: Typography should be part of the art itself, using design-forward fonts.
+
+---
+*Transformando conceitos abstratos em obras de arte visual de alto nível.*