feat: add new skills for coding standards, continuous learning, detail layout, form layout, project guidelines, security review, and verification loop

- Introduced coding standards for TypeScript and React in SKILL.md.
- Added continuous learning skill with configuration and evaluation scripts.
- Created detail layout guidelines for read-only pages.
- Established form layout rules for data-entry forms.
- Documented project guidelines for the frontend monorepo.
- Implemented security review checklist for frontend/Electron applications.
- Developed a verification loop skill for comprehensive session checks.

This commit enhances the skill set available for developers, ensuring adherence to best practices and improving code quality.
This commit is contained in:
shancheas
2026-08-25 16:58:10 +07:00
parent e0d55dae13
commit ff6814d038
69 changed files with 5757 additions and 0 deletions
+24
View File
@@ -0,0 +1,24 @@
# Build and Fix
Incrementally fix TypeScript and build errors:
1. Run `pnpm typecheck` or `pnpm build` (this repo uses pnpm + Turbo + Vite)
2. Parse error output:
- Group by file
- Sort by severity
3. For each error:
- Show 5 lines of context
- Explain the issue
- Apply a minimal fix
- Re-run the failing command
4. Stop if:
- The fix introduces new errors
- The same error persists after 3 attempts
- The user asks to pause
5. Show summary of fixed / remaining / new errors
Fix one error at a time. Do not refactor. Invoke **build-error-resolver** when useful.
+74
View File
@@ -0,0 +1,74 @@
# Checkpoint Command
Create or verify a checkpoint in your workflow.
## Usage
`/checkpoint [create|verify|list] [name]`
## Create Checkpoint
When creating a checkpoint:
1. Run `/verify quick` to ensure current state is clean
2. Create a git stash or commit with checkpoint name
3. Log checkpoint to `.cursor/checkpoints.log`:
```bash
echo "$(date +%Y-%m-%d-%H:%M) | $CHECKPOINT_NAME | $(git rev-parse --short HEAD)" >> .cursor/checkpoints.log
```
4. Report checkpoint created
## Verify Checkpoint
When verifying against a checkpoint:
1. Read checkpoint from log
2. Compare current state to checkpoint:
- Files added since checkpoint
- Files modified since checkpoint
- Test pass rate now vs then
- Coverage now vs then
3. Report:
```
CHECKPOINT COMPARISON: $NAME
============================
Files changed: X
Tests: +Y passed / -Z failed
Coverage: +X% / -Y%
Build: [PASS/FAIL]
```
## List Checkpoints
Show all checkpoints with:
- Name
- Timestamp
- Git SHA
- Status (current, behind, ahead)
## Workflow
Typical checkpoint flow:
```
[Start] --> /checkpoint create "feature-start"
|
[Implement] --> /checkpoint create "core-done"
|
[Test] --> /checkpoint verify "core-done"
|
[Refactor] --> /checkpoint create "refactor-done"
|
[PR] --> /checkpoint verify "feature-start"
```
## Arguments
$ARGUMENTS:
- `create <name>` - Create named checkpoint
- `verify <name>` - Verify against named checkpoint
- `list` - Show all checkpoints
- `clear` - Remove old checkpoints (keeps last 5)
+40
View File
@@ -0,0 +1,40 @@
# Code Review
Comprehensive security and quality review of uncommitted changes:
1. Get changed files: git diff --name-only HEAD
2. For each changed file, check for:
**Security Issues (CRITICAL):**
- Hardcoded credentials, API keys, tokens
- SQL injection vulnerabilities
- XSS vulnerabilities
- Missing input validation
- Insecure dependencies
- Path traversal risks
**Code Quality (HIGH):**
- Functions > 50 lines
- Files > 800 lines
- Nesting depth > 4 levels
- Missing error handling
- console.log statements
- TODO/FIXME comments
- Missing JSDoc for public APIs
**Best Practices (MEDIUM):**
- Mutation patterns (use immutable instead)
- Emoji usage in code/comments
- Missing tests for new code
- Accessibility issues (a11y)
3. Generate report with:
- Severity: CRITICAL, HIGH, MEDIUM, LOW
- File location and line numbers
- Issue description
- Suggested fix
4. Block commit if CRITICAL or HIGH issues found
Never approve code with security vulnerabilities!
+46
View File
@@ -0,0 +1,46 @@
---
description: Generate and run frontend journey tests with Vitest/Testing Library, plus browser verification for apps/web. Covers login and FULL_PAGE index/form/detail.
---
# E2E / Journey Command
This command invokes the **e2e-runner** agent to cover critical UI journeys. There is no NestJS or Playwright suite.
## What This Command Does
1. **Identify journeys** — login, FULL_PAGE index / form / detail
2. **Write or update Vitest tests** — mock `@repo/core-api` services
3. **Run** `pnpm test` (or `pnpm --filter web test`)
4. **Browser-verify** `apps/web` when the change is routing or layout
5. **Report** pass/fail
## When to Use
Use `/e2e` when:
- Testing login or a FULL_PAGE module flow
- Verifying index → form → detail navigation
- Checking empty / error states after a UI change
- Preparing a PR that touches routing or providers
## How It Works
The e2e-runner agent will:
1. Copy patterns from `apps/web/src/apps/main/modules/example/full-page/`
2. Mock `fullPageDataService` (or the module's factory) — not a database
3. Run `pnpm test`
4. Drive the browser for layout/routing if needed (`pnpm dev:web`)
5. Summarize failures
## Example
```
User: /e2e Test the example full-page index and detail flow
```
Canonical sample: `example/full-page`. Do not invent a third page style. Do not add Playwright unless asked.
## Related
Agent: `.cursor/agents/e2e-runner.md`
+120
View File
@@ -0,0 +1,120 @@
# Eval Command
Manage eval-driven development workflow.
## Usage
`/eval [define|check|report|list] [feature-name]`
## Define Evals
`/eval define feature-name`
Create a new eval definition:
1. Create `.cursor/evals/feature-name.md` with template:
```markdown
## EVAL: feature-name
Created: $(date)
### Capability Evals
- [ ] [Description of capability 1]
- [ ] [Description of capability 2]
### Regression Evals
- [ ] [Existing behavior 1 still works]
- [ ] [Existing behavior 2 still works]
### Success Criteria
- pass@3 > 90% for capability evals
- pass^3 = 100% for regression evals
```
2. Prompt user to fill in specific criteria
## Check Evals
`/eval check feature-name`
Run evals for a feature:
1. Read eval definition from `.cursor/evals/feature-name.md`
2. For each capability eval:
- Attempt to verify criterion
- Record PASS/FAIL
- Log attempt in `.cursor/evals/feature-name.log`
3. For each regression eval:
- Run relevant tests
- Compare against baseline
- Record PASS/FAIL
4. Report current status:
```
EVAL CHECK: feature-name
========================
Capability: X/Y passing
Regression: X/Y passing
Status: IN PROGRESS / READY
```
## Report Evals
`/eval report feature-name`
Generate comprehensive eval report:
```
EVAL REPORT: feature-name
=========================
Generated: $(date)
CAPABILITY EVALS
----------------
[eval-1]: PASS (pass@1)
[eval-2]: PASS (pass@2) - required retry
[eval-3]: FAIL - see notes
REGRESSION EVALS
----------------
[test-1]: PASS
[test-2]: PASS
[test-3]: PASS
METRICS
-------
Capability pass@1: 67%
Capability pass@3: 100%
Regression pass^3: 100%
NOTES
-----
[Any issues, edge cases, or observations]
RECOMMENDATION
--------------
[SHIP / NEEDS WORK / BLOCKED]
```
## List Evals
`/eval list`
Show all eval definitions:
```
EVAL DEFINITIONS
================
feature-auth [3/5 passing] IN PROGRESS
feature-search [5/5 passing] READY
feature-export [0/4 passing] NOT STARTED
```
## Arguments
$ARGUMENTS:
- `define <name>` - Create new eval definition
- `check <name>` - Run and check evals
- `report <name>` - Generate full report
- `list` - Show all evals
- `clean` - Remove old eval logs (keeps last 10 runs)
+70
View File
@@ -0,0 +1,70 @@
# /learn - Extract Reusable Patterns
Analyze the current session and extract any patterns worth saving as skills.
## Trigger
Run `/learn` at any point during a session when you've solved a non-trivial problem.
## What to Extract
Look for:
1. **Error Resolution Patterns**
- What error occurred?
- What was the root cause?
- What fixed it?
- Is this reusable for similar errors?
2. **Debugging Techniques**
- Non-obvious debugging steps
- Tool combinations that worked
- Diagnostic patterns
3. **Workarounds**
- Library quirks
- API limitations
- Version-specific fixes
4. **Project-Specific Patterns**
- Codebase conventions discovered
- Architecture decisions made
- Integration patterns
## Output Format
Create a skill file at `.agents/skills/learned/[pattern-name].md`:
```markdown
# [Descriptive Pattern Name]
**Extracted:** [Date]
**Context:** [Brief description of when this applies]
## Problem
[What problem this solves - be specific]
## Solution
[The pattern/technique/workaround]
## Example
[Code example if applicable]
## When to Use
[Trigger conditions - what should activate this skill]
```
## Process
1. Review the session for extractable patterns
2. Identify the most valuable/reusable insight
3. Draft the skill file
4. Ask user to confirm before saving
5. Save to `.agents/skills/learned/`
## Notes
- Don't extract trivial fixes (typos, simple syntax errors)
- Don't extract one-time issues (specific API outages, etc.)
- Focus on patterns that will save time in future sessions
- Keep skills focused - one pattern per skill
+172
View File
@@ -0,0 +1,172 @@
# Orchestrate Command
Sequential agent workflow for complex tasks.
## Usage
`/orchestrate [workflow-type] [task-description]`
## Workflow Types
### feature
Full feature implementation workflow:
```
planner -> tdd-guide -> code-reviewer -> security-reviewer
```
### bugfix
Bug investigation and fix workflow:
```
explorer -> tdd-guide -> code-reviewer
```
### refactor
Safe refactoring workflow:
```
architect -> code-reviewer -> tdd-guide
```
### security
Security-focused review:
```
security-reviewer -> code-reviewer -> architect
```
## Execution Pattern
For each agent in the workflow:
1. **Invoke agent** with context from previous agent
2. **Collect output** as structured handoff document
3. **Pass to next agent** in chain
4. **Aggregate results** into final report
## Handoff Document Format
Between agents, create handoff document:
```markdown
## HANDOFF: [previous-agent] -> [next-agent]
### Context
[Summary of what was done]
### Findings
[Key discoveries or decisions]
### Files Modified
[List of files touched]
### Open Questions
[Unresolved items for next agent]
### Recommendations
[Suggested next steps]
```
## Example: Feature Workflow
```
/orchestrate feature "Add user authentication"
```
Executes:
1. **Planner Agent**
- Analyzes requirements
- Creates implementation plan
- Identifies dependencies
- Output: `HANDOFF: planner -> tdd-guide`
2. **TDD Guide Agent**
- Reads planner handoff
- Writes tests first
- Implements to pass tests
- Output: `HANDOFF: tdd-guide -> code-reviewer`
3. **Code Reviewer Agent**
- Reviews implementation
- Checks for issues
- Suggests improvements
- Output: `HANDOFF: code-reviewer -> security-reviewer`
4. **Security Reviewer Agent**
- Security audit
- Vulnerability check
- Final approval
- Output: Final Report
## Final Report Format
```
ORCHESTRATION REPORT
====================
Workflow: feature
Task: Add user authentication
Agents: planner -> tdd-guide -> code-reviewer -> security-reviewer
SUMMARY
-------
[One paragraph summary]
AGENT OUTPUTS
-------------
Planner: [summary]
TDD Guide: [summary]
Code Reviewer: [summary]
Security Reviewer: [summary]
FILES CHANGED
-------------
[List all files modified]
TEST RESULTS
------------
[Test pass/fail summary]
SECURITY STATUS
---------------
[Security findings]
RECOMMENDATION
--------------
[SHIP / NEEDS WORK / BLOCKED]
```
## Parallel Execution
For independent checks, run agents in parallel:
```markdown
### Parallel Phase
Run simultaneously:
- code-reviewer (quality)
- security-reviewer (security)
- architect (design)
### Merge Results
Combine outputs into single report
```
## Arguments
$ARGUMENTS:
- `feature <description>` - Full feature workflow
- `bugfix <description>` - Bug fix workflow
- `refactor <description>` - Refactoring workflow
- `security <description>` - Security review workflow
- `custom <agents> <description>` - Custom agent sequence
## Custom Workflow Example
```
/orchestrate custom "architect,tdd-guide,code-reviewer" "Redesign caching layer"
```
## Tips
1. **Start with planner** for complex features
2. **Always include code-reviewer** before merge
3. **Use security-reviewer** for auth/payment/PII
4. **Keep handoffs concise** - focus on what next agent needs
5. **Run verification** between agents if needed
+99
View File
@@ -0,0 +1,99 @@
---
description: Restate requirements, assess risks, and create step-by-step implementation plan. WAIT for user CONFIRM before touching any code.
---
# Plan Command
This command invokes the **planner** agent to create a comprehensive implementation plan before writing any code.
## What This Command Does
1. **Restate Requirements** - Clarify what needs to be built
2. **Identify Risks** - Surface potential issues and blockers
3. **Create Step Plan** - Break down implementation into phases
4. **Wait for Confirmation** - MUST receive user approval before proceeding
## When to Use
Use `/plan` when:
- Starting a new feature
- Making significant architectural changes
- Working on complex refactoring
- Multiple files/components will be affected
- Requirements are unclear or ambiguous
## How It Works
The planner agent will:
1. **Analyze the request** and restate requirements in clear terms
2. **Break down into phases** with specific, actionable steps
3. **Identify dependencies** between components
4. **Assess risks** and potential blockers
5. **Estimate complexity** (High/Medium/Low)
6. **Present the plan** and WAIT for your explicit confirmation
## Example Usage
```
User: /plan Add a FULL_PAGE master-data module for vehicle types, same as example/full-page
Agent (planner):
# Implementation Plan: Vehicle Types FULL_PAGE module
## Requirements Restatement
- New authenticated module under apps/web
- Index, form (create/edit/duplicate), and detail pages
- Copy example/full-page layout and wiring
## Implementation Phases
### Phase 1: Domain + data
- ModuleConfigEntity, entity, Zod validator (createFullPageSchema pattern)
- Remote data service via apiClient + CommonRemoteDataServices
- Transformer DTO ↔ entity
### Phase 2: Presentation
- presentation/factory with EnterpriseModuleProvider + registerModuleNamespace
- Index / form / detail pages using Enterprise* providers
- Field* form fields and detail-layout skill
- Menu + lazy route registration
### Phase 3: Tests
- Vitest for validator and transformer
- Browser-verify index → form → detail
## Dependencies
- @repo/ui foundations and form fields
- @repo/core-api CommonRemoteDataServices
- Backend API already exposing the resource (out of scope)
## Risks
- MEDIUM: i18n namespace mismatch
- LOW: Copying the sample and leaving EXAMPLE_FULL_PAGE keys
## Estimated Complexity: MEDIUM
**WAITING FOR CONFIRMATION**: Proceed with this plan? (yes/no/modify)
```
## Important Notes
**CRITICAL**: The planner agent will **NOT** write any code until you explicitly confirm the plan with "yes" or "proceed" or similar affirmative response.
If you want changes, respond with:
- "modify: [your changes]"
- "different approach: [alternative]"
- "skip phase 2 and do phase 3 first"
## Integration with Other Commands
After planning:
- Use `/tdd` to implement with test-driven development
- Use `/build-and-fix` if build errors occur
- Use `/code-review` to review completed implementation
## Related Agents
This command invokes the `planner` agent located at:
`.cursor/agents/planner.md`
+28
View File
@@ -0,0 +1,28 @@
# Refactor Clean
Safely identify and remove dead code with test verification:
1. Run dead code analysis tools:
- knip: Find unused exports and files
- depcheck: Find unused dependencies
- ts-prune: Find unused TypeScript exports
2. Generate comprehensive report in .reports/dead-code-analysis.md
3. Categorize findings by severity:
- SAFE: Test files, unused utilities
- CAUTION: API routes, components
- DANGER: Config files, main entry points
4. Propose safe deletions only
5. Before each deletion:
- Run full test suite
- Verify tests pass
- Apply change
- Re-run tests
- Rollback if tests fail
6. Show summary of cleaned items
Never delete code without running tests first!
+80
View File
@@ -0,0 +1,80 @@
---
description: Configure your preferred package manager (npm/pnpm/yarn/bun)
disable-model-invocation: true
---
# Package Manager Setup
Configure your preferred package manager for this project or globally.
## Usage
```bash
# Detect current package manager
node scripts/setup-package-manager.js --detect
# Set global preference
node scripts/setup-package-manager.js --global pnpm
# Set project preference
node scripts/setup-package-manager.js --project bun
# List available package managers
node scripts/setup-package-manager.js --list
```
## Detection Priority
When determining which package manager to use, the following order is checked:
1. **Environment variable**: `CURSOR_PACKAGE_MANAGER`
2. **Project config**: `.cursor/package-manager.json`
3. **package.json**: `packageManager` field
4. **Lock file**: Presence of package-lock.json, yarn.lock, pnpm-lock.yaml, or bun.lockb
5. **Global config**: `~/.cursor/package-manager.json`
6. **Fallback**: First available package manager (pnpm > bun > yarn > npm)
## Configuration Files
### Global Configuration
```json
// ~/.cursor/package-manager.json
{
"packageManager": "pnpm"
}
```
### Project Configuration
```json
// .cursor/package-manager.json
{
"packageManager": "bun"
}
```
### package.json
```json
{
"packageManager": "pnpm@8.6.0"
}
```
## Environment Variable
Set `CURSOR_PACKAGE_MANAGER` to override all other detection methods:
```bash
# Windows (PowerShell)
$env:CURSOR_PACKAGE_MANAGER = "pnpm"
# macOS/Linux
export CURSOR_PACKAGE_MANAGER=pnpm
```
## Run the Detection
To see current package manager detection results, run:
```bash
node scripts/setup-package-manager.js --detect
```
+56
View File
@@ -0,0 +1,56 @@
---
description: Enforce test-driven development. Scaffold types, write Vitest tests FIRST, then implement the minimum to pass. Ensure 80%+ coverage.
---
# TDD Command
This command invokes the **tdd-guide** agent.
## What This Command Does
1. **Scaffold types** — inputs/outputs first
2. **Write failing tests** (RED) with Vitest
3. **Implement the minimum** (GREEN)
4. **Refactor** while green
5. **Check coverage** (80%+)
## When to Use
- New validators, transformers, stores, components
- Bug fixes (reproducing test first)
- Refactors of existing logic
## Cycle
```
RED → GREEN → REFACTOR → REPEAT
```
## Example
```
User: /tdd Add validation for the full-page name field
```
```typescript
// full-page.validator.test.ts
import { createFullPageSchema } from './full-page.validator'
it('rejects an empty name', () => {
const schema = createFullPageSchema((k) => k)
expect(schema.safeParse({ code: 'ABC', name: '' }).success).toBe(false)
})
```
```bash
pnpm --filter web test
pnpm test
pnpm check:all
```
Mock `@repo/core-api` / `apiClient`, not a database. UI in `packages/ui` uses Testing Library.
## Related
Agent: `.cursor/agents/tdd-guide.md`
Skill: `.agents/skills/tdd-workflow/`
+22
View File
@@ -0,0 +1,22 @@
# Test Coverage
Analyze Vitest coverage and add missing tests:
1. Run `pnpm test` (packages that support coverage: `pnpm --filter <pkg> test -- --coverage` when configured)
2. Identify files below 80%
3. For each under-covered file:
- Unit tests for validators, transformers, utils, stores
- Testing Library tests for `@repo/ui` components
- Journey tests for critical `apps/web` flows (mock data services)
4. Verify new tests pass
5. Show before/after coverage
Focus on:
- Happy path
- Error handling
- Edge cases (null, undefined, empty)
- Zod boundary conditions (`rangeLength`)
+15
View File
@@ -0,0 +1,15 @@
# Update Codemaps
Analyze the monorepo and refresh architecture notes. This is a frontend repo — no backend/database maps.
1. Scan apps and packages for public exports and app entry points
2. Write token-lean maps (only if a `codemaps/` folder already exists; otherwise update `apps/docs-dev`):
- architecture.md — apps vs packages, import rules
- web-modules.md — `apps/web` module layout (`example/full-page`)
- packages.md — `@repo/ui`, `@repo/core-*`, `@repo/utils`, `@repo/brand`
3. Do **not** create `codemaps/backend.md` or database schemas
4. If the diff vs the previous map is > 30%, ask before overwriting
5. Stamp each file with a freshness date
6. Optional report: `.reports/codemap-diff.txt`
Focus on high-level structure (`apps/`, `packages/`, module layers), not implementation details.
+22
View File
@@ -0,0 +1,22 @@
# Update Documentation
Sync docs with this frontend monorepo. Source of truth: `package.json`, `apps/web/.env.example`, and `apps/docs-dev` (VitePress).
1. Read root `package.json` scripts
- Table of `pnpm dev:web`, `pnpm dev:showcase`, `pnpm dev:docs-dev`, `pnpm typecheck:web`, `pnpm test`, `pnpm check:all`
2. Read `apps/web/.env.example`
- Document each `VITE_*` var (they are public to the client)
3. Update `apps/docs-dev` (VitePress) and the root README
- Where to work (`apps/web` vs `showcase`)
- Module layout (`example/full-page`)
- Preferred `@repo/*` imports
4. Do **not** generate `docs/CONTRIB.md` / `docs/RUNBOOK.md` unless those files already exist. This repo's docs app is `apps/docs-dev`.
5. List docs not modified in 90+ days for manual review
6. Show a diff summary
Single source of truth: `package.json`, `apps/web/.env.example`, `apps/docs-dev`, `apps/showcase` (API shape).
+59
View File
@@ -0,0 +1,59 @@
# Verification Command
Run comprehensive verification on current codebase state.
## Instructions
Execute verification in this exact order:
1. **Build Check**
- Run the build command for this project
- If it fails, report errors and STOP
2. **Type Check**
- Run TypeScript/type checker
- Report all errors with file:line
3. **Lint Check**
- Run linter
- Report warnings and errors
4. **Test Suite**
- Run all tests
- Report pass/fail count
- Report coverage percentage
5. **Console.log Audit**
- Search for console.log in source files
- Report locations
6. **Git Status**
- Show uncommitted changes
- Show files modified since last commit
## Output
Produce a concise verification report:
```
VERIFICATION: [PASS/FAIL]
Build: [OK/FAIL]
Types: [OK/X errors]
Lint: [OK/X issues]
Tests: [X/Y passed, Z% coverage]
Secrets: [OK/X found]
Logs: [OK/X console.logs]
Ready for PR: [YES/NO]
```
If any critical issues, list them with fix suggestions.
## Arguments
$ARGUMENTS can be:
- `quick` - Only build + types
- `full` - All checks (default)
- `pre-commit` - Checks relevant for commits
- `pre-pr` - Full checks plus security scan