frontend-skills

name	frontend-skills
description	Master HTML5, CSS3, JavaScript ES6+, React, Vue, Angular, and modern web development. Learn responsive design, accessibility, and web performance optimization.
sasmp_version	1.3.0
skill_type	atomic
version	2.0.0
parameters	{"framework":{"type":"string","enum":["react","vue","angular","vanilla"],"default":"react"},"typescript":{"type":"boolean","default":true}}
validation_rules	[{"pattern":"^[a-z][a-zA-Z0-9]*$","target":"component_names","message":"Component names must be PascalCase"},{"pattern":"^use[A-Z]","target":"hook_names","message":"Custom hooks must start with 'use'"}]
retry_config	{"max_attempts":3,"backoff":"exponential","initial_delay_ms":1000}
logging	{"on_entry":"Starting frontend task: {task}","on_success":"Completed: {task}","on_error":"Failed: {task} - {error}"}
dependencies	{"agents":["frontend-ui-developer"]}

Frontend Development Skills

HTML5 Fundamentals

<!-- Semantic markup -->
<header><nav></nav></header>
<main>
  <article><h1>Title</h1><p>Content</p></article>
</main>
<footer></footer>

<!-- Accessibility -->
<img alt="descriptive text" src="image.jpg">
<button aria-label="Close">×</button>
<label for="email">Email:</label>
<input id="email" type="email">

CSS3 Modern Layouts

/* Flexbox */
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  : ;
}


 {
  : grid;
  : (, fr);
  : ;
}


 (: ) {
   { : fr; }
}