CodeBricks

Engineering-grade frontend skills for Claude Code.

CodeBricks is an opinionated collection of Claude Code slash commands for senior-level frontend and mobile engineering. Each skill activates a principal-engineer persona — one that enforces architecture, performance, accessibility, and visual quality standards that production apps actually require.

Built on the Prompt Architecture Standard (PAS) and a shared design rule system, CodeBricks ensures consistent, high-quality output across React, Next.js, React Native, and Flutter — without repeating yourself in every prompt.

---

Why CodeBricks

Most AI-assisted frontend work produces the same outputs: Inter font, purple-to-blue gradient, card grid, spinner for loading, blank screen for empty state. It looks finished. It isn't.

CodeBricks enforces a different standard:

• Generic is worse than ugly. Every output must pass a brand test: could this UI belong to any other product? If yes, it's not done.
• All states ship together. Loading skeleton, error message with retry, empty state with CTA — not just the happy path.
• Performance is measured, not assumed. Core Web Vitals targets, FPS budgets, bundle audits — built into the success criteria.
• Security is not optional. Server Actions validated and authorized. Secrets protected. Rate limiting on mutations.

---

Skills

skills/
  frontend/
    shared-design-rules.md    ← Universal design laws. All platform skills inherit this.
    setup.md                  ← /codebricks:setup  — run the design questionnaire
    nextjs.md                 ← /codebricks:nextjs
    react.md                  ← /codebricks:react
    react-native.md           ← /codebricks:react-native
    flutter.md                ← /codebricks:flutter
    CODEBRICKS.template.md    ← Output template generated by setup

/codebricks:setup

Runs a structured 13-section design intake questionnaire and generates two files in your project:

• CODEBRICKS.md — the full design specification (tokens, typography, layout, components, motion, accessibility, performance budget)
• questionnaire.md — a lightweight quick-load summary that all platform skills read at the start of every session

Commit both files. They are the source of truth.

/codebricks:nextjs

Senior Next.js / full-stack engineer. App Router, React 19 RSC, Server Actions, PPR, caching strategy, Tailwind v4, shadcn/ui, Auth.js, Drizzle ORM, metadata API, Core Web Vitals.

/codebricks:react

Senior React engineer for standalone React apps (Vite, Remix). React 19, TanStack Query v5, Zustand, React Hook Form + Zod, Framer Motion, feature-slice architecture.

/codebricks:react-native

Senior React Native / Expo engineer. New Architecture (Fabric/JSI), Expo SDK 52+, Reanimated 3, FlashList, NativeWind v4, Expo Router, TanStack Query v5.

/codebricks:flutter

Senior Flutter / Dart engineer. Flutter 3.27+, Riverpod 2 with code generation, go_router typed routes, freezed models, Material 3 with ThemeExtensions, clean architecture.

---

Installation

1. Clone or download this repository

git clone https://github.com/preshndams/codebricks.git

2. Copy skills to your Claude Code commands folder

macOS / Linux:

