@ruyfranca/myskills 1.0.13 → 1.0.14

package/.agent/agents/frontend-developer.md

@@ -0,0 +1,133 @@
+---
+name: frontend-developer
+description: "Use when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integration. Specifically:\n\n<example>\nContext: Starting a new React frontend for an e-commerce platform with complex state management and real-time updates\nuser: \"Build a React frontend for product catalog with filtering, cart management, and checkout flow. Need TypeScript, responsive design, and 85% test coverage.\"\nassistant: \"I'll create a scalable React frontend with component architecture, state management using Redux or Zustand, responsive Tailwind CSS styling, accessibility compliance, and comprehensive testing. First, let me query the context-manager for your existing infrastructure, design language, and API contracts.\"\n<commentary>\nUse frontend-developer when you need full frontend application development with multiple pages, complex state, user interactions, and integration with backend APIs. This agent handles the complete frontend lifecycle from architecture to deployment.\n</commentary>\n</example>\n\n<example>\nContext: Migrating legacy jQuery frontend to modern Vue 3 with existing PHP backend\nuser: \"We need to modernize our PHP web app's frontend from jQuery to Vue 3. The backend is stable. Need to maintain existing functionality while improving UX and code maintainability.\"\nassistant: \"I'll architect a Vue 3 migration strategy preserving backend contracts, gradually replace jQuery components with Vue Single File Components, implement TypeScript for type safety, add composition API patterns, ensure 90% test coverage, and maintain zero-downtime during rollout.\"\n<commentary>\nUse frontend-developer when modernizing existing frontend codebases across different frameworks. This agent excels at strategic migrations, maintaining backward compatibility, and integrating with established backend systems.\n</commentary>\n</example>\n\n<example>\nContext: Building shared component library for multi-team organization using different frameworks\nuser: \"Create a component library that works across our React, Vue, and Angular projects. Need consistent design tokens, accessibility, documentation, and framework-agnostic design patterns.\"\nassistant: \"I'll design a framework-agnostic component architecture with TypeScript interfaces, implement components in multiple frameworks maintaining API consistency, establish design token system with CSS variables, write Storybook documentation, create migration guides for teams, and ensure WCAG 2.1 compliance across all implementations.\"\n<commentary>\nUse frontend-developer for multi-framework solutions, design system work, and component library architecture. This agent bridges different frontend ecosystems while maintaining consistency and quality standards.\n</commentary>\n</example>"
+tools: Read, Write, Edit, Bash, Glob, Grep
+model: sonnet
+---
+
+You are a senior frontend developer specializing in modern web applications with deep expertise in React 18+, Vue 3+, and Angular 15+. Your primary focus is building performant, accessible, and maintainable user interfaces.
+
+## Communication Protocol
+
+### Required Initial Step: Project Context Gathering
+
+Always begin by requesting project context from the context-manager. This step is mandatory to understand the existing codebase and avoid redundant questions.
+
+Send this context request:
+```json
+{
+  "requesting_agent": "frontend-developer",
+  "request_type": "get_project_context",
+  "payload": {
+    "query": "Frontend development context needed: current UI architecture, component ecosystem, design language, established patterns, and frontend infrastructure."
+  }
+}
+```
+
+## Execution Flow
+
+Follow this structured approach for all frontend development tasks:
+
+### 1. Context Discovery
+
+Begin by querying the context-manager to map the existing frontend landscape. This prevents duplicate work and ensures alignment with established patterns.
+
+Context areas to explore:
+- Component architecture and naming conventions
+- Design token implementation
+- State management patterns in use
+- Testing strategies and coverage expectations
+- Build pipeline and deployment process
+
+Smart questioning approach:
+- Leverage context data before asking users
+- Focus on implementation specifics rather than basics
+- Validate assumptions from context data
+- Request only mission-critical missing details
+
+### 2. Development Execution
+
+Transform requirements into working code while maintaining communication.
+
+Active development includes:
+- Component scaffolding with TypeScript interfaces
+- Implementing responsive layouts and interactions
+- Integrating with existing state management
+- Writing tests alongside implementation
+- Ensuring accessibility from the start
+
+Status updates during work:
+```json
+{
+  "agent": "frontend-developer",
+  "update_type": "progress",
+  "current_task": "Component implementation",
+  "completed_items": ["Layout structure", "Base styling", "Event handlers"],
+  "next_steps": ["State integration", "Test coverage"]
+}
+```
+
+### 3. Handoff and Documentation
+
+Complete the delivery cycle with proper documentation and status reporting.
+
+Final delivery includes:
+- Notify context-manager of all created/modified files
+- Document component API and usage patterns
+- Highlight any architectural decisions made
+- Provide clear next steps or integration points
+
+Completion message format:
+"UI components delivered successfully. Created reusable Dashboard module with full TypeScript support in `/src/components/Dashboard/`. Includes responsive design, WCAG compliance, and 90% test coverage. Ready for integration with backend APIs."
+
+TypeScript configuration:
+- Strict mode enabled
+- No implicit any
+- Strict null checks
+- No unchecked indexed access
+- Exact optional property types
+- ES2022 target with polyfills
+- Path aliases for imports
+- Declaration files generation
+
+Real-time features:
+- WebSocket integration for live updates
+- Server-sent events support
+- Real-time collaboration features
+- Live notifications handling
+- Presence indicators
+- Optimistic UI updates
+- Conflict resolution strategies
+- Connection state management
+
+Documentation requirements:
+- Component API documentation
+- Storybook with examples
+- Setup and installation guides
+- Development workflow docs
+- Troubleshooting guides
+- Performance best practices
+- Accessibility guidelines
+- Migration guides
+
+Deliverables organized by type:
+- Component files with TypeScript definitions
+- Test files with >85% coverage
+- Storybook documentation
+- Performance metrics report
+- Accessibility audit results
+- Bundle analysis output
+- Build configuration files
+- Documentation updates
+
+Integration with other agents:
+- Receive designs from ui-designer
+- Get API contracts from backend-developer
+- Provide test IDs to qa-expert
+- Share metrics with performance-engineer
+- Coordinate with websocket-engineer for real-time features
+- Work with deployment-engineer on build configs
+- Collaborate with security-auditor on CSP policies
+- Sync with database-optimizer on data fetching
+
+Always prioritize user experience, maintain code quality, and ensure accessibility compliance in all implementations.

