rockpack

Name: rockpack
Author: AlexSergey

Issues

Zero-config React with built-in SSR, automated quality gates, and AI-ready project structure - ship clean code whether you write it yourself or with an AI assistant.

1,261stars

21forks

TypeScript

Installation

# Add to your Claude Code skills
git clone https://github.com/AlexSergey/rockpack

Getting Started

Guides for using ai agents skills like rockpack.

Caveman: Cut Claude Token Use by 65%
How agent-side prompt compression works, when to use it, and when not to.
What is an AI Skills Marketplace?
Definitions, how marketplaces work, and how to choose between them in 2026.
Getting Started with AI Skills

Security ReportIssues

Last scanned: 5/21/2026

{
  "issues": [
    {
      "type": "npm-audit",
      "message": "@babel/plugin-transform-modules-systemjs: @babel/plugin-transform-modules-systemjs generates arbitrary code when compiling malicious input",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "@unhead/react: Vulnerability found",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "axios: Axios has a NO_PROXY Hostname Normalization Bypass that Leads to SSRF",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "basic-ftp: basic-ftp: Incomplete CRLF Injection Protection Allows Arbitrary FTP Command Execution via Credentials and MKD Commands",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "brace-expansion: brace-expansion: Zero-step sequence causes process hang and memory exhaustion",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "fast-uri: fast-uri vulnerable to path traversal via percent-encoded dot segments",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "flatted: flatted vulnerable to unbounded recursion DoS in parse() revive phase",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "follow-redirects: follow-redirects leaks Custom Authentication Headers to Cross-Domain Redirect Targets",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "handlebars: Handlebars.js has JavaScript Injection via AST Type Confusion by tampering @partial-block",
      "severity": "critical"
    },
    {
      "type": "npm-audit",
      "message": "ip-address: ip-address has XSS in Address6 HTML-emitting methods",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "lodash: lodash vulnerable to Code Injection via `_.template` imports key names",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "path-to-regexp: path-to-regexp vulnerable to Regular Expression Denial of Service via multiple route parameters",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "picomatch: Picomatch: Method Injection in POSIX Character Classes causes incorrect Glob Matching",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "postcss: PostCSS has XSS via Unescaped </style> in its CSS Stringify Output",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "serialize-javascript: Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like objects",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "unhead: Unhead has a hasDangerousProtocol() bypass via leading-zero padded HTML entities in useHeadSafe()",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "uuid: uuid: Missing buffer bounds check in v3/v5/v6 when buf is provided",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "webpack-dev-server: webpack-dev-server vulnerable to cross-origin source code exposure on non-HTTPS origins",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "ws: ws: Uninitialized memory disclosure",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "yaml: yaml is vulnerable to Stack Overflow via deeply nested YAML collections",
      "severity": "medium"
    }
  ],
  "status": "FAILED",
  "scannedAt": "2026-05-21T07:52:30.876Z",
  "semgrepRan": false,
  "npmAuditRan": true,
  "pipAuditRan": true
}

README.md

Frequently Asked Questions

What is rockpack?

rockpack is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by AlexSergey. Zero-config React with built-in SSR, automated quality gates, and AI-ready project structure - ship clean code whether you write it yourself or with an AI assistant. It has 1,261 GitHub stars.

Is rockpack safe to use?

rockpack failed SkillsLLM's automated security scan, which flagged one or more high-severity issues. Review the Security Report section carefully before using it.

How do I install rockpack?

Clone the repository with "git clone https://github.com/AlexSergey/rockpack" and add it to your Claude Code skills directory (see the Installation section above).

What programming language is rockpack written in?

rockpack is primarily written in TypeScript. It is open-source under AlexSergey on GitHub, so you can review or fork the full source.

Are there alternatives to rockpack?

Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh rockpack against similar tools.

Agentic AI for Beginners

Build your first AI agent from scratch - tool use, ReAct pattern, memory, deployment

41 minBeginner

Comments (0)

to leave a comment.

No comments yet. Be the first to share your thoughts!

Related Skills

superpowers

by obra

An agentic skills framework & software development methodology that works.

234,966

agents helmor

Rockpack is a zero-configuration toolkit for building React applications - with full support for Server-Side Rendering (SSR), bundling, linting, and testing. In minutes, you can have a modern React app with production-ready quality gates, preconfigured tooling, and built-in support for AI-assisted development.

Key Features

Zero-config setup: Scaffold a complete React app with a single command.
SSR out of the box: Universal rendering with hydration and a Node.js server, no manual configuration needed.
Production-ready quality gates: Enforced ESLint, Prettier, TypeScript, and Jest conventions from day one.
Test coverage included: Every project template ships with a configured Jest setup, so AI-generated code is validated immediately - before it ever reaches code review.
AI-first development: Preconfigured CLAUDE.md with strict quality rules and cost-saving conventions makes working with AI tools like Claude Code fast, reliable, and economical.
Extensible: Customize Webpack, ESLint, or Jest without ejecting.

