Frontend feature engineering

Skill SHIHAOZOU/ai-frontend-engineering-skills/skills/frontend-feature-engineering

Production-ready frontend Agent Skills for Codex, Claude Code & Cursor—covering React development, debugging, refactoring, code review, bilingual docs, and npx skills installation. 面向 Codex、Claude Code 与 Cursor 的生产级前端 Agent Skills，覆盖 React 开发、Bug 修复、重构、Code Review 与双语工程规范，支持 npx skills 安装。

Install

npx -y skills add SHIHAOZOU/ai-frontend-engineering-skills --skill frontend-feature-engineering

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

17 days oldThe repository was created 17 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Plan, implement, and validate end-to-end frontend features across architecture, TypeScript, APIs, state, styling, accessibility, performance, and tests. Use for multi-step feature delivery when repository conventions must be discovered before editing.

SKILL.md

3.0 KB, as published. Nobody here has run it

Frontend Engineering Skill

For the Simplified Chinese reference, read references/zh-CN.md when the user communicates primarily in Chinese or requests Chinese output.

Purpose

Deliver maintainable frontend changes that fit the existing architecture and satisfy functional and non-functional requirements.

When to Use

Use for new screens, workflows, integrations, cross-component behavior, or changes spanning multiple frontend concerns.

Inputs

Requirement and acceptance criteria
Repository path and applicable agent instructions
Design, API contract, screenshots, or issue context
Required validation commands

Outputs

Evidence-based implementation plan
Focused code and documentation changes
Validation results, risks, and known limitations

Workflow

Read repository instructions and inspect the project structure.
Search for similar features, components, API patterns, and tests.
Restate scope, acceptance criteria, assumptions, and exclusions.
Map architecture, data flow, states, accessibility, and failure behavior.
Request confirmation when the change is destructive, ambiguous, or materially expands scope.
Implement the smallest coherent vertical slice.
Validate types, lint, tests, build, accessibility, and performance as applicable.
Summarize changed behavior and remaining risks.

Decision Tree

flowchart TD
  A[Frontend request] --> B{Existing pattern found?}
  B -->|Yes| C[Adapt the pattern]
  B -->|No| D{Cross-cutting decision?}
  D -->|Yes| E[Propose and confirm architecture]
  D -->|No| F[Implement locally]
  C --> G[Validate]
  E --> G
  F --> G

Checklist

Acceptance criteria are testable.
Loading, empty, error, and success states exist.
Data is typed and validated.
Keyboard and screen-reader behavior is covered.
Performance and security impacts are assessed.
Relevant quality gates pass.

Constraints

MUST follow existing repository conventions.
MUST NOT invent commands, APIs, or design tokens.
SHOULD reuse stable local abstractions.
SHOULD NOT add a dependency without documented value and impact.

Examples

Input: “Add a paginated customer search page using the existing API client.”

Output: A plan based on discovered list patterns, typed API mapping, complete UI states, focused implementation, tests, and validation summary.

Anti-patterns

Editing before inspecting repository instructions
Building only the happy path
Duplicating server data into global state without need
Declaring success without running available checks