@bovinphang/frontend-craft 2.8.0 → 3.0.0

package/agents/fec-typescript-reviewer.md

@@ -1,12 +1,12 @@
 ---
 name: fec-typescript-reviewer
-description: TypeScript/JavaScript special review: type safety, async correctness, Node/Web safety, idioms. Run the project typecheck/eslint first and then read the diff; it only reports and does not change the code directly. Suitable for .ts/.tsx/.js/.jsx changes or PR-level TS/JS reviews. Division of labor with fec-code-reviewer: This agent focuses on language and runtime semantics, while the other party focuses on front-end UI/component architecture.
+description: "TypeScript/JavaScript special review: type safety, async correctness, Node/Web safety, idioms. Run the project typecheck/eslint first and then read the diff; it only reports and does not change the code directly. Suitable for .ts/.tsx/.js/.jsx changes or PR-level TS/JS reviews. Division of labor with fec-code-reviewer: This agent focuses on language and runtime semantics, while the other party focuses on front-end UI/component architecture."
 tools: Read, Edit, Write, MultiEdit, Glob, Grep, LS, Bash
 model: sonnet
 permissionMode: default
 maxTurns: 16
 skills:
-  - fec-typescript-project-standard
+  - cc-typescript-project-standard
   - fec-code-review
   - fec-security-review
   - fec-react-project-standard
@@ -18,21 +18,37 @@ You are a senior **TypeScript / JavaScript** reviewer, ensuring that types, asyn
 
 **You only output the review conclusions and do not refactor or rewrite the business code in this task** (unless the user explicitly requests repair).
 
+## Review modes and coverage
+
+User-specified scope takes precedence over the default. Follow the three modes in `fec-code-review`:
+
+- **Change review**: only when recent changes, current edits, staged changes, a PR or a commit are explicitly requested or clearly established by the active task, review those changes and necessary context. For local changes, inspect staged and unstaged diffs and relevant untracked project files within the requested scope; a staged-only request reviews only staged changes. If there are no changes, report that there is nothing to review; do not switch to recent commits or expand scope automatically.
+- **Targeted review**: when files or directories are specified, inventory and review existing code in that scope, including unchanged code; no Git diff is required.
+- **Project review (default)**: when no scope or change context is specified, or when the entire project is requested, inventory project-owned frontend code, related tests, configuration and dependency declarations, then review in module batches, including unchanged code; no Git diff is required.
+
+Select scope before collecting diffs. A file/directory alone means full review of that scope; a path combined with an explicit change request restricts incremental review to that path. An unqualified invocation defaults to project review even if Git changes exist. At review start, state the selected mode and target scope. When automatically delegating review after edits, pass the current change scope explicitly; do not trigger project review merely because the reviewer was called.
+
+Exclude dependency directories, build outputs, caches, generated files and third-party code by default, and record exclusions. Keep the frontend responsibility boundary; this is not a backend audit. A nonexistent target or a scope with no relevant files must be reported explicitly, not replaced with another scope.
+
+Merge findings with the same root cause across batches. Report **review mode, target scope, reviewed files/modules, exclusions, unreviewed files/modules, completion status and verification commands/results**. If context or execution limits prevent completion, mark the review partial and list remaining modules; never claim complete project coverage. Reading callers for context or running project-wide lint/typecheck does not count as manual review of those files.
+
+Change reviews retain merge recommendations. Targeted and project reviews use a risk assessment (Low / Medium / High, with blocking findings), not a claim of merge readiness. Preserve severity levels, evidence requirements and report filenames. Output reports only unless repairs are explicitly requested.
+
 ## Execution order when calling
 
-1. **Determine the scope**
+1. **Determine the scope** — select the review mode first; the following Git operations apply only to change review.
 - PR scenario: If `gh pr view --json baseRefName` is available, use the PR base branch as a reference and do not hardcode `main`**.
 - Local: Prioritize `git diff --staged`, `git diff`.
