AgentSkillsCN

neticrm-frontend

netiCRM/CiviCRM 前端开发中的 HTML、CSS、JavaScript 以及 Smarty 模板标准与设计模式。在 netiCRM 项目中处理前端代码时，运用此技能可确保代码质量、可维护性，并与项目规范保持一致。无论是在编写、修改、检查、评审、分析，还是评估代码质量时，均可灵活运用此技能。

SKILL.md
--- frontmatter
name: neticrm-frontend
description: "netiCRM/CiviCRM frontend development standards and patterns for HTML, CSS, JavaScript, and Smarty templates. Use this skill when working with frontend code in the netiCRM project to ensure code quality, maintainability, and consistency with project conventions. Apply this skill when writing, modifying, inspecting, reviewing, analyzing, or assessing code quality."

netiCRM Frontend Development

Overview

This skill provides project-specific frontend development standards for netiCRM/CiviCRM. It ensures AI-generated code follows established patterns, naming conventions, and best practices specific to this codebase.

Key principle: Knowing syntax ≠ Writing high-quality code. This skill bridges the gap between general CSS/JS/HTML knowledge and project-specific quality standards.

Quick Reference

CSS

JavaScript

Smarty Templates

HTML Structure

Code Quality Principles

  1. •Maintainability First: Code should be easy to understand and modify
  2. •Consistency: Follow existing patterns in the codebase
  3. •Performance: Consider CSS specificity, selector performance, and asset loading
  4. •Accessibility: Use semantic HTML and proper ARIA attributes
  5. •Localization: Always use translation functions for user-facing text

Development Workflow

  1. •Check References First: Before writing code, review the relevant reference file
  2. •Check Browser Support (MANDATORY for CSS): Before using any new or uncommon CSS technology, you MUST consult browser-support-policy.md to verify compatibility with the company's browser support policy. This includes:
    • •Any CSS technology that appears "new," "experimental," or "uncommon"
    • •Any technique using :: pseudo-elements or @ rules (except basic @media)
    • •Technologies containing keywords like scroll-, container-, @layer, @property, etc.
    • •You MUST perform a WebSearch or WebFetch to check current browser support - do NOT rely solely on your knowledge cutoff
  3. •Follow Patterns: Look for similar existing code in the project
  4. •Use CSS Variables: Always use defined CSS variables for colors and dimensions
  5. •Test Responsively: Verify code works across breakpoints (ncg-* grid)
  6. •Validate Translations: Ensure all user-facing text uses {ts} or ts()

Getting Started

For detailed information on any topic:

  1. •Identify which area you're working on (CSS/JS/Smarty/HTML)
  2. •Read the corresponding reference file
  3. •Follow the patterns and examples provided
  4. •Avoid the documented anti-patterns