Skip to main content
coding-standards Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js. Includes quick checklist (formerly coding-style) and common patterns (Repository, skeleton projects; formerly common-patterns).
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/ihj04982/my-cursor-settings --skill coding-standardsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المزيد من هذا المستودع Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
Automate browser interactions, test web pages and work with Playwright tests.
Advanced guidelines and best practices for writing tests using Vitest. Apply this skill when generating, reviewing, or refactoring test codes to prevent common pitfalls and ensure high performance.
استنادا إلى تصنيف SOC المهني
name coding-standards description Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js. Includes quick checklist (formerly coding-style) and common patterns (Repository, skeleton projects; formerly common-patterns).
Coding Standards & Best Practices
Universal coding standards applicable across all projects.
Code Quality Principles
1. Readability First
Code is read more than written
Clear variable and function names
Self-documenting code preferred over comments
Consistent formatting
2. KISS (Keep It Simple, Stupid)
Simplest solution that works
Avoid over-engineering
No premature optimization
Easy to understand > clever code
3. DRY (Don't Repeat Yourself)
Extract common logic into functions
Create reusable components
Share utilities across modules
Avoid copy-paste programming
4. YAGNI (You Aren't Gonna Need It)
Don't build features before they're needed
Avoid speculative generality
Add complexity only when required
Start simple, refactor when needed
TypeScript/JavaScript Standards
Variable Naming
const marketSearchQuery = 'election'
const isUserAuthenticated = true
const totalRevenue = 1000
const q = 'election'
const
true
const
1000
Function Naming
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 ) { }
Immutability Pattern (CRITICAL)
const updatedUser = {
...user,
name : 'New Name'
}
const updatedArray = [...items, newItem]
user.name = 'New Name'
items.push (newItem)
Error Handling
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 Best Practices
const [users, markets, stats] = await Promise .all ([
fetchUsers (),
fetchMarkets (),
fetchStats ()
])
const users = await fetchUsers ()
const markets = await fetchMarkets ()
const stats = await fetchStats ()
Type Safety
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 Best Practices
Component Structure
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 >
Custom 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 )
State Management
const [count, setCount] = useState (0 )
setCount (prev =>1 )
setCount (count + 1 )
Conditional Rendering
{isLoading && <Spinner /> <ErrorMessage error ={error} /> <DataDisplay data ={data} /> <Spinner /> <ErrorMessage error ={error} /> <DataDisplay data ={data} /> null }
API Design Standards
REST API Conventions GET /api/markets # List all markets
GET /api/markets/:id # Get specific market
POST /api/markets # Create new market
PUT /api/markets/:id # Update market (full)
PATCH /api/markets/:id # Update market (partial)
DELETE /api/markets/:id # Delete market
# Query parameters for filtering
GET /api/markets?status=active&limit=10&offset=0
Response Format
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 })
Input Validation 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 })
}
}
}
File Organization
Project Structure src/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ ├── markets/ # Market pages
│ └── (auth)/ # Auth pages (route groups)
├── components/ # React components
│ ├── ui/ # Generic UI components
│ ├── forms/ # Form components
│ └── layouts/ # Layout components
├── hooks/ # Custom React hooks
├── lib/ # Utilities and configs
│ ├── api/ # API clients
│ ├── utils/ # Helper functions
│ └── constants/ # Constants
├── types/ # TypeScript types
└── styles/ # Global styles
File Naming components/Button.tsx # PascalCase for components
hooks/useAuth.ts # camelCase with 'use' prefix
lib/formatDate.ts # camelCase for utilities
types/market.types.ts # camelCase with .types suffix
Comments & Documentation
When to Comment
const delay = Math .min (1000 * Math .pow (2 , retryCount), 30000 )
items.push (newItem)
count++
name = user.name
JSDoc for Public APIs
export async function searchMarkets (
query : string ,
limit : number = 10
): Promise <Market []> {
}
Performance Best Practices
Memoization 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)
}, [])
Lazy Loading import { lazy, Suspense } from 'react'
const HeavyChart = lazy (() => import ('./HeavyChart' ))
export function Dashboard (return (
<Suspense fallback ={ <Spinner /> }>
<HeavyChart />
</Suspense >
Database Queries
const { data } = await supabase
.from ('markets' )
.select ('id, name, status' )
.limit (10 )
const { data } = await supabase
.from ('markets' )
.select ('*' )
Testing Standards
Test Structure (AAA Pattern) test ('calculates similarity correctly' , () => {
const vector1 = [1 , 0 , 0 ]
const vector2 = [0 , 1 , 0 ]
const similarity = calculateCosineSimilarity (vector1, vector2)
expect (similarity).toBe (0 )
})
Test Naming
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' , () => { })
Code Smell Detection Watch for these anti-patterns:
1. Long Functions
function processMarketData (function processMarketData (const validated = validateData ()
const transformed = transformData (validated)
return saveData (transformed)
}
2. Deep Nesting
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. Magic Numbers
if (retryCount > 3 ) { }
setTimeout (callback, 500 )
const MAX_RETRIES = 3
const DEBOUNCE_DELAY_MS = 500
if (retryCount > MAX_RETRIES ) { }
setTimeout (callback, DEBOUNCE_DELAY_MS )
Quick Checklist (Before Marking Work Complete)
Common Patterns
Repository Pattern interface Repository <T> {
findAll (filters ?: Filters ): Promise <T[]>
findById (id : string ): Promise <T | null >
create (data : CreateDto ): Promise <T>
update (id : string , data : UpdateDto ): Promise <T>
delete (id : string ): Promise <void >
}
Skeleton Projects When implementing new functionality:
Search for battle-tested skeleton projects
Use parallel agents to evaluate options: security assessment, extensibility analysis, relevance scoring, implementation planning
Clone best match as foundation
Iterate within proven structure
Remember : Code quality is not negotiable. Clear, maintainable code enables rapid development and confident refactoring.
