Agent Skills
› AjayIrkal23/agentic-mercy-10x
› frontend-standards-always-follow
frontend-standards-always-follow
GitHub作为前端开发的强制基线，触发时自动加载10个配套技能。规范React/Next.js等项目的代码结构、Tailwind样式、Hook提取及文件拆分（<250行），确保UI与逻辑分离并遵循现有契约。
触发场景
任何Web前端UI开发任务
React/Next.js/Vite组件或页面构建
CSS样式与浏览器UX优化
前端性能调优
安装
npx skills add AjayIrkal23/agentic-mercy-10x --skill frontend-standards-always-follow -g -y
SKILL.md
Frontmatter
{
"name": "frontend-standards-always-follow",
"schema": 1,
"category": "frontend",
"surfaces": [
"frontend"
],
"triggers": {
"paths": [
".hook.",
".jsx",
".spec.",
".test.",
".tsx",
"\/auth\/",
"\/components\/",
"\/guard\/",
"\/hooks\/use",
"\/login\/",
"\/pages\/",
"\/router\/",
"\/routes\/",
"\/src\/hooks\/",
"\/store\/",
"\/views\/",
"__tests__",
"_test.ts",
"_test.tsx",
"protected",
"reducer.",
"redux",
"route.ts",
"route.tsx",
"routes.ts",
"selector.",
"session",
"slice.",
"src\/schemas\/",
"src\/types\/",
"use-",
"useHook"
],
"intents": [
"frontend"
],
"keywords": [
"always",
"always-on",
"apply",
"apps",
"baseline",
"browser",
"build",
"client",
"component",
"css",
"dashboard",
"data",
"follow",
"frontend",
"hook",
"matching",
"next.js",
"performance",
"plugin",
"react",
"requested",
"skill",
"standards",
"state",
"styling",
"task",
"vite",
"web",
"web\/frontend",
"work"
]
},
"platforms": [
"linux",
"darwin",
"windows"
],
"token-cost": 1188,
"description": "ALWAYS invoke when any web\/frontend UI, React, Next.js, Vite, dashboard, component, CSS, client data, hook, state, styling, browser UX, or frontend performance work is requested. MUST apply this always-on frontend baseline after the matching Build Web Apps plugin skill for any web\/frontend task.",
"disable-model-invocation": false
}
Frontend Standards Always Follow
🔒 MANDATORY COMPANION BUNDLE — load ALL now, every time, no exceptions
Reading this skill is the trigger. Before doing ANY frontend work you MUST immediately
Skill-invoke all of the following, end to end. Not "when the surface is touched" — always, as a set, the moment this baseline loads:
frontend-structure-standardsfrontend-api-standardsfrontend-response-handlingfrontend-server-data-patternsfrontend-code-reviewfrontend-ui-engineeringreact-hooks-patternstailwind-design-systembrowser-testing-with-devtoolsvite-react-best-practicesThis is non-negotiable. Do not skip, defer, or sample a subset. If any one is not yet loaded this turn, load it now before writing frontend code.
Overview
This is the always-on frontend baseline.
Apply it immediately after the matching Build Web Apps plugin skill for any frontend task. The companion bundle above is NAMED (trigger pointers); load each companion's body LAZILY, only when the task needs it — not all in full every time.
Always Apply
- Inspect existing route pages, components, hooks, API modules, and stores before changing behavior.
- Preserve current contracts and business logic unless the task explicitly changes them.
- Preserve the route-page vs feature-component split: default to
src/pages/<domain>/<route>/index.tsxfor route entry parents andsrc/components/<domain>/<feature>/*for route-owned UI unless repo-local docs override it. - Prefer Tailwind utilities first for layout, spacing, sizing, typography, breakpoints, and common state classes.
- Prefer component-local
*.module.cssfiles for feature-local visuals, pseudo-elements, keyframes, layered backgrounds, and complex selectors. - Keep
src/index.csslimited to Tailwind import, domain stylesheet imports, and global base/reset selectors. - Keep shared non-module domain styling in
src/styles/<domain>/index.css. - Keep UI components free of direct API calls.
- Keep app-owned frontend types in central domain files under
src/types/<domain>/... - Import custom types into components, hooks, API modules, and stores instead of declaring them inline
- When feature UI grows stateful or JSX-heavy, extract feature-local hooks and keep the component as a thin orchestrator.
- Prefer
src/components/<domain>/<feature>/hooks/*for feature-owned hooks andsrc/hooks/<domain>/*only when the hook is reused across features. - Prefer focused UI type files such as
src/types/<domain>/<feature>-ui.tsfor feature props and local UI state. - Keep manually maintained frontend source files at or below 250 lines. If a touched file is already over 250 lines, split or reduce it before adding more behavior unless the user explicitly scopes that cleanup out.
- Reuse existing primitives, helpers, and patterns before creating new ones.
- Keep files focused and split obvious multi-responsibility files.
- Remove duplication, stale imports, and replaced UI logic while you work.
Non-Negotiables
- No guessing when the repo already shows a pattern.
- No client-side filtering or pagination for server-backed datasets.
- No response-shape changes without explicit intent.
- No inline ownership of app-owned custom
typeorinterfacedeclarations inside frontend modules. - No touched manually maintained frontend source file may remain over 250 lines without an explicit blocker.
- No monolithic frontend files when decomposition is straightforward.
- No feature or page selectors added directly to
src/index.cssonce domain and module styling ownership exists. - No CSS Modules routed through root CSS or domain CSS.
- No mixed old/new implementations left behind without a reason.
Load Next When Needed
frontend-structure-standardsfor folder layout, component boundaries, file decomposition, and the detailedsrc/types/<domain>/...ownership model.frontend-response-handlingfor API parsing, normalized errors, and backend-driven list behavior.frontend-server-data-patternsfor tables, lists, search, and query-state flows.react-hooks-patternsfor complex local state, effects, refs, reducers, or custom hook extraction.tailwind-design-system,ui-ux-pro-max,frontend-ui-engineering, orimpeccableonly when the task explicitly needs them.
Completion Checklist
- Existing frontend patterns were inspected first.
- Route entry parents remained separate from feature-owned UI unless the repo explicitly uses a different convention.
- Reuse beat reinvention where possible.
- Data access stayed outside presentational UI.
- Files remained focused and readable.
- Root, domain, and feature styling ownership stayed in the correct layer.
- No stale frontend code was left behind.
版本历史
- 581d130 当前 2026-07-19 09:08
