菜单
Run this skill when auditing frontend code. Covers CSS tokens, shared component reuse, API client rules, barrel files, store placement, accessibility, responsiveness, memoization, timer edge cases, console leftovers, and wireframe alignment.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | frontend-audit |
| description | Run this skill when auditing frontend code. Covers CSS tokens, shared component reuse, API client rules, barrel files, store placement, accessibility, responsiveness, memoization, timer edge cases, console leftovers, and wireframe alignment. |
| user-invocable | true |
Hardcoded CSS values — any color, spacing, or typography value that should be a CSS variable (var(--)) or utility class? Use DESIGN.md tokens and globals.css classes.
Shared component reuse — any reimplementation of Button, Input, LoadingScreen, ErrorScreen, ProgressBar, FilterChip, ToggleSwitch, or ContentBrowser instead of importing from shared/components?
Direct apiClient calls — any hook/component calling apiClient.get/post/etc directly instead of through a service layer?
Store placement — any store file inside a components/ directory instead of stores/?
Barrel files — any index.ts defining types/constants/logic inline instead of re-exporting?
CSS import bypass — any // eslint-disable-next-line no-restricted-imports comment to bypass CSS import restrictions?
Global CSS bleed — component styles leaking via global button/input/select resets?
Loading/error/empty states — do async data-fetching components have timeout, retry, or proper loading/error/empty state transitions instead of "Loading..." indefinitely?
React.memo gaps — are frequently re-rendering components (ReviewCard, TonePairDrills, ToneChangeRules) missing React.memo?
Responsive layout — do grid layouts use auto-fill/minmax for responsiveness?
Accessibility — do interactive elements have role, aria-label, tabIndex, and keyboard handlers?
Console.* leftovers — any debug console.log/console.warn/console.error still in production code?
Wireframe alignment — does the component structure match the expected card/section layout pattern from the design?
Timer edge cases — countdown timers must have an explicit "time's up" state transition, not silently stop
Debounce edge cases — auto-submit inputs must account for multi-syllable input (longer debounce or explicit submit button)
Use when: designing a new page or feature UI, deciding where to place a component, or choosing between creating new vs reusing existing components.
Extract a lesson from recent agent struggles and create a .instructions.md file to prevent recurrence. Use when: agent made a mistake, discovered a new convention, found a recurring issue pattern.
Run this skill when auditing backend code. Covers error message format, architecture boundaries, input validation, DI compliance, Prisma safety, test coverage, API contracts, and security.
Run Prisma schema changes safely after editing schema.prisma. Use when: editing schema.prisma, adding new models, changing columns, database migration.
