Skip to main content Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/affaan-m/ECC --skill coding-standardsO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... GitHub repository operations, automation, and management. Issue triage, PR management, CI/CD operations, release management, and security monitoring using the gh CLI. Use when the user wants to manage GitHub issues, PRs, CI status, releases, contributors, stale items, or any GitHub operational task beyond simple git commands.
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
name coding-standards description Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
程式碼標準與最佳實務
適用於所有專案的通用程式碼標準。
程式碼品質原則
1. 可讀性優先
程式碼被閱讀的次數遠多於被撰寫的次數
使用清晰的變數和函式名稱
優先使用自文件化的程式碼而非註解
保持一致的格式化
2. KISS（保持簡單）
使用最簡單的解決方案
避免過度工程
不做過早優化
易於理解 > 聰明的程式碼
3. DRY（不重複自己）
將共用邏輯提取為函式
建立可重用的元件
在模組間共享工具函式
避免複製貼上程式設計
4. YAGNI（你不會需要它）
在需要之前不要建置功能
避免推測性的通用化
只在需要時增加複雜度
從簡單開始，需要時再重構
TypeScript/JavaScript 標準
變數命名
const marketSearchQuery = 'election'
const isUserAuthenticated = true
const totalRevenue = 1000
const q = 'election'
const flag = true
const x = 1000
函式命名
async function fetchMarketData (marketId
string
function
calculateSimilarity
a : number [], b : number []
function
isValidEmail
email : string
boolean
async
function
market
id : string
function
similarity
a, b
function
email
e
不可變性模式（關鍵）
const updatedUser = {
...user,
name : 'New Name'
}
const updatedArray = [...items, newItem]
user.name = 'New Name'
items.push (newItem)
錯誤處理
async function fetchData (url : string try {
const response = await fetch (url)
if (!response.ok ) {
throw new Error (`HTTP ${response.status} : ${response.statusText} ` )
}
return await response.json ()
} catch (error) {
console .error ('Fetch failed:' , error)
throw new Error ('Failed to fetch data' )
}
}
async function fetchData (url ) {
const response = await fetch (url)
return response.json ()
}
Async/Await 最佳實務
const [users, markets, stats] = await Promise .all ([
fetchUsers (),
fetchMarkets (),
fetchStats ()
])
const users = await fetchUsers ()
const markets = await fetchMarkets ()
const stats = await fetchStats ()
型別安全
interface Market {
id : string
name : string
status : 'active' | 'resolved' | 'closed'
created_at : Date
}
function getMarket (id : string Promise <Market > {
}
function getMarket (id : any Promise <any > {
}
React 最佳實務
元件結構
interface ButtonProps {
children : React .ReactNode
onClick : () => void
disabled ?: boolean
variant ?: 'primary' | 'secondary'
}
export function Button ({
children,
onClick,
disabled = false ,
variant = 'primary'
}: ButtonProps ) {
return (
<button
onClick ={onClick}
disabled ={disabled}
className ={ `btn btn- ${variant }`}
>
{children}
</button > export function Button (props ) {
return <button onClick ={props.onClick} > {props.children}</button >
自訂 Hooks
export function useDebounce<T>(value : T, delay : number ): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value)
useEffect (() => {
const handler = setTimeout (() => {
setDebouncedValue (value)
}, delay)
return () => clearTimeout (handler)
}, [value, delay])
return debouncedValue
}
const debouncedQuery = useDebounce (searchQuery, 500 )
狀態管理
const [count, setCount] = useState (0 )
setCount (prev =>1 )
setCount (count + 1 )
條件渲染
{isLoading && <Spinner /> <ErrorMessage error ={error} /> <DataDisplay data ={data} /> <Spinner /> <ErrorMessage error ={error} /> <DataDisplay data ={data} /> null }
API 設計標準
REST API 慣例 GET /api/markets # 列出所有市場
GET /api/markets/:id # 取得特定市場
POST /api/markets # 建立新市場
PUT /api/markets/:id # 更新市場（完整）
PATCH /api/markets/:id # 更新市場（部分）
DELETE /api/markets/:id # 刪除市場
# 過濾用查詢參數
GET /api/markets?status=active&limit=10&offset=0
回應格式
interface ApiResponse <T> {
success : boolean
data ?: T
error ?: string
meta ?: {
total : number
page : number
limit : number
}
}
return NextResponse .json ({
success : true ,
data : markets,
meta : { total : 100 , page : 1 , limit : 10 }
})
return NextResponse .json ({
success : false ,
error : 'Invalid request'
}, { status : 400 })
輸入驗證 import { z } from 'zod'
const CreateMarketSchema = z.object ({
name : z.string ().min (1 ).max (200 ),
description : z.string ().min (1 ).max (2000 ),
endDate : z.string ().datetime (),
categories : z.array (z.string ()).min (1 )
})
export async function POST (request : Request const body = await request.json ()
try {
const validated = CreateMarketSchema .parse (body)
} catch (error) {
if (error instanceof z.ZodError ) {
return NextResponse .json ({
success : false ,
error : 'Validation failed' ,
details : error.errors
}, { status : 400 })
}
}
}
檔案組織
專案結構 src/
├── app/ # Next.js App Router
│ ├── api/ # API 路由
│ ├── markets/ # 市場頁面
│ └── (auth)/ # 認證頁面（路由群組）
├── components/ # React 元件
│ ├── ui/ # 通用 UI 元件
│ ├── forms/ # 表單元件
│ └── layouts/ # 版面配置元件
├── hooks/ # 自訂 React hooks
├── lib/ # 工具和設定
│ ├── api/ # API 客戶端
│ ├── utils/ # 輔助函式
│ └── constants/ # 常數
├── types/ # TypeScript 型別
└── styles/ # 全域樣式
檔案命名 components/Button.tsx # 元件用 PascalCase
hooks/useAuth.ts # hooks 用 camelCase 加 'use' 前綴
lib/formatDate.ts # 工具用 camelCase
types/market.types.ts # 型別用 camelCase 加 .types 後綴
註解與文件
何時註解
const delay = Math .min (1000 * Math .pow (2 , retryCount), 30000 )
items.push (newItem)
count++
name = user.name
公開 API 的 JSDoc
export async function searchMarkets (
query : string ,
limit : number = 10
): Promise <Market []> {
}
效能最佳實務
記憶化 import { useMemo, useCallback } from 'react'
const sortedMarkets = useMemo (() => {
return markets.sort ((a, b ) => b.volume - a.volume )
}, [markets])
const handleSearch = useCallback ((query : string {
setSearchQuery (query)
}, [])
延遲載入 import { lazy, Suspense } from 'react'
const HeavyChart = lazy (() => import ('./HeavyChart' ))
export function Dashboard (return (
<Suspense fallback ={ <Spinner /> }>
<HeavyChart />
</Suspense >
資料庫查詢
const { data } = await supabase
.from ('markets' )
.select ('id, name, status' )
.limit (10 )
const { data } = await supabase
.from ('markets' )
.select ('*' )
測試標準
測試結構（AAA 模式） test ('calculates similarity correctly' , () => {
const vector1 = [1 , 0 , 0 ]
const vector2 = [0 , 1 , 0 ]
const similarity = calculateCosineSimilarity (vector1, vector2)
expect (similarity).toBe (0 )
})
測試命名
test ('returns empty array when no markets match query' , () => { })
test ('throws error when OpenAI API key is missing' , () => { })
test ('falls back to substring search when Redis unavailable' , () => { })
test ('works' , () => { })
test ('test search' , () => { })
程式碼異味偵測
1. 過長函式
function processMarketData (function processMarketData (const validated = validateData ()
const transformed = transformData (validated)
return saveData (transformed)
}
2. 過深巢狀
if (user) {
if (user.isAdmin ) {
if (market) {
if (market.isActive ) {
if (hasPermission) {
}
}
}
}
}
if (!user) return
if (!user.isAdmin ) return
if (!market) return
if (!market.isActive ) return
if (!hasPermission) return
3. 魔術數字
if (retryCount > 3 ) { }
setTimeout (callback, 500 )
const MAX_RETRIES = 3
const DEBOUNCE_DELAY_MS = 500
if (retryCount > MAX_RETRIES ) { }
setTimeout (callback, DEBOUNCE_DELAY_MS )
記住 ：程式碼品質是不可協商的。清晰、可維護的程式碼能實現快速開發和自信的重構。
