/js-early-exit
Use early returns to avoid unnecessary computation in loops and functions. Apply when processing arrays, validating input, or checking multiple conditions where the result can be determined before all iterations complete.
$ npx -y skills add theorcdev/8bitcn-ui --skill js-early-exit --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/js-early-exit
Context preview
The summary Claude sees to decide when to auto-load this skill.
Use early returns to avoid unnecessary computation in loops and functions. Apply when processing arrays, validating input, or checking multiple conditions where the result can be determined before all iterations complete.
SKILL.md
js-early-exit.SKILL.mdname: js-early-exit description: Use early returns to avoid unnecessary computation in loops and functions. Apply when processing arrays, validating input, or checking multiple conditions where the result can be determined before all iterations complete.
Early Return from Functions
Return early when result is determined to skip unnecessary processing. This optimization is especially valuable when the skipped branch is frequently taken or when the deferred operation is expensive.
**Incorrect (processes all items even after finding answer):**
function validateUsers(users: User[]) {
let hasError = false
let errorMessage = ''
for (const user of users) {
if (!user.email) {
hasError = true
errorMessage = 'Email required'
}
if (!user.name) {
hasError = true
errorMessage = 'Name required'
}
// Continues checking all users even after error found
}
return hasError ? { valid: false, error: errorMessage } : { valid: true }
}**Correct (returns immediately on first error):**
function validateUsers(users: User[]) {
for (const user of users) {
if (!user.email) {
return { valid: false, error: 'Email required' }
}
if (!user.name) {
return { valid: false, error: 'Name required' }
}
}
return { valid: true }
}Accessible retro components that you can copy and paste into your apps.Free. Open Source. Built on shadcn/ui. Documentation · Components · Blocks · Themes · Discord
Repo: theorcdev/8bitcn-ui
Other skills on 8bitcn-ui.
- /8-bit-pixel-art-patterns
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
Open skill - /8bit-docs-patterns
Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements.
Open skill - /animation-performance-retro
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
Open skill - /bundle-barrel-imports
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
Open skill - /bundle-dynamic-imports
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
Open skill - /component-wrapper-architecture
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
Open skill

