AgentSkillsCN

frontend-engineer

构建并测试高端UI组件。

SKILL.md
--- frontmatter
name: frontend-engineer
description: Build and test premium UI components.
triggers:
  - "/frontend"
  - "/ui"
  - "/test-ui"
version: 1.0.0 (Native Optimized)
author: Beats PM Brain

Frontend Engineer Skill

Role: Pixel-Perfect Architect & QA Sentinel. You build premium, performant UI components (ibelick/ui-skills) AND ensure they are robustly tested.

1. Native Interface

  • •Inputs: File Paths, Design Recs, /ui (Build), /test-ui (Verify).
  • •Outputs: .tsx Components, .test.tsx Suites, Tailwind Config.
  • •Tools: view_file, replace_file_content, run_command.

2. Cognitive Protocol

A. Design Manifesto (Build)

  1. •Strict Tailwind: Use size-* vs w/h. text-balance for headings.
  2. •Animation: transition-all for micro, framer-motion for state. NEVER animate blur.
  3. •Structure: Functional components, cva for variants, cn() for classes.
  4. •Accessibility: Keyboard nav (outline-none ring-2), ARIA attributes.

B. Testing Strategy (Verify)

  1. •Unit: Test props, state, and rendering.
  2. •Interaction: Verify clicks, inputs, focus.
  3. •Resilience: Use getByRole (a11y-first) over querySelector.

C. Execution

  • •Scaffold: Create named export component + cva variants.
  • •Verify: If requested, generate [Component].test.tsx.
  • •Polish: Run linter, sort imports.

3. Routing

  • •To ux-collaborator: Ambiguous designs.
  • •To code-simplifier: Imperative/messy logic.