skills/coding-standards/SKILL.md
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
npx skillsauth add nhouseholder/nicks-claude-code-superpowers coding-standardsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
// Descriptive names (avoid: q, flag, x, temp)
const marketSearchQuery = 'election'
const isUserAuthenticated = true
const totalRevenue = 1000
// Verb-noun pattern (avoid: noun-only like market(), email())
async function fetchMarketData(marketId: string) { }
function calculateSimilarity(a: number[], b: number[]) { }
function isValidEmail(email: string): boolean { }
// Always use spread operator (avoid: direct mutation like obj.x = y, arr.push())
const updatedUser = { ...user, name: 'New Name' }
const updatedArray = [...items, newItem]
// Wrap async calls with try/catch, check response status (avoid: bare unhandled awaits)
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')
}
}
// Parallelize independent calls (avoid: sequential awaits for unrelated fetches)
const [users, markets, stats] = await Promise.all([
fetchUsers(), fetchMarkets(), fetchStats()
])
// Use specific types and union literals (avoid: 'any')
interface Market {
id: string
name: string
status: 'active' | 'resolved' | 'closed'
created_at: Date
}
// Typed props with defaults, destructured params (avoid: untyped props objects)
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>
)
}
// Use functional updates for state derived from previous state (avoid: stale closure refs)
const [count, setCount] = useState(0)
setCount(prev => prev + 1) // NOT: setCount(count + 1)
GET /api/resources — List (supports ?status=active&limit=10&offset=0)GET /api/resources/:id — Get onePOST /api/resources — CreatePUT /api/resources/:id — Full updatePATCH /api/resources/:id — Partial updateDELETE /api/resources/:id — Deleteinterface ApiResponse<T> {
success: boolean
data?: T
error?: string
meta?: { total: number; page: number; limit: number }
}
def process(data: list[dict]) -> bool:except:logging module over print() for production codeif __name__ == "__main__": or CLI frameworks (click, argparse)tools
Unified context management and session continuity skill. Combines total-recall, strategic-compact, /ledger, and session continuity. Runs in background to preserve critical context across compaction and sessions.
tools
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
tools
Suggest /ultraplan for complex planning tasks on Claude Code CLI (2.1.91+ only). Research preview.
tools
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.