frontend-development

name	frontend-development
description	Frontend development - React, Vue, component architecture, state management
sasmp_version	1.3.0
bonded_agent	02-frontend-development
bond_type	PRIMARY_BOND
atomic	true
single_responsibility	frontend_implementation
parameters	{"type":"object","required":["action"],"properties":{"action":{"type":"string","enum":["create_component","manage_state","configure_routing","optimize_build"],"description":"The specific frontend action to perform"},"framework":{"type":"string","enum":["react","vue","angular","svelte","nextjs","nuxt"],"default":"react"},"component_type":{"type":"string","enum":["presentational","container","compound","headless"]},"typescript":{"type":"boolean","default":true}}}
returns	{"type":"object","properties":{"success":{"type":"boolean"},"code":{"type":"string"},"files":{"type":"array","items":{"type":"object"}},"performance_impact":{"type":"object"}}}
retry	{"max_attempts":3,"backoff":"exponential","initial_delay_ms":1000,"jitter":true}
logging	{"level":"INFO","events":["component_created","state_configured","build_optimized"],"metrics":["bundle_size_delta","component_complexity"]}

Frontend Development Skill

Atomic skill for frontend development including component creation, state management, and build optimization.

Responsibility

Single Purpose: Implement frontend components and configure client-side architecture

Actions

create_component

Create a new React/Vue component with proper patterns.

// Input
{
  action: "create_component",
  framework: "react",
  component_type: "compound",
  typescript: true
}

// Output
{
  success: true,
  code: "import { memo } from 'react';\n...",
  files: [
    { path: "components/MyComponent.tsx", content: "..." },
    { path: "components/MyComponent.test.tsx", content: "..." }
  ],
  performance_impact: { bundle_size: "+2kb", render_time: "5ms" }
}

manage_state

Configure state management solution.

configure_routing

Set up client-side routing.

optimize_build

Optimize bundle size and build performance.

Validation Rules

function validateParams(params: SkillParams): ValidationResult {
  if (!params.action) {
     { : , :  };
  }

   (params. ===  && !params.) {
     { : , :  };
  }

   { :  };
}