A
affaan-m
@mayurrathi
⭐ 40.7k GitHub stars

Cc Skill Coding Standards

Cc Skill Coding Standards is an code AI skill with a core value of Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node. It helps developers solve real-world problems in the code domain, boosting efficiency, automating repetitive tasks, and optimizing workflows.

Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.

Last verified on: 2026-07-08

Quick Facts

Category code
Works With Claude
Source sickn33/antigravity-awesome-skills
Stars ⭐ 40.7k
Last Verified 2026-07-08
Risk Level Low
mkdir -p ./skills/cc-skill-coding-standards && curl -sfL https://raw.githubusercontent.com/sickn33/antigravity-awesome-skills/main/skills/cc-skill-coding-standards/SKILL.md -o ./skills/cc-skill-coding-standards/SKILL.md

Run in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).

Skill Content

# 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


typescript 
// ✅ GOOD: Descriptive names
const marketSearchQuery = 'election'
const isUserAuthenticated = true
const totalRevenue = 1000

// ❌ BAD: Unclear names
const q = 'election'
const flag = true
const x = 1000

Function Naming


typescript 
// ✅ GOOD: Verb-noun pattern
async function fetchMarketData(marketId: string) { }
function calculateSimilarity(a: number[], b: number[]) { }
function isValidEmail(email: string): boolean { }

// ❌ BAD: Unclear or noun-only
async function market(id: string) { }
function similarity(a, b) { }
function email(e) { }

Immutability Pattern (CRITICAL)


typescript 
// ✅ ALWAYS use spread operator
const updatedUser = {
  ...user,
  name: 'New Name'
}

const updatedArray = [...items, newItem]

// ❌ NEVER mutate directly
user.name = 'New Name'  // BAD
items.push(newItem)     // BAD

Error Handling


typescript 
// ✅ GOOD: Comprehensive 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')
  }
}

// ❌ BAD: No error handling
async function fetchData(url) {
  const response = await fetch(url)
  return response.json()
}

Async/Await Best Practices


typescript 
// ✅ GOOD: Parallel execution when possible
const [users, markets, stats] = await Promise.all([
  fetchUsers(),
  fetchMarkets(),
  fetchStats()
])

// ❌ BAD: Sequential when unnecessary
const users = await fetchUsers()
const markets = await fetchMarkets()
const stats = await fetchStats()

Type Safety


typescript 
// ✅ GOOD: Proper types
interface Market {
  id: string
  name: string
  status: 'active' | 'resolved' | 'closed'
  created_at: Date
}

function getMarket(id: string): Promise<Market> {
  // Implementation
}

// ❌ BAD: Using 'any'
function getMarket(id: any): Promise<any> {
  // Implementation
}

React Best Practices


Component Structure


typescript 
// ✅ GOOD: Functional component with types
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>
  )
}

// ❌ BAD: No types, unclear structure
export function Button(props) {
  return <button onClick={props.onClick}>{props.children}</button>
}

Custom Hooks


typescript 
// ✅ GOOD: Reusable custom hook
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
}

// Usage
const debouncedQuery = useDeboun

🎯 Best For

  • Claude users
  • Software engineers
  • Development teams
  • Tech leads

💡 Use Cases

  • TypeScript type safety checking
  • Module refactoring

📖 How to Use This Skill

  1. 1

    Install the Skill

    Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.

  2. 2

    Load into Your AI Assistant

    Open Claude and reference the skill. Paste the SKILL.md content or use the system prompt tab.

  3. 3

    Apply Cc Skill Coding Standards to Your Work

    Open your project in the AI assistant and ask it to apply the skill. Start with a small module to verify the output quality.

  4. 4

    Review and Refine

    Review AI suggestions before committing. Run tests, check for regressions, and iterate on the skill output.

❓ Frequently Asked Questions

Is Cc Skill Coding Standards compatible with Cursor and VS Code?

Yes — this skill works with any AI coding assistant including Cursor, VS Code with Copilot, and JetBrains IDEs.

Do I need specific dependencies for Cc Skill Coding Standards?

Check the install command and Works With section. Most code skills only require the AI assistant and your codebase.

How do I install Cc Skill Coding Standards?

Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/cc-skill-coding-standards/SKILL.md, ready to use.

Can I customize this skill for my team?

Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.

⚠️ Common Mistakes to Avoid

Skipping validation

Always test AI-generated code changes, even for simple refactors.

Missing dependency updates

Check if the skill requires updated dependencies or new packages.

🔗 Related Skills

react-flow-node-ts React Flow Node Tsbackend-dev-guidelines Backend Dev Guidelinesbullmq-specialist Bullmq Specialistbun-development Bun Developmentcc-skill-backend-patterns Cc Skill Backend Patternsconvex convex