New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Core Principles

by MadAppGang in MadAppGang/claude-code

A skill your agent uses when planning new projects, onboarding, or reviewing architectural decisions.

MITAuto-check passedTesting & QA

Install Core Principles

skills CLI
$ npx skills add MadAppGang/claude-code --skill core-principles -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install MadAppGang/claude-code core-principles --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/MadAppGang/claude-code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/frontend/skills/core-principles .claude/skills/core-principles && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
core-principles
GitHub stars
285
Token cost
~1.1k tokens
SKILL.md length
434 words
Files
1
Skills in repo
69
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when planning new projects, onboarding, or reviewing architectural decisions.

  • Works in 7 steps: API Spec: Fetch latest via Apidog MCP… → Data Access: Wire only through feature… → New Routes → …
  • Planning new projects
  • SKILL.md covers Stack Overview, Project Structure, Agent Execution Rules and "Done" Checklist per PR, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Core Principles is an agent skill from MadAppGang/claude-code. Use when planning new projects, onboarding, or reviewing architectural decisions. Core principles and project structure for React 19 SPA development. Covers stack overview, project organization, agent execution rules, and authoritative sources.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Testing & QA. It works with React, TanStack, Vite and Vitest. The repository describes itself as: claude code plugins marketplace. The licence is MIT.

When your agent uses it

  • Planning new projects
  • Reviewing architectural decisions

Example prompts

  • “/core-principles”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. API Spec: Fetch latest via Apidog MCP and regenerate /src/api types if changed
  2. Data Access: Wire only through feature hooks that wrap TanStack Query. Never fetch inside UI components.
  3. New Routes
  4. Server Mutations
  5. Compiler-Friendly
  6. Tests
  7. Before Committing

What it can do on your machine

Read from SKILL.md and the folder at commit 6097ad4. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Core Principles loads about 1.1k tokens when it runs. Until then it costs about 65 tokens; SKILL.md has 434 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~65
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from MadAppGang/claude-code at commit 6097ad4, republished under its MIT licence (© MadAppGang). 434 words, ~1,125 tokens.