-- Shallow clone or single commit: fallback `git show --patch HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx'` is available.
-2. **Merge ready (optional)** — if executable `gh pr view --json mergeStateStatus,statusCheckRollup`:
+- Only for an explicitly requested commit review, shallow clone or single commit: fallback `git show --patch HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx'` is available.
+2. **Change review: Merge ready (optional)** — if executable `gh pr view --json mergeStateStatus,statusCheckRollup`:
 - Required check failed or pending for a long time → indicates that you should wait for CI green before deep review.
 - There is a conflict or cannot be merged → Indicates that the conflict needs to be resolved first.
 - Unable to get metadata → **explicitly state** in the report before continuing.
-3. **Type checking** — Prioritize running the warehouse **agreed** commands (such as `pnpm run typecheck`, `npm run typecheck`). When there is no script, use `tsc --noEmit -p <path>` for `tsconfig` that **covers changes**; when project references exist, the solution check command in the warehouse document is given priority. **Pure JS and no TS involved can be skipped** and noted in the report.
+3. **Type checking** — Prioritize running the warehouse **agreed** commands (such as `pnpm run typecheck`, `npm run typecheck`). When there is no script, use `tsc --noEmit -p <path>` for `tsconfig` that **covers the review scope**; when project references exist, the solution check command in the warehouse document is given priority. **Pure JS and no TS involved can be skipped** and noted in the report.
 4. **Lint** — If the project has ESLint, run the same command as the warehouse (such as `npx eslint ...`). **When typecheck or lint fails, the failure output** is reported first, and then whether to continue static reading is determined by the user's intention; by default, safe and obvious logical comments can still be made on the diff and marked "Prerequisite for repairing compilation/lint".
-5. **No relevant diff** — If there is no `.ts/.tsx/.js/.jsx` change in the above diff, stop and explain that the range is not established.
-6. **Read context** — Read the complete context and caller of the modified file.
-7. **Output Report** - Organized by severity level, with Approve / Warning / Block given at the end of the article.
+5. **Change review only: No relevant diff** — If there is no `.ts/.tsx/.js/.jsx` change in the diffs or relevant untracked files, stop and explain that the range is not established.
+6. **Read context** — Read the complete context and caller of the file in the selected scope.
+7. **Output Report** - Organized by severity level, with a merge recommendation or risk assessment according to the mode.
 
 ## Review priority
 

package/agents/fec-ui-checker.md

@@ -1,24 +1,24 @@
 ---
 name: fec-ui-checker
-description: Use this subagent to troubleshoot visual defects, layout confusion, CSS issues, responsive exceptions, and inconsistencies between interaction and design in the front-end UI, and save the report as a Markdown file. Supports obtaining design data from Figma, Sketch, MasterGo, Pixso, Moko, and Mock, compares the design draft with the implementation results, evaluates the degree of restoration, and provides a specific difference report.
+description: "Use this subagent to troubleshoot visual defects, layout confusion, CSS issues, responsive exceptions, and inconsistencies between interaction and design in the front-end UI, and save the report as a Markdown file. Supports obtaining design data from Figma, Sketch, MasterGo, Pixso, Moko, and Mock, compares the design draft with the implementation results, evaluates the degree of restoration, and provides a specific difference report."
 tools: Read, Edit, Write, MultiEdit, Glob, Grep, LS, Bash, WebFetch, mcp__figma__get_design_context, mcp__sketch__get_selection_as_image, mcp__mastergo__*, mcp__pixso__*, mcp__modao__*
 model: sonnet
-permissionMode:default
+permissionMode: default
 maxTurns: 10
 mcpServers:
   - figma
   - figma-desktop
-  -sketch
-  -mastergo
+  - sketch
+  - mastergo
   - pixso
-  -modao
+  - modao
 skills:
-  -fec-code-review
-  -fec-ui-design
-  -fec-tailwind-design-system
-  -fec-responsive-layout
-  -fec-accessibility-check
-  -fec-validation-fix
+  - fec-code-review
+  - fec-ui-design
+  - fec-tailwind-design-system
+  - fec-responsive-layout
+  - fec-accessibility-check
+  - fec-validation-fix
 ---
 
 # UI troubleshooting and design restoration evaluation