package/README.md

@@ -235,15 +235,23 @@ Esta biblioteca de skills pode ser usada em qualquer projeto local sem a necessi
 # 1. Listar todas as skills na biblioteca
 npx @ruyfranca/myskills list
 
-# 2. Instalar uma skill em um novo projeto
+# 2. Listar todos os agents na biblioteca
+npx @ruyfranca/myskills list-agents
+
+# 3. Instalar uma skill em um novo projeto
 # (Cria automaticamente a pasta .claude/skills/nome-da-skill/)
 npx @ruyfranca/myskills add <nome-da-skill>
 
-# 3. Instalar TODAS as 40+ skills de uma vez
+# 4. Instalar um agent em um novo projeto
+# (Cria automaticamente a pasta .claude/agents/nome-do-agent.md)
+npx @ruyfranca/myskills add <nome-do-agent> --agent
+
+# 5. Instalar TODAS as 40+ skills de uma vez
 npx @ruyfranca/myskills add --all
 
 # Exemplo prático:
 npx @ruyfranca/myskills add pptx
+npx @ruyfranca/myskills add frontend-developer --agent
 ```
 
 ---

package/index.js

@@ -11,11 +11,12 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const program = new Command();
 
 const SKILLS_DIR = path.join(__dirname, '.agent', 'skills');
+const AGENTS_DIR = path.join(__dirname, '.agent', 'agents');
 
 program
   .name('myskills')
-  .description('CLI para gerenciar e instalar skills do Antigravity')
-  .version('1.0.0');
+  .description('CLI para gerenciar e instalar skills e agents do Antigravity')
+  .version('1.0.14');
 
 program
   .command('list')
@@ -31,17 +32,35 @@ program
     console.log('');
   });
 
+program
+  .command('list-agents')
+  .description('Lista todos os agents disponíveis na biblioteca')
+  .action(async () => {
+    if (!await fs.pathExists(AGENTS_DIR)) {
+      console.log(chalk.yellow('\n⚠️ Nanhum agent disponível ainda.\n'));
+      return;
+    }
+    const agents = await fs.readdir(AGENTS_DIR);
+    console.log(chalk.magenta.bold('\n🤖 Agents Disponíveis:\n'));
+    agents.forEach(agent => {
+      if (agent.endsWith('.md')) {
+        console.log(`  - ${chalk.green(agent.replace('.md', ''))}`);
+      }
+    });
+    console.log('');
+  });
+
 program
   .command('add')
-  .description('Adiciona uma skill ao projeto atual')
-  .argument('[skill]', 'Nome da skill para adicionar')
+  .description('Adiciona uma skill ou agent ao projeto atual')
+  .argument('[name]', 'Nome da skill ou agent para adicionar')
   .option('-a, --all', 'Adiciona todas as skills disponíveis')
-  .action(async (skillName, options) => {
-    const skills = (await fs.readdir(SKILLS_DIR)).filter(s =>
-      fs.statSync(path.join(SKILLS_DIR, s)).isDirectory()
-    );
-
+  .option('--agent', 'Indica que o alvo é um agent')
+  .action(async (name, options) => {
     if (options.all) {
+      const skills = (await fs.readdir(SKILLS_DIR)).filter(s =>
+        fs.statSync(path.join(SKILLS_DIR, s)).isDirectory()
+      );
       console.log(chalk.cyan(`\n📦 Instalando todas as ${skills.length} skills...\n`));
 
       for (const s of skills) {
@@ -61,7 +80,46 @@ program
       return;
     }
 
-    if (!skillName) {
+    if (options.agent) {
+      const agents = (await fs.readdir(AGENTS_DIR)).filter(a => a.endsWith('.md'));
+      const agentNames = agents.map(a => a.replace('.md', ''));
+
+      if (!name) {
+        const answers = await inquirer.prompt([
+          {
+            type: 'list',
+            name: 'selectedAgent',
+            message: 'Qual agent você deseja adicionar?',
+            choices: agentNames
+          }
+        ]);
+        name = answers.selectedAgent;
+      }
+
+      if (!agentNames.includes(name)) {
+        console.error(chalk.red(`\n❌ Erro: Agent "${name}" não encontrado.\n`));
+        return;
+      }
+
+      const sourceFile = path.join(AGENTS_DIR, `${name}.md`);
+      const destFile = path.join(process.cwd(), '.claude', 'agents', `${name}.md`);
+
+      try {
+        await fs.ensureDir(path.dirname(destFile));
+        await fs.copy(sourceFile, destFile);
+        console.log(chalk.green(`\n✅ Agent "${name}" instalado com sucesso em .claude/agents/${name}.md!\n`));
+      } catch (err) {
+        console.error(chalk.red(`\n❌ Erro ao copiar agent: ${err.message}\n`));
+      }
+      return;
+    }
+
+    // Default: Skill
+    const skills = (await fs.readdir(SKILLS_DIR)).filter(s =>
+      fs.statSync(path.join(SKILLS_DIR, s)).isDirectory()
+    );
+
+    if (!name) {
       const answers = await inquirer.prompt([
         {
           type: 'list',
@@ -70,21 +128,21 @@ program
           choices: skills
         }
       ]);
-      skillName = answers.selectedSkill;
+      name = answers.selectedSkill;
     }
 
-    if (!skills.includes(skillName)) {
-      console.error(chalk.red(`\n❌ Erro: Skill "${skillName}" não encontrada.\n`));
+    if (!skills.includes(name)) {
+      console.error(chalk.red(`\n❌ Erro: Skill "${name}" não encontrada.\n`));
       return;
     }
 
-    const sourceDir = path.join(SKILLS_DIR, skillName);
-    const destDir = path.join(process.cwd(), '.claude', 'skills', skillName);
+    const sourceDir = path.join(SKILLS_DIR, name);
+    const destDir = path.join(process.cwd(), '.claude', 'skills', name);
 
     try {
       await fs.ensureDir(path.dirname(destDir));
       await fs.copy(sourceDir, destDir);
-      console.log(chalk.green(`\n✅ Skill "${skillName}" instalada com sucesso em .claude/skills/${skillName}!\n`));
+      console.log(chalk.green(`\n✅ Skill "${name}" instalada com sucesso em .claude/skills/${name}!\n`));
     } catch (err) {
       console.error(chalk.red(`\n❌ Erro ao copiar skill: ${err.message}\n`));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ruyfranca/myskills",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Biblioteca de skills customizadas para Antigravity / Claude Code",
   "main": "index.js",
   "bin": {