前端如何写出优秀的 AI Agent Skillsh4 id E8 83 8C E6 99 AF 背景 h4 p 用 nbsp Cursor nbsp 写代码的时候 明明团队有自己的组件规范 但 AI 生成出来的代码风格完全对不上号 每次都要手动改半天 这不是 AI 不够聪明 而是你没 教 过它 p p 从 p
大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。
背景
用 Cursor 写代码的时候，明明团队有自己的组件规范，但 AI 生成出来的代码风格完全对不上号，每次都要手动改半天——这不是 AI 不够聪明，而是你没"教"过它。
--- name: react-component-creator description: Create React components with TypeScript and hooks. Use when the user asks to create, generate, or scaffold a React component. --- # React Component Creator Instructions 1. Create component file at `src/components/[ComponentName]/index.tsx` 2. Use function component with TypeScript interface for props 3. Export as named export (not default export) Component Template tsx interface [Name]Props { // props here } export function [Name]({ ...props }: [Name]Props) { return
...
} Conventions - File naming: PascalCase for components, camelCase for hooks - One component per file - Co-locate styles: `[ComponentName].module.css` - Co-locate tests: `[ComponentName].test.tsx`
# ❌ 浪费：Agent 自己就知道怎么用 fetch When making HTTP requests, you can use the fetch API. The fetch function takes a URL and an options object containing method, headers, and body... # ✅ 有价值：这是你们团队的私有约定 All API calls MUST use the project's request wrapper: ts import { request } from '@/api/request' // GET const users = await request.get
('/api/users') // POST await request.post('/api/users', { name: 'Winty' }) Do NOT use raw fetch or axios directly.
# React Component Skill Core Rules 1. Named exports only 2. CSS Modules for styling 3. Co-locate tests Need More Detail? - Naming conventions → see naming.md - State management patterns → see state.md - Accessibility checklist → see a11y.md
Design Thinking Before coding, understand the context and commit to a BOLD aesthetic direction: -Purpose: What problem does this interface solve? Who uses it? -Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, luxury/refined, playful/toy-like… -Constraints: Technical requirements (framework, performance, accessibility) -Differentiation: What makes this UNFORGETTABLE?
这个案例好在哪里？
「description 写得精准」：既描述了能力（create frontend interfaces），又明确了触发时机（when the user asks to build web components, pages…）
Decision Tree: Choosing Your Approach User task → Is it static HTML? ├─ Yes → Read HTML file directly to identify selectors │ └─ Write Playwright script using selectors │ └─ No (dynamic webapp) → Is the server already running? ├─ No → Run: python scripts/with_server.py –help └─ Yes → Reconnaissance-then-action: 1. Navigate and wait for networkidle 2. Take screenshot or inspect DOM 3. Identify selectors from rendered state 4. Execute actions with discovered selectors
这个写法的亮点在于：
「决策树清晰」：Agent 能快速判断走哪条路径
「脚本当黑盒用」：不需要把脚本内容加载到上下文，用 –help 了解用法后直接调用
「有明确的反模式提示」：用 ❌ 和 ✅ 标记常见陷阱
案例三：GitHub Copilot docs-agent —— 角色定位模式
来自 GitHub 官方博客对 2500+ 个 agents.md 的**实践总结：
— name: docs_agent description: Expert technical writer for this project — You are an expert technical writer for this project. Your role - You are fluent in Markdown and can read TypeScript code - You write for a developer audience - Your task: read code from src/ and generate documentation in docs/ Commands you can use Build docs: npm run docs:build Lint markdown: npx markdownlint docs/ Boundaries - ✅ Always do: Write new files to docs/, follow style examples - ⚠️ Ask first: Before modifying existing documents in a major way - 🚫 Never do: Modify code in src/, edit config files, commit secrets
— name: react-component description: Scaffold React components with TypeScript following team conventions. Use when the user asks to create, generate, or scaffold a React component, or mentions creating a new UI element. — # React Component Generator File Structure For a component named UserCard: src/components/UserCard/ ├── index.tsx # Component implementation ├── UserCard.module.css # Scoped styles ├── UserCard.test.tsx # Unit tests └── types.ts # Type definitions (if complex) Implementation Template tsx import styles from './UserCard.module.css' interface UserCardProps { name: string avatar?: string onClick?: () => void } export function UserCard({ name, avatar, onClick }: UserCardProps) { return (
{avatar &&
} {name} ) } Rules 1. Named exports only, no default exports 2. Props interface in same file (unless 10+ props → extract to types.ts) 3. Use CSS Modules for styling, BEM-like class naming 4. Hooks extract to useXxx.ts when logic exceeds 15 lines 5. Every component must have at least one test covering render + key interaction Test Template tsx import { render, screen } from '@testing-library/react' import { UserCard } from '.' describe('UserCard', () => ) }) Boundaries - ✅ Create files in src/components/ - ⚠️ Ask before modifying existing shared components - 🚫 Never modify src/utils/ or config files Detailed Conventions For complete coding standards, see conventions.md
AI Agent 已经很聪明了，不需要解释”什么是 React”“什么是 TypeScript”。只写它不知道的信息：你们团队的规范、项目的特殊约定、偏好的技术方案。
3. 给太多选择
# ❌ Agent 会困惑到底该用哪个 You can use styled-components, or CSS Modules, or Tailwind, or Emotion… # ✅ 给一个默认方案，必要时提供备选 Use CSS Modules for component styling. For utility-based layouts, use Tailwind CSS classes instead.
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/257667.html