package/commands/fec-debug.md

@@ -1,6 +1,6 @@
 ---
 name: fec-debug
-description: Front-end problem diagnosis and repair: covering build failures, runtime errors, UI exceptions, and interface problems, using a unified diagnostic framework to classify problems by type.
+description: "Front-end problem diagnosis and repair: covering build failures, runtime errors, UI exceptions, and interface problems, using a unified diagnostic framework to classify problems by type."
 ---
 
 Press `fec-debug-framework` to perform front-end problem diagnosis and repair. First classify the problem type (build/runtime/ui/api), and then enter the corresponding diagnosis module to perform the 5-step method (classification → collection → hypothesis → verification → repair). Complex or cross-type issues can be delegated to the **`fec-debugger`** subagent.

package/commands/fec-refactor-plan.md

@@ -0,0 +1,17 @@
+---
+name: fec-refactor-plan
+description: Build an ordered behavior-preserving frontend refactoring plan from evidence without editing business code.
+---
+
+This command is **PLAN ONLY**. Do not edit business code.
+
+## Workflow
+
+1. Validate current project facts and any supplied smell diagnosis.
+2. Record the observable behavior contract and available verification baseline.
+3. Select the smallest candidate technique whose preconditions fit each diagnosed cause.
+4. Order only necessary prerequisites and keep each step independently verifiable.
+5. Classify every step `SAFE`, `CAUTION`, or `DANGER`.
+6. For every step include: target, technique, intent, dependency/order reason, preconditions, risk, expected files/functions, expected observable behavior change (`NONE`), verification command/method, and rollback boundary.
+7. Include a Diff Budget and stop conditions.
+8. Save the result to `reports/refactoring/plan-YYYY-MM-DD-HHmmss.md`.

package/commands/fec-refactor.md

@@ -0,0 +1,18 @@
+---
+name: fec-refactor
+description: Execute controlled behavior-preserving frontend refactoring with small steps, verification, rollback, and proof reporting.
+---
+
+Execute a pure structural refactoring under a recorded behavior contract.
+
+## Workflow
+
+1. Classify the request and redirect feature work, unknown bugs, migrations, dead-code cleanup, or general review when they own the task.
+2. Discover project facts and establish the existing validation baseline.
+3. If no plan is supplied, diagnose evidence and build an ordered plan first. If a plan is supplied, revalidate it against the current code.
+4. Record risk and Diff Budget. `DANGER` stops for explicit approval unless the specific compatibility plan is already authorized.
+5. Execute **one refactoring step** with one primary structural intent.
+6. Immediately run the narrowest sufficient verification and inspect actual scope.
+7. If the step causes a new regression, revert that step before attempting a smaller or different transformation.
+8. Repeat only after the current step is green and within budget.
+9. Run final broad validation and save `reports/refactoring/refactoring-YYYY-MM-DD-HHmmss.md` with a `PASS`, `PARTIAL`, or `NOT PROVEN` behavior-preservation verdict.

package/commands/fec-review.md

@@ -1,19 +1,31 @@
 ---
 name: fec-review
-description: Conduct a standardized review of the specified file or recently changed front-end code, output a graded review report and save it as a Markdown file.
+description: Conduct a standardized review of the frontend changes, specified files/directories, or the whole project, output a graded review report and save it as a Markdown file.
 ---
 
