Frontend and business content standards for NebInfra. Covers WCAG accessibility, Core Web Vitals, StoryBrand framework, React/Next.js patterns, WordPress standards, Node.js/Express, Python/Flask, database patterns, and multi-country document formatting. Load when working on frontend or business content repositories.
Minimum 44px tap target size on all interactive elements
Tailwind CSS
Preferred styling approach for new projects
Custom component extraction for repeated patterns
Consistent spacing and sizing via design tokens
Dark mode support where applicable
CSS-in-JS
Styled-components or Emotion when component-scoped styles are needed
Theme provider for consistent styling across app
CSS Security
Content Security Policy compliance
Avoid inline styles in production (CSP)
Sanitized dynamic CSS generation
Protection against CSS injection
Build Tools
PostCSS for CSS processing
Autoprefixer for browser compatibility
PurgeCSS for unused style removal
Stylelint for CSS linting
React / Next.js Patterns
Stack Requirements
Next.js 15+ with App Router (required for new projects)
TypeScript 5+ (mandatory)
React 19+ functional components with hooks
Tailwind CSS with shadcn/ui components (Material-UI or Ant Design as alternatives)
Architecture
Small, single-responsibility components with proper TypeScript prop typing
Custom hooks for reusable logic
Proper error boundaries at page and feature level
State Management
Scope
Tool
Local component state
React hooks (useState, useReducer)
Server state
TanStack Query or SWR
Global client state
Zustand
Form state
React Hook Form
Frontend is a Dumb Renderer
All data classification, grouping, and business logic belongs in the backend. The frontend receives pre-structured data and renders it. Keep business logic out of components.
Clean Data Structure Updates
When data structures change, update all consumers cleanly. Avoid re-exports and shims. Fix data structures end-to-end: backend models, API, frontend types, components.
Testing
Jest + React Testing Library for component tests
Cypress or Playwright for E2E
MSW for API mocking
Test component behavior, not implementation details
Browser Automation Safety
When using Playwright or any browser automation, avoid terminating the user's personal Chrome/Chromium instances. Always identify the correct Chrome process (Playwright-spawned) before terminating. Use headless mode when possible.
WordPress Standards
Stack Requirements
WordPress 6.4+ with PHP 8.2+
MySQL 8.0 with Redis caching
Docker Compose deployment
Security
Regular updates for core, themes, and plugins
Security headers configured
Access control properly set
Backup procedures in place and tested
Content Workflow
Markdown to WordPress content pipeline
AI-generated content requires human review before publication
Node.js / Express
Project Structure
Domain-organized routes and middleware
Proper module organization with clear separation of concerns
Configuration via environment variables
API Design
RESTful principles with proper versioning
Request validation on all endpoints
Consistent error response format
API documentation maintained
Security
CORS configured per-environment
Rate limiting on all public endpoints
Security headers (Helmet.js or equivalent)
Input validation and sanitization
Authentication
JWT handling with proper expiry and refresh
Password hashing (bcrypt, argon2)
OAuth integration where needed
Role-based access control
Performance
Response caching where appropriate
Async/await for all I/O operations
Connection pooling for databases
Proper logging and monitoring
Testing
Unit tests for business logic
Integration tests for API endpoints
Proper mocking for external dependencies
Error scenario coverage
Deployment
Docker-based deployment
Environment variables for configuration (secrets must not be hardcoded)
Structured logging for observability
Graceful shutdown on process signals
Python / Flask
Project Structure
src/ layout with src/your_package_name/
Tests in tests/ parallel to src/
Configuration via environment variables or config/
templates/ for Jinja2, static/ for assets
Code Style
Black code formatting (88 char line length)
isort for import sorting
PEP 8 naming: snake_case functions/variables, PascalCase classes, UPPER_CASE constants
Absolute imports over relative imports
Type hints on all function parameters and return types