Download SKILL.mdSave it as .claude/skills/core-principles/SKILL.md (or your agent's skills folder).
name
core-principles
description
Use when planning new projects, onboarding, or reviewing architectural decisions. Core principles and project structure for React 19 SPA development. Covers stack overview, project organization, agent execution rules, and authoritative sources.
updated
2026-01-20
keywords
react-19, spa, project-structure, architecture, vite, typescript, tanstack, biome

Core Principles for React 19 SPA Development

Production-ready best practices for building modern React applications with TypeScript, Vite, and TanStack ecosystem.

Stack Overview

  • React 19 with React Compiler (auto-memoization)
  • TypeScript (strict mode)
  • Vite (bundler)
  • Biome (formatting + linting)
  • TanStack Query (server state)
  • TanStack Router (file-based routing)
  • Vitest (testing with jsdom)
  • Apidog MCP (API spec source of truth)

Project Structure

/src
  /app/               # App shell, providers, global styles
  /routes/            # TanStack Router file-based routes
  /components/        # Reusable, pure UI components (no data-fetch)
  /features/          # Feature folders (UI + hooks local to a feature)
  /api/               # Generated API types & client (from OpenAPI)
  /lib/               # Utilities (zod schemas, date, formatting, etc.)
  /test/              # Test utilities

Key Principles:

  • One responsibility per file
  • UI components don't fetch server data
  • Put queries/mutations in feature hooks
  • Co-locate tests next to files

Agent Execution Rules

Always do this when you add or modify code:

  1. API Spec: Fetch latest via Apidog MCP and regenerate /src/api types if changed

  2. Data Access: Wire only through feature hooks that wrap TanStack Query. Never fetch inside UI components.

  3. New Routes:

    • Create file under /src/routes/** (file-based routing)
    • If needs data at navigation, add loader that prefetches with Query

  4. Server Mutations:

    • Use React 19 Actions OR TanStack Query useMutation (choose one per feature)
    • Use optimistic UI via useOptimistic (Actions) or Query's optimistic updates
    • Invalidate/selectively update cache on success

  5. Compiler-Friendly:

    • Keep code pure (pure components, minimal effects)
    • If compiler flags something, fix it or add "use no memo" temporarily

  6. Tests:

    • Add Vitest tests for new logic
    • Component tests use RTL
    • Stub network with msw

  7. Before Committing:

    • Run biome check --write
    • Ensure Vite build passes

"Done" Checklist per PR

  • Route file added/updated; loader prefetch (if needed) present
  • Query keys are stable (as const), staleTime/gcTime tuned
  • Component remains pure; no unnecessary effects; compiler ✨ visible
  • API calls typed from /src/api; inputs/outputs validated at boundaries
  • Tests cover new logic; Vitest jsdom setup passes
  • biome check --write clean; Vite build ok
Show full SKILL.md (161 more words)Show less

Authoritative Sources

  • React 19 & Compiler:

    • React v19 overview
    • React Compiler: overview + installation + verification
    • <form action> / Actions API; useOptimistic; use
    • CRA deprecation & guidance

  • Vite:

    • Getting started; env & modes; TypeScript targets

  • TypeScript:

    • moduleResolution: "bundler" (for bundlers like Vite)

  • Biome:

    • Formatter/Linter configuration & CLI usage

  • TanStack Query:

    • Caching & important defaults; v5 migration notes; devtools/persisting cache

  • TanStack Router:

    • Install with Vite plugin; file-based routing; search params; devtools

  • Vitest:

    • Getting started & config (jsdom)

  • Apidog + MCP:

    • Apidog docs (import/export, OpenAPI); MCP server usage

Final Notes

  • Favor compile-friendly React patterns
  • Let the compiler and Query/Router handle perf and data orchestration
  • Treat Apidog's OpenAPI (via MCP) as the single source of truth for network shapes
  • Keep this doc as your "contract"—don't add heavy frameworks or configs beyond what's here unless explicitly requested
  • tooling-setup - Vite, TypeScript, Biome configuration
  • react-patterns - React 19 specific patterns (compiler, actions, forms)
  • tanstack-router - Routing patterns
  • tanstack-query - Server state management with Query v5
  • router-query-integration - Integrating Router with Query
  • api-integration - Apidog + MCP patterns
  • performance-security - Performance, accessibility, security

© MadAppGang, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugins/frontend/skills/core-principles of MadAppGang/claude-code.

Open the folder on GitHubat commit 6097ad4

Compare with similar skills

Core Principles next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Core Principles compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Core Principles this skillMadAppGang/claude-code285—~1.1kAutomated safety check: PassMIT
Test Building Blocksbartstc/vite-ts-react-template122—~1.5kAutomated safety check: PassMIT
Vitestjezweb/claude-skills1.1k—~3kAutomated safety check: PassMIT
Cleanup Specialistahaodev/shadmin174—~1.3kAutomated safety check: PassMIT
Shadmin CLIahaodev/shadmin174—~1.1kAutomated safety check: NotesMIT
Reactericrisco/rsc-harness174—~3.2kAutomated safety check: PassMIT

Similar skills

  • Test Building Blocks

    bartstc/vite-ts-react-template

    Test building block catalog — typed patterns for Storybook play-function tests, Vitest hook tests, Vitest unit tests, MSW handlers, and test data fixtures.

    122 GitHub stars~1.5k tokensUpdated yesterday
    Testing & QAAuto-check passed

  • Vitest

    jezweb/claude-skills

    Set up Vitest testing in any project — detects type (Cloudflare Workers, React, Node, library), generates vitest.config.ts, test setup, utilities, and a sample test.

    1.1k GitHub stars~3k tokensUpdated 4 days ago
    Testing & QAAuto-check passed

  • Cleanup Specialist

    ahaodev/shadmin

    Safe cleanup of Shadmin's Go backend, React frontend, Go CLI, and docs — remove dead code, consolidate duplication, and improve maintainability without changing behavior or adding features.

    174 GitHub stars~1.3k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Shadmin CLI

    ahaodev/shadmin

    A skill your agent uses when the user asks to query Shadmin admin platform resources (users, roles, menus, registered API resources) from a terminal — for example "list shadmin users", "show shadmin…

    174 GitHub stars~1.1k tokensUpdated yesterday
    Backend & APIsAuto-check: notes

  • React

    ericrisco/rsc-harness

    A skill your agent uses when building or reviewing a client-side React SPA bundled by Vite (React 19.2): components, where state lives, hooks, server data fetching, client routing, re-render and…

    174 GitHub stars~3.2k tokensUpdated yesterday
    MobileAuto-check passed

  • Tanstack Router

    secondsky/claude-skills

    TanStack Router type-safe file-based routing for React. An agent skill from secondsky/claude-skills.

    227 GitHub stars~1.9k tokensUpdated 11 days ago
    DevelopmentAuto-check: notes

More from MadAppGang/claude-code

All 69 skills in this repo

  • Content Brief

    MadAppGang/claude-code

    Content brief template and creation methodology for SEO-optimized content.

    285 GitHub starsUsed in 1 repo~959 tokens
    Auto-check passed

  • Context Detection

    MadAppGang/claude-code

    A skill your agent uses when detecting project technology stack from files/configs/directory structure, auto-loading framework-specific skills, or analyzing multi-stack fullstack projects (e.g…

    285 GitHub stars~5.4k tokensUpdated 6 mo ago
    Auto-check passed

  • Content Optimizer

    MadAppGang/claude-code

    On-page SEO optimization techniques including keyword density, meta tags, heading structure, and readability.

    285 GitHub starsUsed in 1 repo~694 tokens
    Auto-check passed

  • Keyword Cluster Builder

    MadAppGang/claude-code

    Techniques for expanding seed keywords and clustering by topic and intent.

    285 GitHub starsUsed in 1 repo~674 tokens
    Auto-check passed

  • Serp Analysis

    MadAppGang/claude-code

    SERP analysis techniques for intent classification, feature identification, and competitive intelligence.

    285 GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

  • Agent Coordination Discipline

    MadAppGang/claude-code

    A skill your agent uses when deciding whether to launch an agent, selecting which agent to use, or coordinating multiple agents.

    285 GitHub stars~3.8k tokensUpdated 6 mo ago
    Auto-check passed

Works with

Categories

Questions about Core Principles

What does Core Principles do?

A skill your agent uses when planning new projects, onboarding, or reviewing architectural decisions. Core Principles is an agent skill from MadAppGang/claude-code. Use when planning new projects, onboarding, or reviewing architectural decisions.

When should I use Core Principles?

Core Principles fits situations like: planning new projects; reviewing architectural decisions.

How do I install Core Principles in Claude Code?

Run `npx skills add MadAppGang/claude-code --skill core-principles -a claude-code`. Or copy the skill folder (plugins/frontend/skills/core-principles in MadAppGang/claude-code) into .claude/skills/core-principles in your project. Claude Code loads it when a task matches its description.

How do I install Core Principles in Codex?

Run `npx skills add MadAppGang/claude-code --skill core-principles -a codex`. Or copy the skill folder (plugins/frontend/skills/core-principles in MadAppGang/claude-code) into .agents/skills/core-principles in your project. Codex loads it when a task matches its description.

Can I use Core Principles in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add MadAppGang/claude-code --skill core-principles -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/core-principles, .gemini/skills/core-principles, .github/skills/core-principles and .opencode/skills/core-principles in your project.

What does Core Principles need to run?

SKILL.md names no scripts, command-line tools or credentials: Core Principles is instructions for the agent only.

Does Core Principles access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Core Principles safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Core Principles use?

Core Principles is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Core Principles use?

About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Core Principles?

Skills that share tags, products or a category with Core Principles: Test Building Blocks (bartstc/vite-ts-react-template, 122 stars), Vitest (jezweb/claude-skills, 1.1k stars), Cleanup Specialist (ahaodev/shadmin, 174 stars) and Shadmin CLI (ahaodev/shadmin, 174 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Core Principles?

MadAppGang (a GitHub organization) maintains it in MadAppGang/claude-code, which has 285 GitHub stars. The repository holds 69 skills in this directory. The repository was last updated on March 15, 2026.

Source: MadAppGang/claude-code on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.