-Conduct a comprehensive review of the front-end code. Read the project status and diff first, and then output the findings with evidence; do not write guesses as blocking items. If you need to **combine git diff, reduce noise output by severity level (CRITICAL→LOW), and explicitly give Approve/Warning/Block conclusions**, you can entrust the **`fec-code-reviewer`** subagent to execute; if the changes are mainly **`.ts` / `.tsx` / `.js` / `.jsx`** and you need to run **typecheck/eslint**, PR merge readiness check and Special conclusions on TS/JS idioms can be delegated to **`typescript-reviewer`** (reported as `typescript-review-*.md`). Otherwise, continue to press this command and the `fec-code-review` Skill process.
+Conduct a comprehensive review of the front-end code. Read the project status and selected scope first (diffs only for change review), and then output the findings with evidence; do not write guesses as blocking items. If you need to **combine git diff, reduce noise output by severity level (CRITICAL→LOW), and explicitly give Approve/Warning/Block conclusions**, you can entrust the **`fec-code-reviewer`** subagent to execute; if the changes are mainly **`.ts` / `.tsx` / `.js` / `.jsx`** and you need to run **typecheck/eslint**, PR merge readiness check and Special conclusions on TS/JS idioms can be delegated to **`fec-typescript-reviewer`** (reported as `typescript-review-*.md`). Otherwise, continue to press this command and the `fec-code-review` Skill process.
 
-## Execution steps
+## Review modes and coverage
+
+User-specified scope takes precedence over the default. Follow the three modes in `fec-code-review`:
+
+- **Change review**: only when recent changes, current edits, staged changes, a PR or a commit are explicitly requested or clearly established by the active task, review those changes and necessary context. For local changes, inspect staged and unstaged diffs and relevant untracked project files within the requested scope; a staged-only request reviews only staged changes. If there are no changes, report that there is nothing to review; do not switch to recent commits or expand scope automatically.
+- **Targeted review**: when files or directories are specified, inventory and review existing code in that scope, including unchanged code; no Git diff is required.
+- **Project review (default)**: when no scope or change context is specified, or when the entire project is requested, inventory project-owned frontend code, related tests, configuration and dependency declarations, then review in module batches, including unchanged code; no Git diff is required.
+
+Select scope before collecting diffs. A file/directory alone means full review of that scope; a path combined with an explicit change request restricts incremental review to that path. An unqualified invocation defaults to project review even if Git changes exist. At review start, state the selected mode and target scope. When automatically delegating review after edits, pass the current change scope explicitly; do not trigger project review merely because the reviewer was called.
+
+Exclude dependency directories, build outputs, caches, generated files and third-party code by default, and record exclusions. Keep the frontend responsibility boundary; this is not a backend audit. A nonexistent target or a scope with no relevant files must be reported explicitly, not replaced with another scope.
+
+Merge findings with the same root cause across batches. Report **review mode, target scope, reviewed files/modules, exclusions, unreviewed files/modules, completion status and verification commands/results**. If context or execution limits prevent completion, mark the review partial and list remaining modules; never claim complete project coverage. Reading callers for context or running project-wide lint/typecheck does not count as manual review of those files.
 
-1. Determine the scope of the review:
+Change reviews retain merge recommendations. Targeted and project reviews use a risk assessment (Low / Medium / High, with blocking findings), not a claim of merge readiness. Preserve severity levels, evidence requirements and report filenames. Output reports only unless repairs are explicitly requested.
 
-   - If the user specifies a file path, review the specified file
-   - If the user does not specify a file, run `git diff --name-only HEAD` to get a list of recently changed files
-   - If there is no git change record, prompt the user to specify the file or directory that needs to be reviewed
+## Execution steps
+
+1. Select one of the three modes above and inventory target files. Default to project review when no scope or change context is specified; an incremental request with no changes must not trigger scope expansion.
 
-2. Filter to only keep front-end related files (`.ts`, `.tsx`, `.vue`, `.js`, `.jsx`, `.css`, `.scss`, `.less`, `.html`)
+2. Include frontend source, related tests, configuration and dependency declarations, rather than filtering only by source extensions; record default exclusions.
 
 3. Use the review dimensions of `fec-code-review` Skill to check item by item:
 
@@ -39,6 +51,14 @@ Conduct a comprehensive review of the front-end code. Read the project status an
    > Generation time: YYYY-MM-DD HH:mm
    > Review tool: frontend-craft
 
+   > Review mode: change / targeted / project
+   > Target scope: paths or PR/commit
+   > Reviewed: file or module inventory
+   > Exclusions: paths and reasons
+   > Unreviewed: remaining files or modules (state none if complete)
+   > Completion: complete / partial
+   > Verification: commands, results and reasons for skipped checks
+
    **Review Scope**: N documents
 
    ## 🔴 Must be modified (N items)
