React component library and design system with strict BEM methodology, social media studio editors, and comprehensive audit tooling. Built with React 19, TypeScript, and modern component architecture.
📚 Portfolio: Prompt Stack 🔧 Developer Guide: LLM Navigation Guide 🚀 Production App: Content Engine - See this library's concepts in production
For the production-deployed content processing platform, see Content Engine.
Content Stack Components is a comprehensive React component library featuring:
- 36+ Primitive Components: Buttons, inputs, cards, modals, dropzones, and more
- Social Media Studio Editors: Pre-built editors for Twitter, Instagram, TikTok, LinkedIn, Substack, and newsletters
- Content Inbox System: Queue management with bulk operations, export, and metadata editing
- Design System Tooling: Automated CSS validation, BEM compliance checking, and component audits
- Component Playground: Interactive development environment for testing components
- Strict Architecture: Layer-based component organization (primitives → composed → features → pages)
- Primitives (36 components): Box, Button, Badge, Card, Input, Textarea, Modal, Dropdown, Spinner, etc.
- Composed Components: EditableField, PromptSelector, ProgressIndicator, EmptyState, LoadingState, ErrorState
- Feature Components: Content Inbox, Studio Editors, Storage, Search
Located at src/features/studio/components/:
- TwitterEditor (45KB) - Comprehensive Twitter/X post editor
- InstagramEditor (6.8KB) - Instagram post formatting
- SubstackEditor (6.7KB) - Newsletter content editor
- TikTokEditor (2.4KB) - Short-form video script editor
- LinkedInEditor (1.9KB) - Professional content editor
- ArticleEditor (1.9KB) - Long-form article editor
- NewsletterEditor (1.9KB) - Email newsletter composer
- BEM Naming: Strict Block-Element-Modifier methodology enforced by audit scripts
- Layer Isolation: Components can only import from lower layers
- CSS Auditing: Automated validation with
grammar-ops/scripts/audit/ - Component Documentation: Every component has LLM-optimized metadata headers
- Type Safety: Full TypeScript implementation
- Framework: React 19 with TypeScript
- Build Tool: Vite for fast hot module replacement
- Styling: CSS with strict BEM naming conventions
- Architecture: Component-driven with layer separation (primitives → composed → features → pages)
- Testing: Jest + React Testing Library
- Framework: Express.js (TypeScript)
- Purpose: Development API for testing components
# Clone the repository
git clone https://github.com/prompt-stack/content-stack.git
cd content-stack-components
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Run component playground
npm run dev # Navigate to /playgroundInteractive playground available at /playground when running npm run dev:
- ButtonPlayground - Test button variants and states
- CardPlayground - Card component examples
- FormPlayground - Form components and validation
- ModalPlayground - Modal dialogs and overlays
- CompositionPlayground - Component composition patterns
- LayoutPlayground - Layout components
- UtilityPlayground - Utility components
# Component validation
npm run audit:component Button # Check single component
npm run audit:quick Card # Alias for component audit
# System validation
npm run audit:system # Check entire codebase BEM compliance
npm run audit:full # Alias for system audit
# CSS auditing
./grammar-ops/scripts/audit/components/audit-css.shContent Stack Components follows a strict 4-layer architecture:
Base components that map directly to HTML elements:
Box, Button, Badge, Card, Input, Textarea, Select, Checkbox,
Radio, Link, Image, Text, Label, Dropdown, Modal, Spinner, etc.
Rules:
- ✅ Can use React hooks
- ✅ Can use utility functions
- ❌ Cannot import other components
- ❌ No business logic
Components built from primitives:
EditableField, PromptSelector, ProgressIndicator, Accordion,
EmptyState, LoadingState, ErrorState, ResultsModal
Rules:
- ✅ Can import primitives
- ✅ Can use React hooks
- ❌ Cannot import other composed components
- ❌ No business logic
Business logic components:
content-inbox/ # Queue management system
studio/ # Social media editors
storage/ # Storage components
search/ # Search functionality
Rules:
- ✅ Can import primitives and composed components
- ✅ Can contain business logic
- ✅ Can use API calls
- ❌ Cannot import from other features
Full page components combining features
Rules:
- ✅ Can import from any lower layer
- ✅ Handle routing
- ✅ Orchestrate features
Every component includes LLM-optimized documentation headers:
/**
* @file components/Button.tsx
* @purpose Core button component
* @layer primitive
* @deps None (primitive component)
* @used-by [App, Header, Form, ...]
* @cssFile /styles/components/button.css
* @llm-read true
* @llm-write full-edit
* @test-coverage 100
*/This enables AI assistants to navigate the codebase efficiently.
content-stack-components/
├── src/
│ ├── components/ # Primitive components (36+)
│ ├── features/ # Feature modules
│ │ ├── content-inbox/ # Queue management system
│ │ ├── studio/ # Social media editors
│ │ ├── storage/ # Storage components
│ │ └── search/ # Search functionality
│ ├── playground/ # Component playground
│ │ └── components/ # Playground demos
│ ├── styles/ # BEM-compliant CSS
│ │ ├── components/ # Component styles
│ │ ├── features/ # Feature styles
│ │ ├── pages/ # Page styles
│ │ └── globals.css # Global styles
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ └── types/ # TypeScript types
├── grammar-ops/ # Design system audit tools (submodule)
│ └── scripts/ # Automated validation scripts
├── backend/ # Development API (Express.js)
├── tests/ # Jest unit tests
├── cypress/ # E2E tests
├── scripts/ # Build and maintenance scripts
├── config/ # Configuration files
└── docs/ # Documentation
- Run Audits:
npm run audit:system - Check Build:
npm run build - Run Tests:
npm run test - Verify BEM: Check CSS naming follows
block__element--modifier
- Component in correct layer (primitive/composed/feature/page)
- BEM naming in CSS (e.g.,
.button,.button__icon,.button--primary) - Metadata header with
@layer,@deps,@cssFile - TypeScript props interface
- CSS file in matching directory
- No layer violations (don't import from higher layers)
Components (PascalCase):
Button.tsx, ContentInboxFeature.tsx, EditableField.tsxCSS (kebab-case):
button.css, content-inbox.css, editable-field.cssBEM Classes (lowercase + hyphens):
.content-inbox__header
.content-inbox__item--selected
.btn--primary- LLM Navigation Guide - Guide for AI assistants
- Component Architecture - Detailed architecture docs
- CSS Audit Reports - Historical audit results
This component library was the original development environment for components now used in Content Engine, the production-deployed content processing platform.
Content Engine (Production):
- ✅ Deployed on Vercel + Railway
- ✅ Next.js 15 + FastAPI backend
- ✅ Live content extraction and LLM processing
- ✅ Focus: Production features and user workflows
Content Stack Components (This Repo):
⚠️ Not deployed (development only)⚠️ React 19 + Vite⚠️ Component library and design system⚠️ Focus: Reusable components and patterns
This is an open-source project built with AI-assisted development. Contributions welcome!
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-component) - Follow the component architecture guidelines
- Run audit scripts:
npm run audit:system - Ensure tests pass:
npm run test - Commit your changes (
git commit -m 'Add amazing component') - Push to the branch (
git push origin feature/amazing-component) - Open a Pull Request
MIT License - see LICENSE file for details
- GitHub: prompt-stack/content-stack
- Production App: Content Engine
- Portfolio: Prompt Stack
- Organization: prompt-stack
Built with AI-assisted development. Strict component architecture, automated validation, and comprehensive design system. Real components, real patterns, reusable everywhere.