AI-Assisted Development

Rockpack is designed to make AI-assisted development safe, fast, and cost-efficient.

Beyond tooling, Rockpack establishes a baseline architecture - consistent project structure, naming conventions, and module boundaries - that AI models can reason about reliably. A well-structured codebase is not just easier for humans to navigate; it dramatically improves the quality of AI-generated code because the model has clear patterns to follow and fewer ambiguous decisions to make.

The combination of a defined architecture, test coverage, strict quality gates, and a well-tuned CLAUDE.md means AI tools like Claude Code can contribute to your codebase without introducing regressions or inconsistencies. Because every Rockpack project starts with linting and tests already configured, AI-generated code is reviewed automatically on every change.

The CLAUDE.md configuration is optimized for:

Minimal context usage - rules guide the AI to read only what is relevant, reducing token consumption
Cost-efficient workflows - targeted test runs instead of full-suite scans for isolated changes
Architecture consistency - the AI preserves existing patterns instead of introducing unnecessary abstractions
Safe incremental changes - small, predictable diffs that are easy to review
Quality enforcement - ESLint, TypeScript strict mode, and Jest act as automated reviewers on every AI-generated change

Requirements

Node.js 23 or higher

Getting Started

Rockpack is a good fit for:

Developers new to React - bootstrap a project of any complexity in minutes, with Webpack, ESLint, and Jest already configured.
Large projects from scratch - best-practice Webpack, ESLint, TypeScript, and Jest configuration that scales well.
Startups and prototypes - skip the setup and validate ideas quickly.
Libraries and React components - UMD, ESM, and CJS builds with TypeScript declarations, no configuration required.
Existing projects - Rockpack is modular; use only the packages you need.

Fast setup →

Also, take a look at iSSR - a small module for adding SSR to an existing React app:

Motivation

Every new React project raises the same questions:

How do I set up an efficient build system with TypeScript support?
Which ESLint rules should I use?
How do I configure Jest to work with Babel or TypeScript?
How do I set up SSR with Redux, Apollo, or other solutions?
How do I configure Webpack for server-side rendering and get a production-ready artifact with a working dev server?

Setting this up from scratch takes weeks. Rockpack solves it in minutes.

With Rockpack, you go from zero to a fully configured, running project in minutes and focus on writing the code that matters.

Modules overview

Rockpack is modular. Each package can be used independently or together.

@rockpack/starter

A CLI scaffolding tool for React applications. Follows a feature-based project structure (see this article).

Supported application types:

React SPA - Client-side React app with Webpack, TypeScript, ESLint, and Jest preconfigured.
React SPA + SSR - Universal React app with SSR, hydration, and a Node.js server.
React Component - NPM-ready React component with TypeScript declarations and an optimized bundle.
UMD Library - Framework-agnostic UMD library for NPM, zero configuration required.

All project types include:

Import support for many file formats. Full list
Image and SVG optimization; SVG files importable as React components
CSS/SCSS/Less modules with TypeScript support
PostCSS: Tailwind, autoprefixer, postcss-custom-media, postcss-media-minmax
SEO and React optimizations
Dotenv and Dotenv safe support
Bundle Analyzer, Statoscope
GraphQL support

Optional add-ons for each project type:

@rockpack/codestyle - ESLint with best-practice rules
@rockpack/tester - pre-configured Jest setup

More details...

@rockpack/compiler

A Webpack-based bundler with best-practice loaders and plugins preconfigured.

@rockpack/compiler supports:

React applications (TypeScript or Babel)
React components and VanillaJS UMD libraries
Node.js backend applications
Isomorphic (SSR) applications
Bundle analysis with webpack-bundle-analyzer and Statoscope

More details...

@rockpack/tester

Pre-configured Jest with TypeScript and Babel support, HTML reporting, and best-practice defaults for React projects.

More details...

@rockpack/codestyle

Opinionated ESLint configuration with Prettier, Stylelint, and Commitlint - ready to use out of the box.

More details...

For more information, follow the links to each module.

Rockpack is a free and open-source project. Contributions are always welcome.

Alternatives

The Rockpack project was inspired by:

Why Rockpack?

One command to start - @rockpack/starter scaffolds a complete app with TypeScript, Jest, ESLint, and SSR support.
Flexible architecture - no opinions on state management or libraries; design the app the way you want.
No magic - Rockpack is a curated set of best practices and libraries, not a black box.
Modular - use only the packages you need, even in a legacy project.
No eject - extend the Webpack config directly without losing the ability to update Rockpack.
No reinventing the wheel - built on top of existing, well-maintained tools.

The MIT License

LICENSE