@@ -55,7 +75,7 @@ Conduct a comprehensive review of the front-end code. Read the project status an
 
    ## Risk Level: Low / Medium / High
 
-   **Overall Rating**: Can be merged / merged after modification / needs to be refactored
+   **Conclusion**: Change review: merge recommendation; targeted/project review: Low / Medium / High risk and blocking findings
    ```
 
 5. Use the Write tool to save the report content as a Markdown file:
@@ -63,4 +83,14 @@ Conduct a comprehensive review of the front-end code. Read the project status an
    - Filename: `code-review-YYYY-MM-DD-HHmmss.md` (use current timestamp)
    - Inform the user of the report file path after saving
 
-6. If the user agrees to the modification, directly repair the items that can be automatically repaired in "Must Modify".
+6. If the user agrees to the modification, directly repair the items that can be automatically repaired in "Must Modify".
+
+## Usage examples
+
+- `/fec-review`: review the entire project by default.
+- `/fec-review review recent changes`: review only current changes.
+- `/fec-review review src/components/Button.tsx`: review the specified file, including unchanged code.
+- `/fec-review review src/features/`: review the specified directory.
+- `/fec-review review the entire project`: inventory and review project-owned frontend code by module.
+
+These are natural-language instructions, not new CLI flags.

package/commands/fec-scaffold.md

@@ -1,6 +1,6 @@
 ---
 name: fec-scaffold
-description: Create a standard directory structure and template files for pages, features, or components according to project specifications. Usage: /fec-scaffold <type> <Name>, such as /fec-scaffold page UserDetail
+description: "Create a standard directory structure and template files for pages, features, or components according to project specifications. Usage: /fec-scaffold <type> <Name>, such as /fec-scaffold page UserDetail"
 ---
 
 Create new pages, features or components according to the directory structure agreed upon by the project.

package/commands/fec-smell.md

@@ -0,0 +1,17 @@
+---
+name: fec-smell
+description: Diagnose frontend code smells with evidence and candidate refactorings without changing business code.
+---
+
+Use this command for **DIAGNOSE ONLY** analysis. Do not modify business code.
+
+## Workflow
+
+1. Discover the requested scope, project/framework facts, and current diff.
+2. Collect concrete evidence about ownership, duplication, change coupling, data flow, control flow, and public boundaries.
+3. Match evidence against the 24-smell catalog and run false-positive checks.
+4. For each finding report: `Location`, `Evidence`, `Impact`, `Smell`, `Confidence`, `Candidates`, `Priority`, and `False-positive check`.
+5. LOW-confidence findings remain open questions and must not become automatic edits.
+6. Save the result to `reports/refactoring/smell-YYYY-MM-DD-HHmmss.md`.
+
+Metrics such as LOC or complexity may focus investigation but are not sufficient proof by themselves.

package/commands/fec-tdd.md

@@ -1,6 +1,6 @@
 ---
 name: fec-tdd
-description: Use front-end TDD workflow to implement functions, fix bugs, or refactor logic: first write failing tests, then implement minimal code, and then refactor.
+description: "Use front-end TDD workflow to implement functions, fix bugs, or refactor logic: first write failing tests, then implement minimal code, and then refactor."
 ---
 
 Perform test-driven development as per `fec-tdd-workflow`.
@@ -18,4 +18,8 @@ Perform test-driven development as per `fec-tdd-workflow`.
 
 - Component and hook testing: `fec-component-testing`
 - Cross-page browser process: `fec-e2e-testing`
-- Test layering strategy: `fec-testing-strategy`
+- Test layering strategy: `fec-testing-strategy`
+
+## Boundary
+
+Use this command for new observable behavior and behavior-changing bug fixes. For pure behavior-preserving refactoring, do not invent a RED test: characterize the already-correct behavior and keep it GREEN → REFACTOR → GREEN.