mkdir -p ~/.claude/commands/codebricks
cp codebricks/skills/frontend/*.md ~/.claude/commands/codebricks/

Windows (PowerShell):

New-Item -ItemType Directory -Force "$env:USERPROFILE\.claude\commands\codebricks"
Copy-Item "codebricks\skills\frontend\*.md" "$env:USERPROFILE\.claude\commands\codebricks\"

3. Verify installation

Restart Claude Code or open a new session. The skills are available as:

/codebricks:setup
/codebricks:nextjs
/codebricks:react
/codebricks:react-native
/codebricks:flutter

---

Workflow

New project

1. Open your project in Claude Code
2. Run /codebricks:setup
3. Answer the questionnaire (typography, colors, layout, motion, icons, accessibility)
4. Two files are generated: CODEBRICKS.md and questionnaire.md
5. Add a screenshots/ folder with any UI references you have
6. Commit everything:
   git add CODEBRICKS.md questionnaire.md screenshots/
   git commit -m "chore: add CodeBricks design specification"
   git push

Ongoing development

/codebricks:nextjs  build the products page
/codebricks:react   review this component for performance issues
/codebricks:flutter implement the checkout screen

Every invocation reads CODEBRICKS.md and questionnaire.md first. Your design decisions are respected automatically — no re-explaining fonts, colors, or component style on every prompt.

---

The Shared Design Rule System

All platform skills inherit from shared-design-rules.md. Universal rules that apply everywhere:

Typography

• Distinctive typefaces required. Inter, Roboto, and SF Pro are banned as brand voices.
• Maximum 2 typefaces. Dramatic size contrast. Full weight range used.

Color

• No flat solid backgrounds. Gradient, texture, mesh, or tinted surface — always.
• One accent color by default. All values in tokens — never hardcoded hex in component code.
• Dark mode is never an afterthought. Both themes designed and tested.

Composition

• One focal point per viewport.
• Hero sections: brand + headline + sentence + CTA + image. No stat tiles over imagery.
• Cards only when the card is the interaction container.

Motion

• 2–3 intentional animations maximum. Entrance, scroll effect, hover/press.
• prefers-reduced-motion respected everywhere. Always.

Anti-patterns (always flagged and corrected)

Pattern	Why it fails
Inter / Roboto as the only typeface	No personality. Template output.
Purple-to-blue gradient on white	The AI-slop signature. Immediately generic.
Hero section with floating stat tiles	Clutters the focal point.
Card grid as first impression	No composition.
Multiple stacked carousels	Hidden content. Users don't scroll them.
Loading state = full-page spinner	Not designed. Use skeletons.
Error state = raw error string	Not designed. Write a message. Give a recovery action.
Empty state = blank white screen	Not designed.
Magic number spacing (padding: 13px)	Not a system. Use the token scale.

---

What Each Skill Enforces

Next.js

• Server Components by default. 'use client' only when required.
• Explicit rendering strategy per route (static / ISR / PPR / dynamic).
• Every Server Action: Zod validated + session checked + error logged server-side.
• next/image, next/font, next/link — no raw HTML equivalents.
• Metadata API complete on all public pages.
• Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1.

React

• TanStack Query v5 for all server state. Never useState + useEffect for data fetching.
• Feature-slice architecture. Zero prop drilling past 2 levels.
• Route-level code splitting minimum. Heavy libraries always dynamically imported.
• WCAG AA. Semantic HTML. Keyboard navigation on all interactive elements.
• Lists > 50 items virtualised with @tanstack/react-virtual.

React Native

• New Architecture (Fabric + JSI). No legacy bridge for new code.
• FlashList for any list > 20 items.
• Reanimated 3 on the UI thread. No legacy Animated API.
• 44×44pt touch targets. Haptics on primary actions. Safe area on every screen.
• MMKV for synchronous storage. No AsyncStorage on the render path.
• Accessibility props on every interactive element. VoiceOver/TalkBack tested.

Flutter

• const constructors on every eligible widget.
• ListView.builder / Slivers for all dynamic lists. No ListView(children: [...]).
• Every AsyncValue handles all three branches: data, loading, error.
• No hardcoded Color(0xFF...) in widget files — all from ThemeData or ThemeExtension.
• 48dp touch targets. Semantics on all custom interactive widgets.
• RepaintBoundary around independently animated widgets.

---

The CODEBRICKS.md Contract

CODEBRICKS.md is a committed, version-controlled design specification. It defines:

• Color tokens (CSS custom properties, light + dark)
• Typography scale and font choices
• Spacing and border radius systems
• Layout and navigation patterns
• Component visual style (cards, buttons, inputs)
• Icon library and usage rules
• Motion philosophy and animation event inventory
• Accessibility requirements and compliance
• Performance budget and device targets
• Design token architecture
• Code conventions

Once committed, this file is the source of truth. Platform skills read it before writing any code. If the file and a component conflict, the file wins — update both.

---

Technology Versions

Framework	Version
Next.js	15.x
React	19.x
React Native	0.76+
Expo SDK	52+
Flutter	3.27+
Dart	3.6+
TypeScript	5.x
Tailwind CSS	4.x
TanStack Query	5.x
Zustand	5.x
Riverpod	2.x
Reanimated	3.x
go_router	14.x
Framer Motion	12.x

---

Contributing

Skills are plain markdown. No build steps. No dependencies.

To add a new skill:

1. Create skills/frontend/<platform>.md (or skills/backend/<platform>.md)
2. Add YAML frontmatter with name and description
3. Follow the PAS structure: Role → Activation → Objective → Pre-Flight → Context → Instructions → Scope → Inputs → Success Criteria → Validation & Reporting
4. Reference shared-design-rules.md in your Pre-Flight section
5. Submit a pull request

All contributions fall under the MIT licence.

---

Licence

MIT — see LICENSE

---

Built for engineers who are never satisfied with "good enough."